画像のパフォーマンス

画像は多くの場合、ウェブ上で最も量が高く、最も広く使われているリソースです。たとえば、 画像を最適化すると、ウェブサイトのパフォーマンスが大幅に向上します。 ほとんどの場合、画像を最適化するということは、 送信するバイト数を最適化することもできます。 ユーザーのデバイスに適した サイズの画像を配信するアプリです

<img> 要素または <picture> 要素を使用して、画像をページに追加できます。 CSS の background-image プロパティ

イメージサイズ

画像リソースの使用に関して実行できる最初の最適化は、 画像を適切なサイズで表示できます。この場合、サイズとは、 画像の寸法。他の変数がないことを考慮すると、 500 x 500 ピクセルのコンテナのサイズは 500 ピクセル、 500 ピクセル。たとえば、1, 000 ピクセルの正方形の画像は、 需要の 2 倍になります

ただし、適切な画像サイズの選択には多くの変数、 あらゆる場合に適切な画像サイズを選択するタスクを 複雑です。2010 年に iPhone 4 が発売されたとき、画面解像度は （640x960）は、iPhone 3（320x480）の 2 倍でした。ただし 物理的なサイズには iPhone 4 の画面のサイズは、iPhone 3 とほぼ同じでした。

すべてを高解像度で表示すると、テキストと画像が表示される 半分に縮小されます。代わりに 1 ピクセル 2 デバイス ピクセルになりました。これをデバイス ピクセル比（DPR）と呼びます。「 iPhone 4（およびその後発売された多くの iPhone モデル）の DPR は 2 です。

先ほどの例に戻ります。デバイスの DPR が 2 でイメージが 500 x 500 ピクセルのコンテナに表示された後、1, 000 ピクセルの正方形の画像が （組み込みサイズ）が最適なサイズになりました。同様に デバイスの DPR が 3 の場合、1, 500 ピクセルの正方形の画像が最適なサイズです。

srcset

<img> 要素は srcset 属性をサポートしています。この属性を使用すると、 ブラウザで使用できる画像ソースのリスト。指定した各イメージソース には、画像の URL と、幅またはピクセル密度記述子を含める必要があります。

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

上記の HTML スニペットでは、ピクセル密度記述子を使用して、ブラウザにヒントを与えています。 DPR が 1 のデバイスでは image-500.png を、デバイスでは image-1000.jpg を使用します DPR が 2、DPR が 3 のデバイスでは image-1500.jpg です。

どれも良くないと思えるかもしれませんが、画面の DPR だけではありません。 ページに最適な画像を選択する際の考慮事項ですページの レイアウトも考慮事項の一つです。

sizes

上記の解決策は、同じ CSS ピクセルに画像を表示する場合にのみ機能します。 サイズで表示されます。多くの場合、ページのレイアウトとコンテナの ユーザーのデバイスに応じて変わります。

sizes 属性を使用すると、各ソースサイズのセットを指定できます。 ソースサイズは、メディア条件と値で構成されます。sizes 属性 は、画像の表示サイズを CSS ピクセル単位で指定します。組み合わせた場合 srcset の幅の記述子を使用すると、ブラウザは画像ソースを選択できます。 最適な状態を判断できます

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

上記の HTML スニペットでは、srcset 属性に画像のリストを指定しています。 候補をカンマで区切って指定します。各候補者は このリストは、画像の URL の後に、画像を示す構文が 画像の本質的な幅。画像の本質的サイズは、画像の寸法です。対象 たとえば、1000w という記述子は、画像の本質的な幅が 幅 1,000 ピクセル。

ブラウザはこの情報を使用して sizes のメディア条件を評価します。 属性に指定されています。この場合は、デバイスのビューポートの幅が 768 ピクセルを超える場合、画像は 500 ピクセルの幅で表示されます。小さい デバイスでは、画像は 100vw（ビューポートの完全な幅）で表示されます。

ブラウザはこの情報を srcset 画像のリストと組み合わせます。 最適な画像を見つけますたとえば、ユーザーがモバイル デバイスで 画面幅 320 ピクセル、DPR 3 のデバイスの場合、画像が表示されます。 320 CSS pixels x 3 DPR = 960 device pixels です。この例では、最も近い Pod が サイズの画像は、固有の幅が 1,000 の image-1000.jpg になります。 ピクセル（1000w）。

ファイル形式

ブラウザは、複数の異なる画像ファイル形式をサポートしています。たとえば WebP や AVIF は PNG や JPEG よりも圧縮しやすいため、 ダウンロード時間が短縮されます。サービング 最新の形式の画像を読み込むと、リソースの読み込み時間を短縮できます。 Largest Contentful Paint（LCP）が低減します。

