WebPをAVIFに変換 — Core Web Vitalsを改善
WebPをAVIFに変換：表示速度のための最後の数十キロバイト
ここに来る人が興味本位であることはまずありません。たいていは具体的な指摘を受けています。PageSpeed Insightsが「次世代フォーマットでの配信」を求め、Largest Contentful Paintが2.5秒を超え、画像はすでにWebPになっている。次の段階がAVIFです。
移行で得られるもの
AVIFはAV1という動画圧縮技術に由来し、WebPよりかなり進んだ方式で動作します。実際には、体感画質が同じままで容量をさらに20〜30%削減できます。
一ページだけ見ると小さく思えます。しかし各180KBの画像を十五点並べたトップページなら約800KBの削減で、モバイル回線では容易に0.5秒に相当します。Largest Contentful Paintが基準値を下回るかどうかは、まさにこの幅で決まります。
AVIFが特に強いのは、なめらかな階調を持つ大きな画像です。メインビジュアル、背景、風景など。小さなアイコンや色数の少ない図版では効果が乏しく、手間に見合いません。
踏まえておくこと
対応状況は良好ですが完全ではありません。 最新のブラウザはすべてAVIFを表示しますが、何年も更新されていない端末では表示できません。実務ではWebPをフォールバックに指定したpicture要素が安全です。そうすれば各利用者の端末が理解できる最良の形式が届きます。
エンコードには時間がかかります。 AVIFは計算量が多く、大きな画像ではブラウザ内で数秒かかることがあります。これは変換時の一度だけで、配信時には関係ありません。
二度目の圧縮がかかります。 WebPはすでに非可逆でした。圧縮前の元データがあるなら、そこから直接変換するほうが技術的にはきれいです。
画像は手元から出ません
未公開のキャンペーン素材や発売前の商品写真を外部サーバーに置く必要はありません。ImageXpoはWebAssemblyでAVIFのエンコードを端末上で完結させます。大量のバッチでも同じです。
よくある質問
すべてのブラウザでAVIFは表示されますか。
Chrome、Firefox、Safari、Edgeの最新版はすべて表示します。何年も更新されていない古い端末では表示されません。本番ではWebPをフォールバックにしたpicture要素をおすすめします。
変換に時間がかかるのはなぜですか。
AV1圧縮は計算量が多く、ここではご自身のプロセッサで実行されるためです。負荷がかかるのは一度だけで、訪問者はその後ずっと軽いファイルの恩恵を受けます。
小さなアイコンでも効果はありますか。
ほとんどありません。色数が少なく面積の小さい図版では差はわずかです。効果が最も大きいのは、なめらかな階調を持つ大きな写真です。
二度目の圧縮で画質は落ちますか。
WebPがすでに非可逆だったため、わずかには落ちます。高画質設定なら知覚できません。圧縮前の元データがあるなら、そこから直接変換するほうが確実です。