1 of 28

画像表示の高速化テクニック

株式会社ピクセルグリッド

フロントエンド・エンジニア

渡辺　由 @yuw27b

2022/10/28

DIST.37 「マークアップな夜」

2 of 28

Webページに画像を表示する

JPEG形式

4032×3024ピクセル

12.5MB

Quality: 0.75

2016×1512ピクセル

728KB

MinifyしたjQuery(+gzip)

45KB

3 of 28

画像

HTML

JS

CSS

画像があってもなるべく快適に

  • 画像の容量を減らす
  • 読み込むタイミングの調整
  • レスポンシブ
  • 待ち時間のふるまい
  • 画像をなくす
  • マークアップ
  • 画像のフォーマット
  • CDNサービスの活用

4 of 28

マークアップ

5 of 28

<img>要素

  • srcset属性

<img src="sample_1080.jpg" alt="画像の説明"

srcset="sample_1080.jpg 1080w, sample_720.jpg 720w"

>

<img src="sample.jpg" alt="画像の説明"

srcset="sample.jpg 2x, sample_small.jpg 1x"

>

レスポンシブ

[画像のパス] [幅 または 密度]

6 of 28

<img>要素

<img src="sample_1080.jpg" alt="画像の説明"

srcset="sample_1080.jpg 1080w, sample_720.jpg 720w"

>

レスポンシブ

  • 横幅や解像度に応じた画像を用意していることを伝える
    • ブラウザが最適なものを判断して取得・表示する

1080と720は同じ内容の画像にする

7 of 28

<img>要素

  • sizes属性（srcset属性と合わせて利用する）

<img src="sample_1080.jpg" alt="画像の説明"

srcset="sample_1080.jpg 1080w, sample_720.jpg 720w"

sizes="(max-width: 1000px) 720px, 1080px"

>

  • viewportの幅1000pxまでは720pxの画像を使ってほしい
    • それ以外は1080px

レスポンシブ

メディアクエリ

8 of 28

<img>要素

  • 実際には…

レスポンシブ

DevToolsで確認

  • キャッシュをOFFに

9 of 28

<img>要素

  • loading属性

<img src="sample_1080.jpg" alt="画像の説明"

loading="lazy"

>

  • 画面の表示領域に近づいたら読み込んでほしい

タイミング

10 of 28

<img>要素

  • decoding属性
    • sync | async | auto

<img src="sample_1080.jpg" alt="画像の説明"

decoding="async"

>

  • 画像の展開処理を並列化させるかどうか
    • テキストなどを優先するなら`async`に

タイミング

Chrome 106〜

https://caniuse.com/mdn-html_elements_img_decoding

11 of 28

<picture>要素

<picture>

<source media="(max-width:720px)" srcset="720.jpg">

<img src="1080.jpg" alt="画像の説明">

</picture>

  • 画面幅による出しわけ
  • 画面幅に応じて使用する画像を指定する

レスポンシブ

12 of 28

<picture>要素

  • 画面幅に応じて使用する画像を指定する

レスポンシブ

PCとモバイルで別の画像を表示したいケース

13 of 28

<picture>要素

<picture>

<source srcset="sample.avif" type="image/avif">

<source srcset="sample.webp" type="image/webp">

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

</picture>

  • 画像フォーマットによる出しわけ
  • 上から優先度が高く、対応している画像が使用される

レスポンシブ

14 of 28

<img> VS <picture> + <img>

  • <picture>要素でできること
    • 画面幅によって違う画像を指定したい
    • 画像フォーマットによる出しわけ
  • それ以外は<img>要素＋srcset・sizes属性でOK！

レスポンシブ

15 of 28

画像のフォーマット

16 of 28

画像フォーマットのこと

  • リクエストヘッダー（accept）を見てみる

Chrome 106

画像の容量

image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

Firefox 106

