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 のブラウザ サポートを検出するにはどうすればよいですか？をご覧ください。
最新の各形式のブラウザ サポート状況については、以下をご覧ください。
スタック固有のガイダンス
AMP
すべての amp-img コンポーネントを WebP 形式で表示し、他のブラウザには適切なフォールバックを指定することを検討してください。
Drupal
サイトに WebP 画像形式を利用するモジュールをインストールして構成することを検討してください。このようなモジュールにより、アップロードした画像の WebP バージョンが自動的に生成され、読み込み時間が最適化されます。
Joomla
アップロードした画像を最適な形式に自動的に変換するpluginまたはサービスを使用することを検討してください。
Magento
新しい画像形式を活用するために、Magento Marketplace でさまざまなサードパーティ拡張機能を検索することを検討してください。
iPhone
WebP、AVF 画像、WebM 動画は、iOS 16 より前の iPhone では動作しません。
WordPress
アップロードした画像を最適な形式に自動的に変換するpluginまたはサービスを使用することを検討してください。