AVIF vs JPEG
どちらも写真を保存できますが、トレードオフが異なります。実際の違いと、選び方をまとめました。
Short answer
見た目の画質を揃えると、AVIF は JPEG のおよそ半分の容量になります。今のウェブサイトで得られる単発の削減としては最大で、代償はエンコード時間と、古い Safari 向けのフォールバックです。
Why this comes up
JPEG の圧縮方式は 1992 年に固まりました。AVIF は 2018 年の動画コーデック AV1 から派生したもので、作ったのは莫大な帯域費用を払っている企業です。両者のあいだには三十年の研究があり、この種の比較には珍しく、新しいほうの優位はわずかではありません。おおよそ二倍です。したがって面白い問いは「AVIF のほうが良いか」ではなく「導入にいくらかかるか」です。
項目別の比較
| 項目 | AVIF | JPEG |
|---|---|---|
| 圧縮方式 | 非可逆 | 非可逆 |
| 透過 | 対応 | 非対応 |
| 一般的なファイルサイズ | 同等の JPEG のおよそ 40-55% | 同等の JPEG のおよそ 100% |
| 互換性 | 現行の全ブラウザが対応。一部の古いデスクトップアプリは未対応 | 数十年前のソフトも含め、どこでも開けます |
| 主な入手元 | ページ容量を最適化しているウェブサイト | デジタルカメラや写真共有 |
What actually differs
容量差は本物で、それこそが要点
見た目の画質を揃えた場合、AVIF はたいてい JPEG の 40〜55% に収まります。写真を 2MB 抱えたギャラリーページなら、1MB 戻ってきます。たいていの形式の乗り換えと違って、割に合ったかどうかを数字とにらめっこして探す必要はありません。遅い回線での読み込み時間にそのまま出ます。
グラデーションで JPEG は目に見えて崩れ、AVIF は崩れない
JPEG の 8×8 ブロック変換は、なめらかなグラデーションに縞（バンディング）を出します。晴れた空、スタジオの背景紙、暗いシーンなどです。よくある対処は画質を上げることですが、それでは容量の利点が消えます。AVIF の変換は、はるかに低いビットレートでも広いなめらかな面を縞なしで扱えます。無地背景の商品写真や、空が大きく写る画像が中心なら、この差は容量よりも目に見えます。
エンコードは作業手順を変えるほど遅い
AVIF のエンコードは JPEG より一桁多い CPU を食います。ブラウザー上のツールなら、大きな画像で目に見えて待たされます。ビルドパイプラインなら、画像の工程が秒から分になり、変更されたファイルだけ処理するキャッシュが欲しくなります。デコードは速いので、これは作る側のコストであって、訪問者のコストではありません。
Which to use
Use AVIF for
フォールバックを用意したうえでのウェブ配信。とくに写真の多いページでは、画像の重さを半分にするのが得られる中で最大の効果です。
Use JPEG for
他人に渡すファイル、問答無用で開けなければならないもの、そしてエンコード時間が十倍になるのを吸収できないパイプライン。
One thing that catches people out
既存の JPEG を変換しても、削減幅は丸ごとは得られない
JPEG を AVIF に再エンコードする作業は、すでに非可逆圧縮を通ったデータ、つまりノイズごと引き継いだデータから始まります。ファイルは小さくなりますが、AVIF はもとの細部ではなく JPEG のブロックノイズを保つためにビットを使うことになります。きれいな削減は、可逆のマスターから AVIF を作ったときに出ます。手元に JPEG しかないなら変換して構いません。ただし結果はベンチマークの数字にはならないと知っておいてください。