WebP は、すべての最新のブラウザで機能する幅広くサポートされている形式です。WebP 多くの場合、JPEG、PNG、GIF よりも圧縮率が優れており、非可逆性と 可逆圧縮にも使用できます。WebP では、アルファ版のチャンネルの透過性もサポートしています。 非可逆圧縮は JPEG コーデックにはない機能です。

AVIF は比較的新しい画像形式であり、WebP ほど広くはサポートされていませんが、 すべてのブラウザで相応の妥当なサポートを得ている。AVIF は非可逆圧縮と非可逆圧縮の両方に対応しています。 また、テストでは 50% 以上のコスト削減が JPEG と比較する場合がありますAVIF では、広色域（WCG）と ハイ ダイナミック レンジ（HDR）機能。

圧縮

画像に関連する圧縮には、次の 2 種類があります。

1. 非可逆圧縮
2. 可逆圧縮

非可逆圧縮は、量子化によって画像の精度を低下させます。 追加の色情報は、彩度サブサンプリングを使用して破棄される場合があります。 ロッシー圧縮は、ノイズの多い高密度画像で特に効果的です。 通常は類似したコンテンツが含まれる写真や画像です。その理由は、 不可逆圧縮によって生成されたアーティファクトは、 非常に精細な画像で識別できますただし、非可逆圧縮は非可逆圧縮が 線画や同様にくっきりしたディテールなど、鋭利なエッジを含む画像 あります。ロッシー圧縮は JPEG、WebP、AVIF 画像に適用できます。

可逆圧縮は、データのない画像を圧縮してファイルサイズを削減するものです。 損失です。可逆圧縮とは、可逆圧縮と 隣接するピクセルを表します。可逆圧縮は GIF、PNG、WebP、 AVIF 画像形式。

Squoosh、ImageOptim、または画像を使用して画像を圧縮できます 提供しています圧縮する場合、適切な汎用設定がない 自動的に適用されます。推奨されるアプローチは、 画像の品質と信頼性のバランスがとれるまで 表示されます。一部の高度な画像最適化サービスでこの処理を行います 自動的に行われますが、すべてのユーザーが経済的に実現できるとは限りません。

<picture> 要素

<picture> 要素を使用すると、複数のファイルを柔軟に指定できます。 画像候補:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

<picture> 要素内で <source> 要素を使用する場合は、 AVIF 画像と WebP 画像はサポートされますが、互換性のある以前の画像にフォールバックします ブラウザが最新の形式をサポートしていない場合は、この形式を使用する必要があります。この方法では ブラウザは、指定された最初の <source> 要素を選択します。できる場合 その形式で画像をレンダリングすると、その画像が使用されます。それ以外の場合、ブラウザは 次の指定された <source> 要素に移動する。上記の HTML の場合、 AVIF 形式が WebP 形式より優先され、AVIF 形式に AVIF も WebP もサポートされていない場合は JPEG 形式

<picture> 要素内に <img> 要素をネストする必要があります。「 alt、width、height の各属性は <img> で定義され、使用されます。 どの<source>が選択されているかに関係なく

<source> 要素は、media、srcset、sizes もサポートします。 属性です。前述の <img> の例と同様に、これらは 異なるビューポートでどの画像が選択されるかをブラウザから取得します。

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media 属性はメディア条件を使用します。上の例では、 デバイスの DPR がメディア条件として使用されます。DPR が次の値より大きいデバイス 1.5 以上では、最初の <source> 要素が使用されます。<source> 要素 は、ビューポートが 768 ピクセルを超えるデバイスでは、 選択した画像候補が 500 ピクセル幅で表示されます。小型デバイスでは ビューポートの幅全体を使用します。media と srcset を組み合わせる 使用する画像をきめ細かく制御できます。

これを下の表に示します。ここでは、いくつかのビューポートの幅と デバイスのピクセル比は次のように評価されます。

DPR が 1 のデバイスでは、ほとんどのイメージを含む image-500.jpg イメージがダウンロードされます。 （画像を表示する外部サイズ、幅 500 ピクセルのパソコン ユーザー）オン 一方、DPR が 3 のモバイル ユーザーは、より大規模な image-1500.jpg - DPR が 3 のデスクトップ デバイスで使用されるのと同じイメージ。

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

この例では、<picture> 要素を調整し、追加の DPR が高いワイドデバイス用に異なる画像を使用するには、<source> 要素を使用します。

