次世代画像フォーマットAVIFを触ってみた

Posted at 2026-03-29

はじめに

モダンなフロントエンド開発において、画像の軽量化は最も効果的なパフォーマンス改善策の一つです。
近年、JPEGやPNGに代わるフォーマットとして WebP（ウェッピー） が定着し、さらにその先を行く AVIF（アヴィフ） の採用も進んでいます。

この記事では、各フォーマットの仕組みを解説し、実際にSquooshで書き出しを行った実測結果をもとに、それぞれの特性を深掘りします。

まずは、私たちが日々扱っている基本フォーマットの正体をおさらいします。

これら旧来の規格の「良いとこ取り」を目指して生まれたのが、次世代フォーマットです。

WebPとAVIFがこれほど軽い理由は、動画技術から転生した 「予測符号化（Predictive Coding）」 にあります。

「隣のドットがこの色なら、次もこの色だろう」と予測を立て、実際のデータとの「ズレ（差分）」だけを記録する仕組みです。大きな数字を保存する代わりに、0に近い小さな数字だけを扱うため、データ量を劇的に削ることができます。

特に、WebPとAVIFの性能差を整理したのが以下の比較スライドです。

圧倒的な圧縮率: JPEG比で約50%以上の削減が可能。WebPよりもさらに一歩踏み込んだダイエットが可能です。
色の再現性（HDR）: WebPが8-bit階調なのに対し、AVIFは10/12-bitに対応。夕焼け空などの繊細なグラデーションで「トーンジャンプ（色の段差）」が起きません。
シャープな境界線: 最新の動画技術（AV1）の恩恵で、文字やロゴの周りのノイズがWebPよりも抑えられます。

理論上は最強のAVIFですが、実際にSquooshを使い、風景画像（44.9 KBのJPEG）を対象に検証を行いました。

実際に手を動かしてみると、カタログスペックだけでは見えない課題が見えてきました。

エンコード負荷が非常に高い
スライドにもある通り、AVIFのエンコード負荷は「非常に高い」です。設定を最大（Effort 10）にした結果、1枚の書き出しに10秒近くを要しました。これは大量の画像を扱うビルドプロセスや、リアルタイム変換においては無視できないコストです。
WebPとの圧縮率のバランス
今回の風景画像においては、WebPでも同等のクオリティで50%前後の削減が可能でした。作成にかかる「10秒」という時間コストを支払ってまでAVIFにするほどの恩恵が感じられなかったのが正直なところです。

今回の比較と実測から導き出された使い分けの指針です。

WebP（現代の標準）:
爆速で書き出せて、ほぼすべてのブラウザで安定して動く。Web開発における現在の「最適解」であり、デフォルト設定。
AVIF（次世代の覇者）:
「ここぞ」というメインビジュアルや、絶対に劣化させたくないロゴなど、時間をかけてでも極限まで数KBを削り、最高画質を届けたい場所で使う「切り札」。

「新しいからAVIF」ではなく、「その10秒の計算コストを払う価値があるか」を判断することが、現代のフロントエンドエンジニアに求められる視点です。