3つの形式、1つの問い。見た目を保ちつつ、どこでも開ける最小のファイルをくれるのはどれか。純粋な圧縮率での正直な順位はAVIF > WebP > JPEGです。しかし「最小」がすべてではありませんし、AVIFには多くの比較記事が飛ばす実用上の落とし穴があります。きちんと見ていきましょう。

手早い比較

AVIF対WebP対JPEG — どれを使うべき? — visual 1
手早い比較
JPEG WebP AVIF
登場年 1992 2010 2019
圧縮率 基準 JPEGより約25〜35%小さい JPEGより約50%小さい
透過(アルファ) なし あり あり
アニメーション なし あり あり
色深度 8ビット 8ビット 最大12ビット、HDR
ブラウザ対応 全対応 全対応 非常に良好、わずかに遅れ
エンコード速度 速い 速い 遅い

紙の上ではAVIFがほぼすべての行で勝ちます。最も強く圧縮し、透過とHDRに対応し、小さいファイルサイズでも見事にきれいです。WebPは心地よく中間に位置します。JPEGより小さく、全対応で、面倒がありません。JPEGは古き頼れる存在で、透過もアニメーションもできませんが、地球上のあらゆる端末・アプリ・メールソフトが読めます。

誰も触れないAVIFの落とし穴

AVIF対WebP対JPEG — どれを使うべき? — visual 2
誰も触れないAVIFの落とし穴

AVIFを軸に計画を立てる前に知っておくべき部分です。ブラウザはAVIFをデコードできますが、キャンバスから安定してエンコードすることはできません。 ウェブに組み込みの画像書き出し経路(canvas.toBlob)は、信頼できる形でブラウザ横断的にAVIFを生成してくれません。AVIFを上手にエンコードするには、ブラウザのキャンバスAPIが公開していない重い計算が必要です。

これが実際に意味するのは、純粋なブラウザ内ツールはAVIFを表示できても安定して作成できない、ということです。ですからブラウザベースのコンバーターでAVIFを書き出し先に選んだとき、賢明な挙動はWebPにフォールバックすることで、ここではまさにそうなります。それでも現代的でよく圧縮されたファイル(JPEGやPNGより小さい)が手に入り、あらゆるブラウザで開け、訪問者が開けないかもしれない形式にはなりません。正直な取引です。AVIFの最後の一切れの圧縮を失う代わりに、全対応と即時変換を保ちます。

本物のAVIFファイルがどうしても必要なら、サーバー側のエンコーダーかネイティブのデスクトップツールを使いましょう。ほとんどのウェブ用途では、WebPがエンコードの頭痛なしに利点の90%をくれます。

実際にどれを選ぶべきか

  • ウェブサイトに写真を掲載し、信頼できる最小のファイルが欲しい? WebPです。全対応、JPEGより大幅に節約、今日ブラウザツールから使えます。
  • 最大限の圧縮が必要で、パイプライン全体(サーバー側)を握っている? AVIFです。ブラウザではなくサーバー側でエンコード。
  • メール、印刷、古いソフトへ渡す? JPEGです。退屈ですが、いつでも動きます。
  • 透過が必要? WebPかAVIF。JPEGは決して不可。

ブラウザで変換する

画像コンバーターはCanvasを使って完全にお使いの端末で動きます。何もアップロードされず、登録もなく、初回アクセスのあとオフラインで動きます。PNG・JPG・WebPをまとめて相互変換できます。AVIFを選ぶと、上記の理由から透過的にWebPへフォールバックします。いずれにせよ小さく、どこでも読めるファイルが手に入ります。

短くまとめると

ウェブに掲載する多くの方にとって、WebPがちょうどいい落としどころです。JPEGより劇的に小さく、透過に対応し、ブラウザ内ツールを含めどこでも動きます。AVIFは技術的には圧縮の王者ですが、本物のAVIFエンコードはブラウザではなくサーバーの領分です。そしてJPEGは、最大の効率より最大の互換性が勝るときにいつでも戻れる形式であり続けます。