この追加のクエリでは、image-1000-sm.jpg と image-1500-sm.jpg は小さいビューポートに表示されます。この追加情報は 圧縮によるアーティファクトの発生はそれほど多くないため、画像をさらに圧縮できます。 そのサイズと密度で表示できます。また、画質を損なうこともありません。 デスクトップ デバイスでのみ可能です。

また、srcset 属性と media 属性を調整することで、このような状況を回避できます。 小さなビューポートで大きな画像を表示する場合

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

上記の HTML スニペットでは、幅の記述子が削除され、 必要があります。モバイル デバイスに配信される画像には制限があります （DPR が 3 のデバイスでも）/image-500.jpg または /image-1000.jpg です。

複雑さを管理する方法

レスポンシブ画像を使用すると、 サイズ バリエーションと形式も指定できます。上記の例では、バリエーションは が使用されますが、AVIF と WebP は除外されます。トレーニング中に ありますか？多くのエンジニアリングの問題と同様に、答えは「状況次第」である傾向があります。

最適な組み合わせを見つけるために多くのバリエーションを用意したくなるかもしれませんが、 画像のバリエーションが追加されるたびに費用がかかり、 キャッシュに保存されているからです。バリアントが 1 つしかないと、すべてのユーザーが同じ画像を受け取るため、 効率的にキャッシュ保存できます

一方、バリエーションが多い場合は、バリエーションごとに異なる キャッシュ エントリです。外部 IP アドレスを使用すると、サーバーのコストが増加し、パフォーマンスが低下する可能性があります。 バリエーションのキャッシュ エントリが期限切れです。画像を から再度取得する必要があります 配信元サーバーに送信されます

これとは別に、HTML ドキュメントのサイズがバリエーションごとに大きくなります。マイページ 画像ごとに数キロバイトの HTML を 配信することになります

Accept リクエスト ヘッダーに基づいて画像を提供する

Accept HTTP リクエスト ヘッダーは、コンテンツの種類をサーバーに通知します。 ブラウザが認識しますこの情報は、サーバーで HTML レスポンスに余分なバイトを追加せずに最適な画像形式に変更できます。

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

上記の HTML スニペットは、簡単なコード バージョンで、 最適な画像形式を選択して配信します。 リクエストの Accept ヘッダーに image/avif が含まれている場合、AVIF 画像は 表示されます。それ以外の場合で、Accept ヘッダーに image/webp が含まれている場合、WebP 画像は が配信されます。上記のいずれの条件も満たされない場合、JPEG 画像は 表示されます。

Accept リクエスト ヘッダーの内容に基づいてレスポンスを変更できます。 ほぼすべてのタイプのウェブサーバーで実行できます。たとえば、イメージ リクエストを書き換えたり、 mod_rewrite を使用して Accept ヘッダーに基づいて Apache サーバーで実行。

これは、画像コンテンツ配信ネットワークで見られる動作と変わりません。 （CDN）。Image CDN は、画像の最適化と ユーザーのデバイスやブラウザに応じて最適な形式に設定できます。

重要なのは、バランスを取り、妥当な数の画像候補を生成することです。 ユーザーエクスペリエンスへの影響を測定できます画像によって 各画像に適用される最適化は、その画像の ユーザーが使用しているデバイスに応じて 異なるサイズで表示されますたとえば、 フル幅のヒーロー画像には、サムネイル画像よりも多くのバリエーションが e コマース商品リスティングページです

遅延読み込み

検索結果の上部に画像が表示されるときに遅延読み込みを行うよう、 loading 属性を使用してビューポートを作成します。属性値 lazy は、 画像がビューポートに入る（またはその近くになるまで）ダウンロードされなくなります。この ブラウザが必要なリソースを優先できるようにすることで、帯域幅を節約できる ビューポートにある重要なコンテンツをレンダリングします

decoding

decoding 属性は、画像のデコード方法をブラウザに指示します。 async の値は、画像を非同期でデコードできることをブラウザに伝えます。 他のコンテンツのレンダリング時間を短縮できます。値 sync は、 他のコンテンツと同時に表示される必要があるとブラウザに伝える必要があります。 デフォルト値の auto では、ブラウザがページに最適な値を決定できます。 できます。

画像のデモ

理解度テスト

次のトピック: 動画のパフォーマンス

画像はウェブで最も普及しているメディアタイプですが、 パフォーマンスに関して留意すべき点の一つです。動画 ウェブ全体で使用される一般的なタイプのメディアで、独自のメディアが存在します。 パフォーマンスに関する考慮事項をご覧ください。このコースの次のモジュールでは、 動画の最適化と効率的な読み込み方法を学びました。