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

基本形

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

---

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

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

参考

• レスポンシブ画像 - MDN

---

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

```html ```

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を使う

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

参考

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

---

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

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

---

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

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

参考

• 2. htaccessでファイルを差し替える - WebP対応をしたらサイトが軽くなったので、最も対応しやすい方法を解説します - イロコトのブログ
• nginxにおけるWebP画像の選択的レスポンスの設定方法

---

decoding属性

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

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

参考

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

---

loading属性

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

参考

• decoding="async" VS loading="lazy" — ブログ | 株式会社Spelldata
• Firefox 75、HTML の指定のみで動作する画像遅延読み込み （loading="lazy"） に正式対応 - WWW Watch
• Native image lazy-loading for the web! - Addy Osmani
• 【HTML】loading属性で“lazy”を指定する場合、widthとheight属性が必要

---

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

```html ```

• decoding="async"とloading="lazy"は、併記しても両立しない。両方書くとloading="lazy"が優先される。
  

• loading="lazy"が指定されていてもページ読み込み時にビューポート内の画像は遅延せず読み込まれる。

• ということは大量の画像がありスクロールするページではloading="lazy"、そうでなければdecoding="async"といった具合にケースによって使い分けるのが良いのではないか（自信なし）

参考

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

---

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

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

---

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

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

• Optimize Cumulative Layout Shift - web.dev

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

• 画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
• Cumulative Layout Shift (CLS) - web.dev
• 【重要】コアウェブバイタルとは？ グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】 - Web担当者Forum
• 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

---

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

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

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