基本形
<imgsrc="sample.jpg"alt="画像">基本形は非常にシンプルですね。
レスポンシブ画像1: srcset属性
<imgsrc="sample.jpg"srcset="sample@2x.jpg 2x, sample@3x.jpg 3x"alt="画像">srcset属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。
参考
レスポンシブ画像2: sizes属性
<imgsrcset="sample-320w.jpg 320w,
sample-480w.jpg 480w,
sample-800w.jpg 800w"sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"src="sample-800w.jpg"alt="画像">sizes属性を使うと様々なディスプレイサイズに対応できる。
参考
レスポンシブ画像3: アートディレクション（画像の切り替え）
<picture><sourcemedia="(max-width: 799px)"srcset="sample-480w-sp.jpg"><sourcemedia="(min-width: 800px)"srcset="sample-800w.jpg"><imgsrc="sample-800w.jpg"alt="画像"></picture>picture要素とsource要素を組み合わせるとディスプレイサイズなど条件別に全く別な画像を出し分けることもできる。
参考
レスポンシブ画像4: webpを使う
<picture><sourcetype="image/webp"srcset="sample.webp"><imgsrc="sample.png"alt="画像"></picture>webpはGoogleが開発した画像形式で、jpegなど従来型画像形式よりも軽量であるためwebパフォーマンス面で有利になる。
前述のアートディレクションと同様の方法で表示切り替え可能。
IEとSafariは現在のところwebp非対応。
参考
レスポンシブ画像5: 画面サイズおよび解像度ごとの出し分けとwebp/pngの出し分けを律儀に行ってみる
<picture><sourcetype="image/webp"media="(min-width: 1200px)"srcset="sample-lg.webp 1x, sample-lg@2x.webp 2x"><sourcetype="image/webp"media="(max-width: 1199px)"srcset="sample-md.webp 1x, sample-md@2x.webp 2x"><sourcetype="image/webp"media="(max-width: 380px)"srcset="sample-sm.webp 1x, sample-sm@2x.webp 2x"><sourcetype="image/png"media="(min-width: 1200px)"srcset="sample-lg.png 1x, sample-lg@2x.png 2x"><sourcetype="image/png"media="(max-width: 1199px)"srcset="sample-md.png 1x, sample-md@2x.png 2x"><sourcetype="image/png"media="(max-width: 380px)"srcset="sample-sm.png 1x, sample-sm@2x.png 2x"><imgsrc="sample.png"alt="画像"></picture>画像一枚を表示するためにHTML記述量がびっくりするほど増えます
decoding属性
<imgsrc="sample.jpg"decoding="async"alt="画像">decoding="async"指定で、画像は非同期で読み込まれる。HTML Living Standard標準化仕様で、IE以外の主要ブラウザで使用可能。
画像のデコーディング(復号)を非同期にすることで、表示時間が短縮される。
参考
loading属性
<imgsrc="sample.jpg"loading="lazy"alt="画像">loading="lazy"指定で画像の遅延読み込みができる。
HTML Living Standard標準化仕様ですが、IEとSafariは現在のところ非対応。
参考
- decoding="async" VS loading="lazy" — ブログ | 株式会社Spelldata
- Firefox 75、HTML の指定のみで動作する画像遅延読み込み （loading="lazy"） に正式対応 - WWW Watch
- Native image lazy-loading for the web! - Addy Osmani
decoding="async"とloading="lazy"を両方書くとどうなるか
<imgsrc="sample.jpg"decoding="async"loading="lazy"alt="画像">decoding="async"とloading="lazy"は、併記しても両立しない。両方書くとloading="lazy"が優先される。loading="lazy"が指定されていてもページ読み込み時にビューポート内にある画像は遅延せず読み込まれる。ということは大量の画像がありスクロールするページでは
loading="lazy"、そうでなければdecoding="async"といった具合にケースによって使い分けるのが良いのではないか（自信なし）![:rolling_eyes:]( ":rolling_eyes:")
参考
【重要】width / height 属性の仕様変更
<imgsrc="sample.jpg"width="640"height="360"alt="画像">2019年10月にWHATWGが標準化。width / height属性を記述することでlayout Shift（画像ロード時の表示のガタつき）が起きなくなる。
従来width / height属性はピクセル単位のサイズのことだったが、仕様変更により同時にアスペクト比を表すことができるようになった。
layout Shift（画像ロード時の表示のガタつき）
実際の動きはこちらを参照。
Layout ShiftはLighthouse v6より新指標CLSとしてパフォーマンス計測対象となっている。
参考
- 画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
- Cumulative Layout Shift (CLS) - web.dev
- 【重要】コアウェブバイタルとは？ グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】 - Web担当者Forum
全部のせで最適化してみる
レスポンシブ画像 + webp対応 + 非同期復号 + Layout Shift対策全部のせで画像を最適化したコードは次のようになりました。
<picture><sourcetype="image/webp"srcset="full_optimized.webp 1x, full_optimized@2x.webp 2x, full_optimized@3x.webp 3x"><imgsrc="full_optimized.png"srcset="full_optimized@2x.png 2x, full_optimized@3x.png 3x"decoding="async"width="640"height="360"alt="画像"></picture>