AVIFはいつ使う? 同じ画質にそろえてWebP・JPGと比べました

作成 · 更新 · 運営者(個人)

AVIFは小さくなると聞いて変えてみたいけれど、本当にそれだけ得なのか気になりませんか。結論から言うと、写真の内容によって差が大きく違いました。なめらかな写真ではAVIFがJPGの4分の1の容量でしたが、葉の多い写真ではWebPとほとんど変わりませんでした。送り先がAVIFを受け付けるときだけ使い、そうでなければJPGかWebPにしておくのが安全です。

同じ画質はどうそろえた?

画質の数字の意味は形式ごとに違うので、85同士で比べても公平ではありません。そこで2400×1600の写真を2枚自作し、まずJPG 85%で保存した結果が元とどれだけ似ているかをSSIMで測りました。SSIMは、明るさの構造が元とどれだけ似ているかを0〜1で表す値です。

次に、ミルキットの実際の処理でWebPとAVIFを画質30から95まで5刻みで保存し、基準に近い所は1刻みで細かく保存しました。各形式で、JPG 85%と同じかそれ以上のSSIMになったファイルのうち、一番小さいものを選びました。

葉の多い写真の結果

草むらのように細かい模様が多い写真では、JPG 85%が424.0KBでした。同じSSIMになった一番小さいWebPは画質79%で314.8KB、AVIFは画質62%で299.5KBです。JPGより、WebPは約26%、AVIFは約29%小さくなりました。

AVIFが一番小さかったものの、WebPとの差は15.3KB、約5%にとどまりました。拡大画像でも、3つの葉の模様はほとんど見分けがつきません。このような写真なら、より広く開けるWebPでも得の大部分を受け取れます。

なめらかな写真では差が大きく

肌のように色がやわらかく変わる人物風の写真では、結果が違いました。JPG 85%が40.4KB、同じSSIMのWebPは画質80%で19.7KB、AVIFは画質49%で9.6KBです。AVIFはJPGの約24%、WebPの半分の容量でした。

AVIFは、広くなめらかな面を少ないデータで表すのが得意です。空や壁、人物写真の背景のように細かい模様が少ない写真が多い場面では、AVIFの利点がはっきりしました。

保存にかかる時間は?

同じ設定で3回保存した中央値です。葉の多い写真はJPG 0.7秒、WebP 1.0秒、AVIF 0.9秒、なめらかな写真はJPG 0.4秒、WebP 0.5秒、AVIF 0.7秒でした。ミルキットのAVIFは速い設定で保存するので、1枚1秒以内でした。

ただし、AVIFを初めて使うときは処理用ファイル(約15MB)を一度受信します。上の時間には、この受信時間は含まれていません。受信したファイルはブラウザーに残るので、次回からはすぐ始まります。

互換性を先に確認しましょう

AVIFは比較的新しい形式なので、受け取る側が対応していないと、アップロードを断られたり画像が表示されなかったりします。書類の提出、古いアプリ、一部の通販サイトの商品登録のように受け付ける形式が決まっている所では、案内にAVIFと書かれているときだけ使ってください。ミルキットの対応形式の表にも、AVIFは最初の1枚のみ、通常の画質で保存と書かれています。

メッセンジャーやメールで送る写真にも注意が必要です。相手のスマホやアプリがAVIFを開けないと、添付ファイルがアイコンだけで表示されることがあります。誰がどんな機器で見るか分からないなら、JPGが一番無難です。

自分のWebサイトのように形式を自分で選べる所なら、AVIFを試す価値があります。それでも元の写真はJPGかPNGで別に残しておくと、あとで他の場所に使うときに便利です。

容量の上限があるとき、ミルキットが代わりに測ることも

「画像を圧縮」でJPGやPNGのまま「目標以下に合わせる」を使うと、結果が元とかなり違ってしまう場合、ミルキットは同じ目標でWebPを実際に保存してみます。差がもっと大きければAVIFも試します。その中に明らかに元に近いファイルがあれば、「候補 · 実際」で始まる案内と一緒に実際の容量を表示します。

この案内は押したときだけ適用されます。形式を勝手に変えることはないので、送り先がその形式を受け付けるか確かめてから選んでください。自分で比べるのが面倒なときに便利な機能です。

ミルキットでAVIFに保存する手順

  1. 形式変換を開き、写真を追加します。
  2. 保存形式でAVIFを選びます。
  3. 画質のスライダーを動かしながら結果の容量を見ます。AVIFは同じ数字でもJPGより小さくなるので、今回の試験のように50〜65あたりから比べてみてください。
  4. プレビューで100%を押して大事な部分を確かめ、保存 ↓を押します。
関連するツールを開く

MiruKitで実際に確認した結果

写真・形式画質の数字容量SSIM保存時間
葉の多い写真 · JPG85%424.0 KB0.8510.7秒
葉の多い写真 · WebP79%314.8 KB0.8541.0秒
葉の多い写真 · AVIF62%299.5 KB0.8520.9秒
なめらかな写真 · JPG85%40.4 KB0.9920.4秒
なめらかな写真 · WebP80%19.7 KB0.9920.5秒
なめらかな写真 · AVIF49%9.6 KB0.9920.7秒

自作の2400×1600の写真2枚(葉の多い写真、なめらかな人物風の写真)をPNGで入れ、公開中のprocessImageでJPG・WebP・AVIFを画質30〜95まで5刻み、目標の近くは1刻みで保存しました。各形式で、JPG 85%のSSIM(明るさ基準・8×8の窓)以上になった一番小さいファイルを選びました。時間は同じ設定で3回保存した中央値で、初回に受信する処理用ファイルの時間は含みません。

形式ごとに、JPG 85%と同じSSIMになった一番小さいファイルを同じ場所で切り出し、2倍に拡大しました。
形式ごとに、JPG 85%と同じSSIMになった一番小さいファイルを同じ場所で切り出し、2倍に拡大しました。
現在のツールで記事の設定を実際に適用した画面です。
現在のツールで記事の設定を実際に適用した画面です。

実測の元データを見る

知っておきたいこと

上の数字は自作の試験写真2枚の結果です。写真の内容が変われば、形式どうしの差も変わります。

SSIMは似ている度合いを1つの数字で表しただけの値です。顔や文字のような大事な部分は、実際の大きさで自分の目で比べてください。

画質の数字は形式ごとに意味が違います。AVIF 62%がJPG 62%と同じ画質という意味ではありません。