HTMLにimg要素で画像を表示する 2020年版 #初心者

基本形

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

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

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

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

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

参考

レスポンシブ画像 - MDN

レスポンシブ画像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属性を使うとさまざまなディスプレイサイズに対応できる。

参考

レスポンシブ画像 - MDN

レスポンシブ画像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要素を組み合わせるとディスプレイサイズなど条件別にまったく別な画像を出し分けることもできる。

参考

アートディレクション - MDN

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

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

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

参考

レスポンシブイメージのネイティブサポートほかの画像フォーマットを読み込む - html5rocks

レスポンシブ画像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記述量がびっくりするほど増えます

サーバー側でwebp出し分け設定を行う方法

前項のようにHTMLの記述量が増えることを防止するために、サーバー側の設定変更で対応する方法があります。Apache/.htaccessを使う方法とNginxを使う方法に付いては、下記が大変参考になりました。

参考

decoding属性

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

decoding="async" 指定で、画像は非同期で復号化される。HTML Living Standard標準化仕様で、IE以外の主要ブラウザで使用可能。

画像のデコーディング(復号)を非同期にすることで、表示時間が短縮される。

参考

decoding="async" VS loading="lazy" — ブログ | 株式会社Spelldata

loading属性

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

loading="lazy"指定で画像の遅延読み込みができる。
HTML Living Standard標準化仕様ですが、IEとSafariは現在のところ非対応。
仕様上width / height 属性を書いてあげないと動作しない。

参考

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

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

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

参考

decoding="async" VS loading="lazy" — ブログ | 株式会社Spelldata

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

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

2019年10月にWHATWGが標準化。

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

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

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

Optimize Cumulative Layout Shift - web.dev

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>