読み込み時間の短縮などを実現するための画像ポリシー

最適化された画像ポリシーを使用して、サイトにパフォーマンスの高い画像が使用されるようにします。

Luna Lu
Luna Lu

画像は、表示スペースのかなりの部分を占有し、ウェブサイトのダウンロード容量の大半を占めることがよくあります。画像を最適化すると、読み込みパフォーマンスが向上し、ネットワーク トラフィックが削減されます。

驚くべきことに、ウェブ上のサイトの半分以上で、圧縮が不十分な画像や不必要に大きな画像が配信されています。そのため、画像を最適化するだけでパフォーマンスを大幅に改善できます。

画像が最適化されているかどうか、また最適化するにはどうすればよいか、疑問に思うかもしれません。Google では、画像の最適化のための新しい一連の特徴ポリシー(oversized-imagesunoptimized-lossy-imagesunoptimized-lossless-imagesunoptimized-lossless-images-strict)をテストしています。これらはすべて、送信元トライアルで利用できるようになります。

権限ポリシーでは、開発時の適用で適用できるイメージに対する新しい制限セットが導入されています。制限事項に違反している画像は、プレースホルダ画像としてレンダリングされます。この画像は簡単に特定して修正できます。これらのポリシーは、report-only モードで指定できます。このモードでは、違反はレポートで確認されるものの、適用なしで画像が通常どおりレンダリングされます。(詳しくは、下記のレポート専用モードの一般提供をご覧ください)。

oversized-images

oversized-images 権限ポリシーは、コンテナのサイズに関連して画像の固有の寸法を制限します。

ドキュメントで oversized-images ポリシーを使用する場合、いずれかのディメンションでコンテナサイズの X 倍を超える固有の解像度を持つ <img> 要素は、プレースホルダ画像に置き換えられます。

理由

表示デバイスがレンダリングできるサイズよりも大きい画像を提供する(モバイル コンテキストにパソコンの画像を提供する、低ピクセル密度のデバイスに高ピクセル密度の画像を提供するなど)と、ネットワーク トラフィックとデバイスのメモリが浪費されます。画像の最適化については、正しい寸法の画像を配信するレスポンシブ画像を配信するをご覧ください。

以下に例を示します。次の図は、画像の表示サイズを半分にカットした場合のデフォルトの動作を示しています。

デフォルトのサイズ変更動作。
デフォルトのサイズ変更動作。

次の権限ポリシーを適用すると、代わりにプレースホルダ画像が表示されます。

Permissions-Policy: oversized-images *(2);

イメージがコンテナに対して大きすぎる場合。
イメージがコンテナに対して大きすぎる場合。

幅または高さのみを小さくした場合も、同様の結果になります。

サイズ変更後の幅 サイズ変更後の高さ
幅と高さを変更します。

使用方法

要約すると、oversized-images ポリシーは次のいずれかを使用して指定できます。

  • Permissions-Policy HTTP ヘッダー
  • <iframe> allow 属性

oversized-images ポリシーを宣言するには、次の情報を指定する必要があります。

  • 特徴名 oversized-images(必須)
  • 送信元のリスト(省略可)
  • オリジンのしきい値(ダウンスケーリング比率 X)(かっこで指定)(省略可)

ダウンスケーリング比率は 2.0 以下にすることをおすすめします。さまざまな画面サイズや解像度で画像を最適に配信するには、異なる解像度のレスポンシブ画像の使用を検討してください。

その他の例

Permissions-Policy: oversized-images *(2.0)

このポリシーは、しきい値が 2.0 のすべてのオリジンに適用されます。ダウンスケーリング比が 2.0 を超える画像を含む <img> 要素は使用できず、プレースホルダ画像に置き換えられます。

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

このポリシーは、しきい値が 1.5 のサイトのオリジンに適用されます。トップレベルのブラウジング コンテキストと同じオリジンのネストされたブラウジング コンテキスト内の <img> 要素は、ダウンスケーリング比率が 1.5 以下の場合のみ、正常にレンダリングされます。他の場所の <img> 要素は通常どおりレンダリングされます。

unoptimized-{lossy,lossless}-images

unoptimized-lossy-imagesunoptimized-lossless-imagesunoptimized-lossless-images-strict の特徴ポリシーは、画像のファイルサイズをその固有の解像度に関連して制限します。

unoptimized-lossy-images
非可逆形式では、ピクセルあたりのバイト数が X を超えないようにし、固定の 1 KB のオーバーヘッドを許容します。W x H の画像の場合、ファイルサイズのしきい値は W x H x X + 1, 024 として計算されます。
unoptimized-lossless-images
ロスレス形式では、ピクセルあたりのバイト数が X を超えないようにし、固定の 10 KB のオーバーヘッドを許容します。W x H の画像の場合、ファイルサイズのしきい値は W x H x X + 10240 として計算されます。
unoptimized-lossless-images-strict
ロスレス形式では、ピクセルあたりのバイトの比率が X を超えないようにし、固定の 1 KB のオーバーヘッドを許容します。W x H の画像の場合、ファイルサイズのしきい値は W x H x X + 1, 024 として計算されます。

