第5回 画像を追加する – 画像の最適化やサイズ調整 – HTML入門講座

はじめに

ウェブページに画像を追加することで、視覚的な要素を加え、内容をより魅力的にすることができます。HTMLでは、画像を表示するために<img> タグを使用します。この講座では、基本的な画像の挿入方法から、サイズの調整や説明文の追加、レスポンシブデザインに対応する方法までを学んでいきます。

基本的な画像の挿入方法

HTMLで画像を表示するには、<img> タグを使用します。このタグは、画像ファイルの場所を指定する src 属性と、代替テキストを指定する alt 属性を含みます。代替テキストは、画像が表示できない場合や、スクリーンリーダーを使用するユーザー向けの説明文として重要です。

基本的な構文

<img src="画像のパス" alt="画像の説明">

例えば、以下のコードで画像を表示できます：

<img src="example.jpg" alt="風景の写真">

このコードは、「example.jpg」という画像を表示し、画像が表示されない場合には「風景の写真」という代替テキストが表示されます。

画像の属性

<img> タグには、画像の表示方法をコントロールするためのさまざまな属性があります。ここでは、代表的な属性について説明します。

width属性とheight属性

width 属性と height 属性を使って、画像の表示サイズを指定できます。これらの属性にはピクセル単位で数値を指定します。

<img src="example.jpg" alt="風景の写真" width="500" height="300">

この例では、画像の幅を500ピクセル、高さを300ピクセルに設定しています。画像の比率を保つためには、通常、どちらか一方の属性だけを指定するか、CSSでサイズを調整するのが望ましいです。

alt属性

alt 属性は、画像の代替テキストを指定するもので、画像が表示できない場合に表示されます。また、スクリーンリーダーを使用するユーザーにも画像の内容を説明する役割を果たします。代替テキストは、SEOの観点からも重要で、画像の意味を適切に伝えるように設定することが推奨されます。

外部リソースからの画像の挿入

画像は、自分のサイトに保存しているファイル以外にも、外部のウェブサイトから挿入することができます。外部の画像を使用する場合も、<img> タグに画像のURLを指定します。

<img src="https://example.com/image.jpg" alt="外部からの画像">

このコードは、外部のウェブサイトに保存されている画像を表示します。ただし、外部画像の使用には注意が必要です。画像が突然削除されたり、リンク先が変更された場合、画像が正しく表示されなくなることがあります。

画像リンクの作成

画像自体をリンクにすることも可能です。例えば、画像をクリックすると他のページやウェブサイトに移動するリンクを作成する場合、<a> タグで画像を囲むことで実現できます。

<a href="https://www.example.com">
  <img src="example.jpg" alt="クリックして移動">
</a>

この例では、画像がリンクになっており、クリックすると指定されたURLに移動します。

レスポンシブデザインと画像

現在のウェブデザインでは、スマートフォンやタブレットなど、さまざまなデバイスに対応するレスポンシブデザインが重要です。CSSを使って画像をレスポンシブにすることで、画面サイズに応じて画像のサイズが自動的に調整されるように設定できます。

レスポンシブ画像の例

以下は、CSSを使って画像をレスポンシブにする簡単な方法です：

<style>
img {
    max-width: 100%;
    height: auto;
}
</style>

このコードでは、画像の幅をコンテナの100%に制限し、元のアスペクト比を保ちながら画像の高さを自動調整します。これにより、画像は大きな画面ではフルサイズで表示され、小さな画面では自動的に縮小されます。

画像の最適化

ウェブページのパフォーマンスを向上させるために、画像の最適化が非常に重要です。高解像度の画像を使用すると、ページの読み込み速度が遅くなる可能性があるため、画像のサイズを適切に圧縮し、形式を選択することが必要です。

画像フォーマットの選択

画像フォーマットにはいくつか種類があり、それぞれに適した使用方法があります。

• JPEG: 写真や多くの色が含まれる画像に最適です。
• PNG: 透明な背景や、詳細なグラフィックに適しています。
• GIF: アニメーションを含む画像や、少ない色数の画像に適しています。
• WebP: 新しいフォーマットで、高い圧縮率と高品質を両立します。

まとめ

今回は、HTMLで画像を追加する基本的な方法から、画像のサイズ調整、リンク化、そしてレスポンシブデザイン対応までを学びました。画像はウェブページを視覚的に豊かにするための重要な要素であり、適切なフォーマットや最適化によってパフォーマンスを向上させることも可能です。これらの技術を活用して、より魅力的で使いやすいウェブページを作成しましょう。

次回は、リストとナビゲーションの作成について学びます。リストを使って情報を整理し、ナビゲーションメニューを作成する方法を見ていきましょう！