image/avif,image/webp,*/*

Safari 16.1 (macOS12.6)

image/webp,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

Safari 16.1 (iOS)

image/webp,image/avif,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

17 of 28

Can I use…?

​

Chrome

Edge

Safari

iOS Safari

Firefox

AVIF

⭕️

❌

macOS 13〜

iOS 16〜

⭕️

WebP

⭕️

⭕️

⭕️

⭕️

⭕️

画像の容量

https://caniuse.com/avif ・https://caniuse.com/webp

18 of 28

AVIFによる圧縮

  • https://squoosh.app/

JPEG形式

4032×3024ピクセル

12.5MB

AVIF形式

2016×1512ピクセル

482KB

画像の容量

19 of 28

画像を用意する

<picture>

<source

srcset="sample_1080.avif 1080w,

sample_720.avif 720w,

sample.avif 480w"

type="image/avif">

<source

srcset="sample_1080.webp 1080w,

sample_720.webp 720w,

sample.webp 480w"

type="image/webp">

<img

src="sample.jpg"

srcset="sample_1080.jpg 1080w,

sample_720.jpg 720w,

sample.jpg 480w"

alt="画像の説明">

</picture>

JPEG

WebP

AVIF

画像を9枚用意する…？

20 of 28

フレームワークに任せる

<img class="gatsby-resp-image-image"

alt="画像の説明" title="画像の説明"

src="/.../sample.png"

srcset=

"/path/to/sample-256.png 256w,

/path/to/sample-512.png 512w,

/path/to/sample-1024.png 1024w,

/path/to/sample-1536.png 1536w"

sizes="(max-width: 1024px) 100vw, 1024px"

loading="lazy"

decoding="async"

>

画像が多いとビルドに時間はかかる

21 of 28

CDNサービスの活用

22 of 28

Webサービスの利用

  • 画像配信CDNサービス

23 of 28

画像を様々なフォーマットで配信できる

https://assets.imgix.net/examples/vista_900w.png?fm=avif&w=720&q=80

JPEG

WebP

AVIF

アップロード

URLで

フォーマットや

サイズを指定

24 of 28

フォーマット=auto

https://assets.imgix.net/examples/vista_900w.png?fm=auto&w=720&q=80

  • acceptヘッダーに応じてフォーマットを出しわけてくれる
    • <img>要素＋srcset属性で⭕️

25 of 28

画像の加工・合成

https://assets.imgix.net/background.png?auto=compress,format&duotone=000000,000000&duotone-alpha=60&blend-mode=normal&blend-h=630&blend=https://assets.imgix.net/main_pic.jpg?auto=compress,format&w=1200&h=630&fit=fill&fill=solid&fill-color=272727

26 of 28

画像にテキストを乗せる

https://codegrid.imgix.net/image.png?ixlib=js-3.5.1&w=1200&h=630&mark=https%3A%2F%2Fcodegrid.imgix.net%2F~text%3Fixlib%3Djs-3.5.1%26w%3D1000%26txt%3D%25E8%2584%2586%25E5%25BC%25B1%25E6%2580%25A7%25E3%2581%25AE%25E3%2581%2582%25E3%2582%258Bnpm%25E3%2583%2591%25E3%2583%2583%25E3%2582%25B1%25E3%2583%25BC%25E3%2582%25B8%25E3%2581%25AE%25E4%25BD%25BF%25E7%2594%25A8%25E3%2583%25AA%25E3%2582%25B9%25E3%2582%25AF%26txt-fit%3Dmax%26txt-size%3D57%26txt-font%3DHiragino%2520Sans%2520W5%26txt-color%3Dfff&mark-x=90&mark-y=195&blend=%23268728&blend-mode=overlay&txt=npm%20audit%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%20%7C%20%E5%89%8D%E7%B7%A8&txt-align=top%2Cleft&txt-font=Hiragino%20Sans%20W5&txt-size=30&txt-pad=100&txt-color=fff

OGP画像

27 of 28

画像にテキストを乗せる

アップロード

.OTF

フォントの自由度が高いです

フォントファイル

28 of 28

まとめ

  • 画像を快適に表示するために…
    • 画像の容量を減らす
      • WebP・AVIFにブラウザが対応
    • 読み込むタイミング
      • loading属性・decoding属性
    • レスポンシブ
      • <img>要素＋srcset属性、必要なら<picture>要素
      • フレームワークやWebサービスに頼るのも⭕️