ドキュメントでこれらのポリシーのいずれかを使用すると、制約に違反する <img> 要素はプレースホルダ画像に置き換えられます。

理由

ダウンロード サイズが大きいほど、画像の読み込みに時間がかかります。画像を最適化する際は、メタデータの削除、適切な画像形式の選択、画像圧縮の使用などにより、ファイルサイズをできるだけ小さくする必要があります。画像の最適化については、Imagemin を使用して画像を圧縮するWebP 画像を使用するをご覧ください。

次の図は、デフォルトのブラウザの動作を示しています。権限ポリシーがないと、非圧縮の非可逆圧縮画像が、最適化された画像と同じように表示されます。

最適化された画像と最適化されていない画像を比較する。
最適化された画像と最適化されていない画像の比較。

次の権限ポリシーを適用すると、代わりにプレースホルダ画像が表示されます。

Permissions-Policy: unoptimized-lossy-images *(0.5);

画像が最適化されていない場合。
画像が最適化されていない場合。

使用方法

権限ポリシーを初めて使用する場合は、権限ポリシーの概要で詳細を確認してください。

要約すると、unoptimized-{lossy,lossless}-images ポリシーは次のいずれかを使用して指定できます。

  • Permissions-Policy HTTP ヘッダー
  • <iframe> allow 属性

unoptimized-{lossy,lossless}-images ポリシーを宣言するには、次の情報が必要です。

  • 特徴名(例: unoptimized-lossy-images)(必須)
  • 送信元のリスト(省略可)
  • オリジンのしきい値(ピクセルあたりのバイト数 X)(かっこで指定)(省略可)

unoptimized-lossy-images の場合は 1 ピクセルあたりのバイト数が 0.5 以下、unoptimized-lossless-imagesunoptimized-lossless-images-strict の場合は 1 ピクセルあたりのバイト数が 1 以下をおすすめします。

WebP 形式は、他の形式よりも圧縮率が高いのが特徴です。可能であれば、すべての画像を WebP 非可逆形式で配信します。それでも不十分な場合は、WebP ロスレス形式を試してください。WebP 形式をサポートしていないブラウザでは JPEG を使用します。これらの形式がいずれも機能しない場合は、PNG を使用します。

WebP 形式を使用している場合は、より厳しいしきい値を試してください。

  • WEBPV8 の場合: 0.2
  • WEBPL の場合は 0.5

その他の例

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

このポリシーは、しきい値が 0.5(非可逆形式の場合)または 1(可逆形式の場合)のすべてのオリジンに適用されます。画像のピクセルあたりのバイト数が制約を超える <img> 要素は使用できず、プレースホルダ画像に置き換えられます。

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

このポリシーは、サイトのオリジンに適用され、しきい値は 0.3(非可逆圧縮形式の場合)と 0.8(可逆圧縮形式の場合)です。トップレベルのブラウジング コンテキストと同じオリジンのネストされたブラウジング コンテキストの <img> 要素は、ピクセルあたりのバイト数がこれらの制約を満たしている場合にのみ、正常にレンダリングされます。他の場所の <img> 要素は通常どおりレンダリングされます。

レポート専用モードの一般提供

プレースホルダの画像を使用してサイトを公開することは、望ましい結果にならない可能性があります。開発とステージングでは適用モード(最適化されていない画像がプレースホルダ画像としてレンダリングされる)でポリシーを使用し、本番環境ではレポート専用モードを使用できます。(詳しくは、権限に関するポリシーの報告をご覧ください)。Permissions-Policy HTTP ヘッダーと同様に、Permissions-Policy-Report-Only ヘッダーを使用すると、違反レポートを適用せずに確認できます。

制限事項

画像ポリシーは HTML 画像要素(<img><source> など)でのみ機能し、背景画像や生成コンテンツではまだサポートされていません。より幅広いコンテンツでポリシーをサポートすることをご希望の場合は、お知らせください。

画像の最適化

画像の最適化についてかなりお話ししましたが、その方法についてはまだ説明していません。このトピックはこの記事の範囲外ですが、以下のリンクと記事の最後に記載されている Codelab で詳細を確認できます。

フィードバックをお寄せください

この記事が、イメージ ポリシーについて理解を深め、興味を持っていただければ幸いです。ぜひポリシーをお試しいただき、フィードバックをお寄せください。

この記事で説明した各機能についてフィードバックがある場合は、メーリング リスト feature-control@chromium.org までお寄せください。

どのしきい値が役に立ったか、お知らせください。unoptimized-lossless-imagesunoptimized-lossless-images-strict のどちらが直感的で使いやすいか、または差額の管理費手当を使用するべきか、ご意見をお聞かせください。トライアルの終了間際にアンケートをお送りします。どうぞご期待ください。