WebP vs AVIF

AVIF はさらに軽く、WebP は書き出しが速くて古い機械でも動きます。

WebPが向いている場面

大量の画像を手早く片づけたい、あるいは古いブラウザーも面倒を見るなら WebP。

AVIFが向いている場面

容量が問題で、書き出しの時間は気にしないなら AVIF。写真では WebP よりさらに 2〜3 割下がるのが普通です。

見落とされがちなところ

AVIF の書き出しには WebP の何倍も時間がかかります。1 枚ならほとんど気づきませんが、1000 枚になると相当こたえます。

WebPからAVIFに乗り換えるとき

残るもの

失われるものはありません。WebP も AVIF も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。WebP も AVIF もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

EXIF データ、XMP データ、ICC プロファイルは引き継げます。WebP にも AVIF にも、それを収める場所があります。

アニメーションは保たれます。WebP も AVIF も複数フレームを持てるので、結果も動いたままです。

結果を開く

AVIF は最近のブラウザーなら読めますが、古いものでは読めません。その点では、2 つのうち通用する場所が狭いのはこちらです。送る前に、受け取る側がこれを受け付けるかどうか確かめてください。

AVIF は単一の形式ではなく、容れ物です。実際に再生されるのは中に入っているコーデックで、たいていはAV1です。同じ拡張子の 2 つのファイルが同じ機械で違う振る舞いをするのは、そのためです。

GIMPとSquooshは WebP と AVIF のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

WebP は Google の形式です（2010 年に登場）。 記録は 1 チャンネルあたり 8 ビットです。

AVIF は Alliance for Open Media の形式で、2019 年から使われています。規定は AV1 Image File Format です。GIMP、Squoosh、ImageMagickがこの形式を読めます。

AVIFからWebPに戻すとき

失われるもの

AVIF は 1 チャンネルあたり 12 ビットまで扱え、WebP に残るのは 8 ビットです。この余裕こそが、思い切った補正をかけてもトーンジャンプを出さずに耐えるぶんです。ですから変換は編集のあとに行ってください。先ではありません。

残るもの

失われるものはありません。AVIF も WebP も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。AVIF も WebP もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

EXIF データ、XMP データ、ICC プロファイルは引き継げます。AVIF にも WebP にも、それを収める場所があります。

アニメーションは保たれます。AVIF も WebP も複数フレームを持てるので、結果も動いたままです。

結果を開く

WebP は今のブラウザーならどれでも開けます。AVIF はそこまでも届きません。ファイルがウェブページや申込フォームへ向かうのであれば、たいていはそれがこの変換の理由のすべてです。

GIMPとSquooshは AVIF と WebP のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

AVIF は Alliance for Open Media の形式です（2019 年に登場）。 記録は 1 チャンネルあたり 12 ビットです。

WebP は Google の形式で、2010 年から使われています。規定は RFC 9649 です。Adobe Photoshop、GIMP、Squooshがこの形式を読めます。

WebPからAVIFへの変換で実際に起きること

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP.

WebP14 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as AVIF.

AVIF17 KB20% 大きい

なだらかな階調、やわらかい輪郭、粒状感のある写真です。AVIFが想定している、あるいは想定していない典型例で、数値がどちらなのかを示します。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as WebP.

WebP4 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as AVIF.

AVIF3 KB21% 小さい

背景が透明で、図形にグラデーションがかかっています。AVIFは両方を保持するか、片方だけ保持するか、透明部分を単色で塗りつぶすかのいずれかです。ここが見落とされがちな差です。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP.

WebP11 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as AVIF.

AVIF5 KB2.1 分の 1

インターフェース、グラフ、ロゴのような、平坦な色と硬い輪郭です。上の写真とは挙動がまったく違い、答えが「ファイルの中身による」になる理由でもあります。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。

並べて比べる

WebPとAVIFを項目ごとに比較 — 何を保持し、その代償は何か。
WebPAVIF
Full nameWebP ImageAV1 Image File Format
拡張子.webp.avif
メディアタイプimage/webpimage/avif
圧縮方式設定によってどちらにもなる設定によってどちらにもなる
当サイトで書き出せるかはいはい

決まりましたか。ここで変換できます

これらのフォーマットについて

この数値の出典

このページがWebP and AVIFについて述べていることは検証できます。根拠となる資料は次のとおりです。