最適化された画像ポリシーを使用して、サイトで最もパフォーマンスの高い画像が使用されるようにします。
多くの場合、画像はかなり多くの表示スペースを占め、ウェブサイトでダウンロードされるバイト数の大部分を占めています。画像を最適化すると、読み込みパフォーマンスが向上し、ネットワーク トラフィックが減少します。
驚くべきことに、ウェブの半数以上で、圧縮が不十分な画像や不必要に大きい画像が表示されています。これにより、単に画像を最適化するだけでパフォーマンスを改善する余地が大いに残ります。
「画像が最適化されているかどうかを知るにはどうすればよいか？また、最適化するにはどうすればよいか？」という疑問が湧くかもしれません。Google では、画像の最適化に関する新しい機能ポリシー oversized-images、unoptimized-lossy-images、unoptimized-lossless-images、unoptimized-lossless-images-strict をテストしています。すべてオリジン トライアルでご利用いただけるようになりました。
最適化されたイメージのポリシー
権限ポリシーでは、開発時に適用する際に適用できる新しい制限がイメージに導入されます。制限に違反する画像はプレースホルダ画像としてレンダリングされるため、簡単に特定して修正できます。これらのポリシーはレポート専用モードで指定できます。このモードでは、ルールは適用されずに通常どおり表示されますが、レポートで違反が確認されます。（詳細については、下記の実際のレポート専用モードをご覧ください）。
特大の画像
oversized-images 権限ポリシーは、コンテナサイズに関連するイメージの固有のサイズを制限します。
ドキュメントで oversized-images ポリシーを使用すると、いずれかの次元の固有の解像度がコンテナサイズの X 倍を超える <img> 要素は、プレースホルダ画像に置き換えられます。
なぜでしょうか？
表示デバイスでレンダリングできる画像よりも大きな画像を配信する（たとえば、モバイル コンテキストにデスクトップ画像を表示する、低ピクセル密度デバイスに高ピクセル密度画像を配信するなど）と、ネットワーク トラフィックとデバイスメモリが浪費されます。画像の最適化については、正しいサイズの画像を配信するとレスポンシブな画像を配信するをご覧ください。
例
いくつか例を挙げて説明します。以下は、画像の表示サイズを半分に縮小するときのデフォルトの動作です。
次の権限ポリシーを適用すると、代わりにプレースホルダ画像が表示されます。
Permissions-Policy: oversized-images *(2);
幅または高さのみを低くしても、同様の結果が得られます。
使用方法
まとめると、oversized-images ポリシーは次のいずれかで指定できます。
Permissions-PolicyHTTP ヘッダー<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> 要素は通常どおりレンダリングされます。
最適化されていない {lossy,lossless} の画像
unoptimized-lossy-images、unoptimized-lossless-images、unoptimized-lossless-images-strict 機能ポリシーは、画像のファイルサイズを本来の解像度に応じて制限します。
unoptimized-lossy-images- 非可逆形式の場合は、ピクセルあたりのバイト比を X にして、固定の 1 KB のオーバーヘッドを許容してください。幅 x 高さの画像の場合、ファイルサイズのしきい値は W x H x X + 1, 024 として計算されます。
unoptimized-lossless-images- 可逆形式は、ピクセルあたりのバイト比を X に抑え、固定の 10 KB のオーバーヘッドを許容する必要があります。幅 x 高さの画像の場合、ファイルサイズのしきい値は W x H x X + 10, 240 として計算されます。
unoptimized-lossless-images-strict- 可逆形式は、ピクセルあたりのバイト比を X に抑え、固定の 1 KB のオーバーヘッドを許容する必要があります。幅 x 高さの画像の場合、ファイルサイズのしきい値は W x H x X + 1, 024 として計算されます。
ドキュメントでこれらのポリシーのいずれかを使用すると、制約に違反する <img> 要素はプレースホルダ画像に置き換えられます。
なぜでしょうか？
ダウンロード サイズが大きいほど、画像の読み込みに時間がかかります。メタデータの除去、適切な画像形式の選択、画像圧縮の使用など、画像を最適化するときは、ファイルサイズをできる限り小さくする必要があります。画像の最適化については、Imagemin を使用して画像を圧縮すると WebP 画像を使用するをご覧ください。
例
以下に、ブラウザのデフォルトの動作を示します。権限ポリシーがないと、最適化されていない非可逆画像が、最適化された画像と同じように表示される可能性があります。
次の権限ポリシーを適用すると、代わりにプレースホルダ画像が表示されます。
Permissions-Policy: unoptimized-lossy-images *(0.5);
使用方法
権限ポリシーを初めて使用する場合は、権限ポリシーの概要で詳細をご覧ください。
まとめると、unoptimized-{lossy,lossless}-images ポリシーは、次のいずれかの方法で指定できます。
Permissions-PolicyHTTP ヘッダー<iframe>allow属性
unoptimized-{lossy,lossless}-images ポリシーを宣言するには、以下を提供する必要があります。
- 特徴名。例:
unoptimized-lossy-images（必須） - オリジンのリスト（省略可）
- かっこ内で指定された、オリジンのしきい値（ピクセルあたりのバイト数の比率 X）（省略可）
unoptimized-lossy-images の場合はピクセルあたりのバイト数比を 0.5 以下にし、unoptimized-lossless-images と unoptimized-lossless-images-strict の場合はピクセルあたりのバイト数の比率を 1 以下にすることをおすすめします。
WebP 形式の圧縮率は他の形式よりも優れています。可能であれば、すべての画像を WebP 非可逆形式で提供します。それで十分でない場合は、WebP ロスレス形式を試してください。WebP 形式をサポートしていないブラウザで JPEG を使用します。どの形式も機能しない場合は PNG を使用します。
WebP 形式を使用している場合は、しきい値を厳しく設定してみてください。
- 0.2（WEBPV8 の場合）
- 0.5（WEBPL）
その他の例
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-images または unoptimized-lossless-images-strict の方が直感的で使いやすいのか、それとも差のオーバーヘッド許容値を使用するべきなのか、お知らせいただければ幸いです。トライアルの終了が近づきましたら、
アンケートをお送りいたします。どうぞご期待ください。