<img>

画像タグ（Image）

文字だけでは伝えきれない情報を視覚的に表現するための要素。

「百聞は一見に如かず」を実装する

Webサイトの魅力は、文字だけでなく豊かなビジュアル表現ができる点にあります。`` タグを使いこなすことで、情報を直感的に伝え、ユーザーの心を動かすページを作ることができます。

1. 基本的な書き方と必須属性

`` タグは「終了タグがない（</img>と書かない）」特殊なタグです。

コード例

<img src="cat.jpg" alt="眠っている三毛猫" width="300" height="200">
  • src (Source): 画像ファイルの場所。絶対パスまたは相対パスで指定します。
  • alt (Alternative Text): 代替テキスト。画像が表示できない時や、読み上げソフトを使うユーザーのために、画像の内容を言葉で説明します（SEOにも重要！）。
  • width / height: ブラウザが画像のスペースを確保できるように、サイズを指定することを強く推奨します。レイアウトシフト（読み込み中のガタつき）を防げます。

2. 画像形式の使い分け

Webで使える画像形式はいくつかあり、それぞれ得意分野が異なります。

  • JPEG (.jpg)
    写真に最適。色は綺麗だが、背景透過はできない。
  • PNG (.png)
    ロゴやイラストに最適。背景を透明にできる。写真はファイルサイズが大きくなりがち。
  • WebP (.webp)
    次世代標準。高画質かつ軽量。JPEGとPNGの良いとこ取りで、現在のWeb制作では第一選択肢です。
  • SVG (.svg)
    ベクター画像。拡大しても荒れないので、アイコンやロゴに最適。

3. Figure要素との組み合わせ

画像にキャプション（説明文）をつけたい時は、HTML5で導入された `

` と `
` を使います。

<figure>
  <img src="graph.png" alt="2025年の売上推移">
  <figcaption>図1：2025年度 売上グラフ</figcaption>
</figure>

4. パフォーマンスへの配慮 (Lazy Loading)

ページの下の方にある画像まで最初から読み込むと、表示が遅くなります。`loading="lazy"` を追加するだけで、画面に近づいた時だけ読み込むようになり、サイトが爆速になります。

<img src="huge-photo.jpg" alt="..." loading="lazy">

⚠️ 注意

ファーストビュー（ページを開いて最初に見える範囲）の画像には `loading="lazy"` をつけないでください。逆に表示が遅れてしまいます。

まとめ

ただ画像を貼るだけでなく、「適切なフォーマットを選ぶ」「alt属性をしっかり書く」「遅延読み込みで高速化する」といった工夫を凝らすことで、プロフェッショナルな品質のページに仕上がります。