最新の画像形式の使用：ベンチマークと改善方法

重要である理由

WebPとAVIFは通常、同程度の画質のJPEGやPNGよりもサイズが大幅に小さく、画像はページ内で最もデータ量が大きい部分であることがよくあります。

画像CDNを使用するか、ビルド時に両方の形式を生成して、JPEGまたはPNGをフォールバックとして用意したうえでWebPまたはAVIFを配信してください。

画像が3枚以上あるホームページで、一部の画像がWebPまたはAVIFを使用しています（ファイルタイプ、source要素のtype、または画像CDNの形式パラメーターに基づく）。

確認済み：WebPまたはAVIFの画像が検出されました。

未確認：WebPまたはAVIFの画像は検出されませんでした。

制約：自動化されたクライアントに配信されたホームページのHTMLに基づいています。後から動作するスクリプトは実行していません。

WordPress：WordPressは5.8以降、WebPのアップロードに対応し、6.5以降、AVIFにも対応しています。画像プラグインまたはホスティングサービスで既存の画像を変換できます。
Next.js：next/imageコンポーネントは、最適化された形式を自動的に配信します。
Nuxt：Nuxt ImageはWebPとAVIFを出力できます。
Cloudflare：Cloudflare Polishは画像をWebPに変換できます。
Vercel：Vercel Image Optimizationは最新の形式を配信します。
Shopify：Shopifyの画像CDNは最新の形式を配信できます。テーマについては、Shopifyのウェブパフォーマンスに関するガイダンスに従ってください。