引き継いだサイトの表示速度を調べていたとき、原因をたどっていくと、img タグに src しか書かれていない画像がずらっと並んでいた、ということがありました。見た目はちゃんと表示されているので、制作した側も気づきにくいところなんです。

画像は img 要素に src を書けば表示されます。ただ、それだけでは足りません。alt、width と height、loading、fetchpriority、srcset といった属性で、画像が見えない人への伝わり方、読み込み中に画面がずれるかどうか、ページの表示の速さが変わります。

ここでは、属性ごとに何を書けばよいかを、私が案件で実際に気をつけていることと合わせてまとめます。画像の形式（WebP など）の選び方は、別の記事にまとめています。

<img src="/img/works/sample.webp"
     alt="制作事例：飲食店のトップページ（スマートフォン表示）"
     width="1200" height="800"
     loading="lazy">

alt は画像の代わりになる文章

alt は、画像が見えないときに画像の代わりになる文章です。読み上げソフトは alt を読み上げますし、画像が読み込めなかったときにも alt が表示されます。検索エンジンも、画像の内容を知る手がかりにしています。

意味のある画像は、内容を短く書く

考え方としては、画像を見られない人がその画像から何を受け取ればよいか、を書きます。写っているものをすべて説明する必要はなく、その場所で伝えたいことが伝われば十分です。

飾りの画像は alt="" にする

区切りの線や背景の模様のように、意味を持たない画像は alt="" と空にします。alt 属性そのものを書かないと、読み上げソフトがファイル名を読み上げることがあるんです。「空にする」と「書かない」は別物なので、ここはよく確認しています。

リンクになっている画像は、行き先を書く

ロゴやバナーなど、リンクになっている画像の alt は、リンクの文言として扱われます。なので、画像の見た目ではなく、行き先が分かる文にしておきます。

キーワードを詰め込まない

検索のために alt へキーワードを並べるのは、やめておいてください。読み上げを使う人には意味の通らない文が読まれるだけで、検索の上でもスパムと見なされるおそれがあります。引き継いだサイトでときどき見かけますが、見つけたら直すようにしています。

width と height を書くと、レイアウトがずれない

ブラウザは、画像を読み込み終えるまで、その画像の大きさを知りません。width と height が書かれていないと、画像の場所を高さ0のまま組み立てて、画像が届いた瞬間に場所を広げます。このとき、下にある文章やボタンが押し下げられるんです。これが CLS（読み込み中のレイアウトのずれ）の典型的な原因で、実際、相談を受けたサイトでこれが原因だったことが何度かあります。

width と height を書いておけば、ブラウザはその縦横比から、画像が届く前に場所を確保できます。

<img src="/img/photo.webp" alt="…" width="1200" height="800">

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

ここはよく聞かれるのですが、書く値は表示する大きさではなく、画像の縦横比が分かる値です。元の画像のピクセル数をそのまま書けば足ります。表示の大きさは CSS で決め、height: auto にしておけば、幅を変えても縦横比が保たれます。

CSS で height を固定の値にすると、縦横比が崩れて画像が伸び縮みします。決まった枠に収めたいときは、object-fit: cover を使います。

loading="lazy" は画面の外の画像だけに付ける

loading="lazy" を付けた画像は、スクロールして画面に近づくまで読み込まれません。ページの下のほうにある画像に付けると、最初の読み込みが軽くなります。

気をつけたいのは、ファーストビューのメインの画像（メインビジュアルや記事のアイキャッチ）には付けないことです。loading="lazy" の画像は、ブラウザがレイアウトを組み立てて「画面に入る」と判断するまで読み込みが始まりません。そのため、ページの主役の画像が遅れて表示され、LCP（主役が見えるまでの時間）が遅くなってしまいます。全部の画像に一律で付けているサイトは意外と多いです。

<!-- ファーストビューのメイン画像: lazy にしない -->
<img src="/img/mv.webp" alt="…" width="1600" height="900">

<!-- スクロールしないと見えない画像: lazy にする -->
<img src="/img/works-01.webp" alt="…" width="800" height="600" loading="lazy">

WordPress は 5.5 以降、本文の画像に loading="lazy" を自動で付けます。5.9 以降は、ページの最初のほうの画像には付けないよう調整されています。ただし、テーマのテンプレートに img タグを直接書いた画像はこの仕組みの対象外です。メインビジュアルの属性は、自分で確かめるようにしてください。

fetchpriority="high" で、主役の画像を先に読ませる

ブラウザは、ページの中の画像を、最初はあまり高くない優先度で読み込みます。LCP になる画像に fetchpriority="high" を付けると、ほかの画像より先に取りに行ってくれます。

<img src="/img/mv.webp" alt="…" width="1600" height="900" fetchpriority="high">

付けるのは、ファーストビューの主役になる1〜2枚だけにしています。すべての画像に付けると、優先する意味がなくなるからです。なお、WordPress は 6.3 以降、主役になりそうな画像に fetchpriority="high" を自動で付けることがあります。

メインビジュアルを CSS の背景画像にしている場合や、外部のスクリプトやフォントの読み込み方も、表示の速さに関わってきます。こちらは別の記事にまとめました。

srcset と sizes、picture の使い分け

画面の幅に合わせて画像を出し分ける方法は2つあります。目的によって使い分けています。

同じ画像を大きさ違いで配る（srcset と sizes）

<img src="/img/photo-800.webp"
     srcset="/img/photo-400.webp 400w,
             /img/photo-800.webp 800w,
             /img/photo-1600.webp 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="…" width="1600" height="900" loading="lazy">

srcset には画像の候補と、それぞれの横幅（w）を書きます。sizes には、その画像が画面の中でどのくらいの幅で表示されるかを書きます。あとはブラウザが、画面の幅と解像度から、ちょうどよい候補を選んでくれます。

見落としやすいのが sizes です。sizes を書かないと、画面の幅いっぱい（100vw）で表示されるものとして選ばれます。小さく表示する画像でも大きなファイルが選ばれてしまうので、srcset を使うときは sizes も書くようにしています。

構図の違う画像を出し分ける（picture）

<picture>
  <source media="(min-width: 768px)" srcset="/img/mv-pc.webp" width="1600" height="600">
  <img src="/img/mv-sp.webp" alt="…" width="750" height="900" fetchpriority="high">
</picture>

picture を使う場合も、alt・loading・fetchpriority は中の img に書きます。縦横比が画像ごとに違うときは、source にも width と height を書いておくと、それぞれの比率で場所が確保されます。

WordPress では、wp_get_attachment_image や the_post_thumbnail で画像を出すと、srcset と sizes が自動で付きます。テンプレートでは img タグを手で書くより、これらの関数を使うほうが確実なので、私は基本的に関数で出しています。

まとめ

1. 意味のある画像は alt に内容を、飾りの画像は alt="" を書く
2. width と height は必ず書き、CSS で height: auto にする
3. loading="lazy" は画面の外の画像だけ。ファーストビューの主役には付けない
4. 主役の画像には fetchpriority="high" を付ける
5. 大きさ違いは srcset と sizes、構図違いは picture で出し分ける

画像の属性まで整えて納品します

ワプラボのコーディング代行では、画像の書き出しに合わせて alt・width/height・loading を指定し、ファーストビューの画像は遅延読み込みにしない形で納品しています。いまあるサイトで、画像まわりの指定だけを見直したいというご相談にも対応しています。