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

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

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 + 1024 として計算されます。
unoptimized-lossless-images
ロスレス形式では、ピクセルあたりのバイト数が X を超えないようにし、固定の 10 KB のオーバーヘッドを許容します。W x H の画像の場合、ファイルサイズのしきい値は W x H x X + 10240 として計算されます。
unoptimized-lossless-images-strict
ロスレス形式では、固定の 1 KB のオーバーヘッド許容量で、ピクセルあたりのバイト数が X を超えないようにする必要があります。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 については 0.5 以下のバイト/ピクセル比、unoptimized-lossless-imagesunoptimized-lossless-images-strict については 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 のどちらがより直感的で使いやすいのか、あるいは、代わりにオーバーヘッドの許容差を使い分けるべきか、知りたいです。トライアルの終了間際にアンケートをお送りします。どうぞご期待ください。