最新の形式で画像を配信する

Lighthouse レポートの [最適化案] セクションには、古い画像形式のすべての画像が一覧表示され、それらの画像の AVIF バージョンを配信することで得られる可能性のある節約額が表示されます。

AVIF 形式または WebP 形式で画像を提供する理由

AVIF と WebP は、JPEG や PNG などの古い画像形式と比べて、圧縮率と画質に優れている画像形式です。JPEG や PNG ではなく、これらの形式で画像をエンコードすると、読み込み時間が短縮され、モバイルデータ量も節約できます。

AVIF は Chrome、Firefox、Opera でサポートされており、同じ品質設定で他の形式よりもファイルサイズを小さくできます。AVIF の詳細については、AVIF 画像の配信 Codelab をご覧ください。

WebP は、Chrome、Firefox、Safari、Edge、Opera の最新バージョンでサポートされており、ウェブ上の画像に対してより優れた非可逆圧縮と可逆圧縮を提供します。WebP の詳細については、ウェブ用の新しい画像形式をご覧ください。

Lighthouse で削減可能な費用を算出する方法

Lighthouse は、ページ上の BMP、JPEG、PNG の各画像を収集し、それぞれを WebP に変換して AVIF のファイルサイズを推定し、変換後の数値に基づいて節約できる可能性をレポートします。

ブラウザの互換性

WebP は、Chrome、Firefox、Safari、Edge、Opera の最新バージョンでサポートされていますが、AVIF のサポートはより限定的です。古いブラウザに対応させるには、代替として PNG または JPEG の画像を配信する必要があります。フォールバック手法の概要については、ブラウザの WebP サポートを検出するにはどうすればよいですか？をご覧ください。画像形式のブラウザ サポートについては、以下のリストをご覧ください。

各最新フォーマットの現在のブラウザ サポート状況については、以下のエントリをご覧ください。

• AVIF
• WebP

スタック固有のガイダンス

AMP

すべての amp-img コンポーネントを WebP 形式で表示し、他のブラウザには適切な代替画像を表示することを検討してください。

Drupal

サイトで WebP 画像形式を活用するためのモジュールをインストールして設定することをご検討ください。このようなモジュールにより、アップロードした画像の WebP バージョンが自動的に生成され、読み込み時間が最適化されます。

Joomla

アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。

Magento

より新しい画像形式を活用するには、Magento Marketplace にさまざまな第三者の拡張機能がありますので、検索してみてください。

iPhone

webp、avif 画像、webm 動画は、iOS 16 未満の iPhone では動作しません。

WordPress

アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。

リソース

• 最新の形式で画像を提供する監査のソースコード
• WebP 画像を使用する