HTML講座 / img・alt・画像サイズを指定する

HTMLに画像を入れるには、imgのsrcに画像の場所を指定します。altにはその画像が文脈の中で伝える情報を書き、widthとheightには画像の実寸に対応する値を指定すると、読み込み前に表示領域を確保しやすくなります。

画像を用意してimgで表示する

次の画像をクリックすると元ファイルを開けます。ファイルを保存し、編集するindex.htmlと同じフォルダーに置いてください。例のコードはHTMLファイルのbodyの中へ入れます。

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="A tree on a small island in a lake, with mountains beyond"
     width="1600" height="900">

保存して再読み込みすると、湖と木の画像が表示されます。imagesフォルダーに置いた場合はsrc="images/html-image-sample-lake-tree-1600-v1.webp"のように直します。img自体には終了タグはありません。画像をクリックできることはaで囲む別の機能であり、画像表示だけではリンクにはなりません。パスの考え方はリンクと相対パスで確認できます。

altに何を書くか

altは代替テキストです。画像が見えない場合にも、その画像がこの場所で伝える意味や機能を分かるようにします。次の例の英語の説明は、木、湖、山という画像の情報を表しています。日本語のページなら、その役割に合う日本語へ置き換えます。

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="A tree on a small island in a lake, with mountains beyond"
     width="1600" height="900">

単に「画像」と書いたり、検索キーワードを並べたりしません。近くの内容を繰り返す純粋な装飾ならalt=""が適切な場合もありますが、属性を省くこととは違います。重要な図やグラフでは主な情報を伝え、詳しい内容は近くの本文や表でも説明します。判断に迷ったらW3C WAIの代替テキスト判断フローを参照します。

実寸と表示サイズを区別する

画像は1600×900ピクセルです。width="1600" height="900"は縦横比を伝えますが、画像のピクセル数やダウンロード容量を減らす指定ではありません。本文の幅に収める場合は次のCSSを使えます。

img {
  max-width: 100%;
  height: auto;
}

このCSSはhead内のstyleまたはリンクしたCSSファイルに書きます。max-width: 100%で親領域より広がらないようにし、height: autoで比率を保ちます。小さいファイルを配信したい場合は、別途縮小した画像とsrcset・sizes・pictureを検討します。表示上小さくしただけで転送量が減ったとは判断しません。

画像が表示されないとき

srcのファイル名と拡張子、HTMLから見たフォルダー位置を順に確認し、画像URLだけを直接開いてみます。相対パスならHTMLファイルを移動していないかも調べます。画像を戻した後は、比率が変形していないか、狭い画面でも横にはみ出さないかを確認してください。見えるキャプションを付けたい場合はfigureとfigcaptionを使えます。属性の詳細はMDNのimg要素にあります。