画像はWebページの通信量を大きくしやすいファイルです。CSSで小さく表示するだけでは、元の大きな画像をダウンロードする量は減りません。
画面幅と用途に合う画像を用意し、ブラウザが適切な候補を選べるHTMLを書きます。
画像形式と表示サイズを決める
- 写真：WebPまたはJPEG
- 透過を含む写真や複雑な画像：WebPまたはPNG
- ロゴや単純な図形：SVG
- 小さなアイコン：既存のアイコンセットやSVGを検討
書き出し時は実際の表示幅と高解像度画面を考慮します。元画像を保持し、公開用画像だけを圧縮してください。
幅と高さをHTMLへ指定する
widthとheightを指定すると、画像が読み込まれる前にブラウザが縦横比を確保できます。CSSでは縦横比を保って親幅へ収めます。
次の画像は、「幅と高さをHTMLへ指定する」で扱うコードや構成をブラウザで表示した結果です。
<img
src="images/feature-800.webp"
alt="管理画面で記事を編集している様子"
width="800"
height="600"
>srcsetとsizesで候補を渡す
ブラウザへ複数の画像候補を渡すと、画面と表示幅に合う画像を選択できます。
同じ構図で解像度が異なる画像はsrcsetへ並べ、sizesでレイアウト上のおおよその表示幅を伝えます。ブラウザが画面幅や解像度に応じて候補を選びます。
<img
src="images/feature-800.webp"
srcset="images/feature-480.webp 480w,
images/feature-800.webp 800w,
images/feature-1200.webp 1200w"
sizes="(max-width: 767px) calc(100vw - 32px),
50vw"
alt="管理画面で記事を編集している様子"
width="1200"
height="900"
>pictureで構図や形式を切り替える
スマートフォンでは縦長、パソコンでは横長のように構図を変える場合はpictureを使います。単に解像度だけを変える場合はimgのsrcsetを使います。
次の図では、「pictureで構図や形式を切り替える」の仕組みや関係を確認できます。
<picture>
<source media="(max-width: 767px)" srcset="images/hero-sp.webp">
<img src="images/hero-pc.webp" alt="サービスを利用しているチーム" width="1440" height="720">
</picture>画面外の画像を遅延読み込みする
最初の画面より下にある画像にはloading="lazy"を使えます。最初に表示される主要画像まで遅延させると、表示が遅くなる場合があります。
次の図では、「画面外の画像を遅延読み込みする」の仕組みや関係を確認できます。
<img src="images/gallery.webp" alt="制作事例の一覧" width="960" height="640" loading="lazy">Networkで転送量を確認する
次の図では、「Networkで転送量を確認する」の仕組みや関係を確認できます。
- キャッシュを無効にしてページを再読み込みする
- NetworkのImgで取得した画像と容量を確認する
- 画面幅を変えて選ばれる画像候補を確認する
- 404や縦横比の崩れがないか確認する
- 圧縮前後で見た目と容量を比較する