基本形

<img src="sample.jpg" alt="画像">

基本形は非常にシンプルですね。

レスポンシブ画像1: srcset属性

<img src="sample.jpg" 
     srcset="sample@2x.jpg 2x, sample@3x.jpg 3x" 
     alt="画像">

srcset属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。

参考

レスポンシブ画像2: sizes属性

<img srcset="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>
  <source media="(max-width: 799px)" 
          srcset="sample-480w-sp.jpg">
  <source media="(min-width: 800px)" 
          srcset="sample-800w.jpg">
  <img src="sample-800w.jpg" 
       alt="画像">
</picture>

picture要素とsource要素を組み合わせるとディスプレイサイズなど条件別に全く別な画像を出し分けることもできる。

参考

レスポンシブ画像4: webpを使う

<picture>
  <source type="image/webp" 
          srcset="sample.webp">
  <img src="sample.png" 
       alt="画像">
</picture>

webpはGoogleが開発した画像形式で、jpegなど従来型画像形式よりも軽量であるためwebパフォーマンス面で有利になる。
前述のアートディレクションと同様の方法で表示切り替え可能。
IEとSafariは現在のところwebp非対応。

参考

レスポンシブ画像5: 画面サイズおよび解像度ごとの出し分けとwebp/pngの出し分けを律儀に行ってみる

<picture>
  <source type="image/webp" 
          media="(min-width: 1200px)" 
          srcset="sample-lg.webp 1x, sample-lg@2x.webp 2x">
  <source type="image/webp" 
          media="(max-width: 1199px)" 
          srcset="sample-md.webp 1x, sample-md@2x.webp 2x">
  <source type="image/webp" 
          media="(max-width: 380px)" 
          srcset="sample-sm.webp 1x, sample-sm@2x.webp 2x">
  <source type="image/png" 
          media="(min-width: 1200px)" 
          srcset="sample-lg.png 1x, sample-lg@2x.png 2x">
  <source type="image/png" 
          media="(max-width: 1199px)" 
          srcset="sample-md.png 1x, sample-md@2x.png 2x">
  <source type="image/png" 
          media="(max-width: 380px)" 
          srcset="sample-sm.png 1x, sample-sm@2x.png 2x">
  <img src="sample.png" 
       alt="画像">
</picture>

画像一枚を表示するためにHTML記述量がびっくりするほど増えます😅

decoding属性

<img src="sample.jpg" 
     decoding="async"
     alt="画像">

decoding="async"指定で、画像は非同期で読み込まれる。HTML Living Standard標準化仕様で、IE以外の主要ブラウザで使用可能。
画像のデコーディング(復号)を非同期にすることで、表示時間が短縮される。

参考

loading属性

<img src="sample.jpg" 
     loading="lazy"
     alt="画像">

loading="lazy"指定で画像の遅延読み込みができる。

HTML Living Standard標準化仕様ですが、IEとSafariは現在のところ非対応。

参考

decoding=”async”とloading=”lazy”を両方書くとどうなるか

<img src="sample.jpg" 
     decoding="async" 
     loading="lazy" 
     alt="画像">
  • decoding="async"とloading="lazy"は、併記しても両立しない。両方書くとloading="lazy"が優先される。
  • loading="lazy"が指定されていてもページ読み込み時にビューポート内にある画像は遅延せず読み込まれる。
  • ということは大量の画像がありスクロールするページではloading="lazy"、そうでなければdecoding="async"といった具合にケースによって使い分けるのが良いのではないか（自信なし）🙄

参考

【重要】width / height 属性の仕様変更

<img
    src="sample.jpg"
    width="640"
    height="360"
    alt="画像">

2019年10月にWHATWGが標準化。

width/height 属性を記述することでlayout Shift（画像ロード時の表示のガタつき）が起きなくなる。
従来width/height 属性はピクセル単位のサイズのことだったが、仕様変更により同時にアスペクト比を表すことができるようになった。

layout Shift（画像ロード時の表示のガタつき）

実際の動きはこちらを参照。

Layout ShiftはLighthouse v6より新指標CLSとしてパフォーマンス計測対象となっている。
参考

全部のせで最適化してみる

レスポンシブ画像 + webp対応 + 非同期復号 + Layout Shift対策全部のせで画像を最適化したコードは次のようになりました。

<picture>
  <source type="image/webp" 
          srcset="full_optimized.webp 1x, full_optimized@2x.webp 2x, full_optimized@3x.webp 3x">
  <img src="full_optimized.png" 
       srcset="full_optimized@2x.png 2x, full_optimized@3x.png 3x" 
       decoding="async"
       width="640" 
       height="360"
       alt="画像">
</picture>

元記事はこちら

「HTMLにimg要素で画像を表示する 2020年版」