img要素の使い方

HTMLのimg要素は、ページに画像を表示するための要素です。画像が見えない場合にも意味が伝わるように、alt属性を考えて書くことが大切です。

先に結論

最小例

<img src="/images/mountain.jpg"
     alt="夕方の山と湖の風景"
     width="1200"
     height="800">

widthとheightは、画像の表示領域を先に確保しやすくするためにも役立ちます。CSSで表示サイズを変える場合でも、画像の本来の縦横比を伝える値として指定します。

alt属性は画像の役割に合わせる

altは、画像が読み込めないときだけのエラーメッセージではありません。画像を見られない人や、画像の読み込みを無効にしている環境にも、画像がページで果たす役割を伝えるためのテキストです。

画像の役割	altの考え方
内容を伝える画像	画像の重要な内容を簡潔に書く。例: alt="夕方の山と湖の風景"
装飾だけの画像	alt=""と書き、支援技術が不要な画像として扱えるようにする
リンクの中にある画像	画像そのものではなく、リンク先の目的を説明する
文字を含む画像	画像内の、意味を持つ文字をテキストで伝える

altを省略してよいかは画像の役割や周囲の文脈に関係します。迷ったら、画像がなくても利用者が同じ目的を達成できる説明になっているかを確認します。

画像の候補を画面に合わせて選ぶ

同じ画像を大きな画面と小さな画面にそのまま送ると、必要以上に大きなファイルを読み込むことがあります。srcsetで候補を並べ、sizesで画像が画面上でどれくらいの幅になるかを伝えます。

<img
  src="/images/article-800.jpg"
  srcset="/images/article-400.jpg 400w,
          /images/article-800.jpg 800w,
          /images/article-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="記事の内容を表す風景"
  width="1600"
  height="900">

srcsetの候補選択は、画面幅だけでなく表示領域、画素密度、ネットワークなどの条件をもとにユーザーエージェントが行います。srcsetを指定しただけで、常に一番小さい画像や一番大きい画像が選ばれるわけではありません。

読み込みと表示のヒント

• loading="lazy"は、すぐには見えない画像の読み込みを遅らせるヒントです。重要な画像やページの入口にある画像を機械的に遅延させないようにします。
• decoding="async"などは、画像のデコード方法に関するヒントです。画像が表示されるまでのすべての処理順序を固定する属性ではありません。
• fetchpriorityは取得の優先度に関するヒントです。大量の画像に高優先度を付けると、かえって重要なリソースの取得を妨げることがあります。
• widthとheightを指定すると、画像到着前のレイアウトを安定させやすくなります。

よくある間違い

• alt="image"やファイル名だけを書いて、画像の役割を伝えない。
• 装飾画像なのに説明文を入れて、読み上げに不要な情報を追加する。
• altを省略したまま、画像の意味を周囲の見た目だけに任せる。
• widthとheightを実際の縦横比と違う値にして、画像が表示される前からレイアウトを歪める。
• 画像の重要度や意味を、loadingやfetchpriorityだけで解決しようとする。

Atlasで詳しく確認する

altの代替テキストとアクセシビリティマッピング、srcset・sizesの候補選択、画像の固有サイズ、読み込み・デコードの処理、実装Evidenceの範囲は、Yugien Atlasのimg要素ページで詳しく整理しています。画像の中の場所にリンクを付ける方法はイメージマップの使い方、画面幅や画像形式で構図・候補を切り替える場合はpicture要素のページも参照してください。

JavaScriptで画像を描いたり加工したりする場合は、canvas要素の使い方も参照してください。