JPEG・WebP・AVIFを同じ画質に揃えて実測した｜ブログ写真はどれで保存すべきか

「WebPはJPEGより3割小さい」「AVIFはさらに小さい」——よく見る説明ですが、これらの数字はたいてい画質を揃えずに比較した結果です。JPEGのquality 80とWebPのquality 80は、同じ画質を意味しません。

そこで、このブログに実際に載せている写真とスクリーンショット計6点を使って、画質をSSIMという指標で揃えたうえで3フォーマットのファイルサイズを実測しました。結論から言うと、「WebPは3割小さい」は写真では言いすぎで、逆にスクリーンショットでは控えめすぎるという結果になりました。

測定した条件

結論：実際にブログへ上げた画像6点を、長辺1920pxに縮小してから3フォーマットで書き出し、ファイルサイズと画質を測りました。

▼測定環境

SSIMは1.000が元画像と完全一致で、0.98を超えると等倍表示で違いを見分けるのが難しくなるあたりです。この記事では0.98を「実用上の同画質」の基準に使いました。

使った画像6点

写真だけでなくスクリーンショットとイラストを混ぜたのが要点です。後述しますが、この2種類は写真とまったく違う挙動をします。

実測1：quality=80で揃えると、画質がバラバラになる

結論：同じquality 80でも、SSIMは0.962から0.997までばらつきます。quality値はフォーマット間で互換性のある数字ではありません。

まず、3フォーマットすべてをquality 80で書き出した結果です。

※各セルは「ファイルサイズ / SSIM」

この表から2つのことが読み取れます。

▼quality 80で分かること

つまり「WebPにしたら3割減った」の少なくとも一部は、画質が下がったぶんです。そして「AVIFなのに大きくなった」と感じる人がいるのは、AVIFのquality 80がJPEGのquality 80よりずっと高画質側の設定だからです。

フォーマットをまたいで同じquality値を使う比較には、意味がありません。

実測2：画質を揃えると本当の差が出る

結論：SSIM 0.98に到達する最小ファイルサイズで比べると、WebPのJPEG比は写真で13〜24%減にとどまり、AVIFは37〜41%減でした。

各フォーマットについて、SSIM 0.98以上になる最小のquality値を二分探索で求め、そのときのファイルサイズを比べました。

JPEGを基準にした削減率にすると、こうなります。

写真だけを見ると、WebPの削減率は13〜24%です。「3割小さい」という通説より控えめでした。ディテールの細かい料理写真や物撮りほど、WebPの優位が縮みます。

一方AVIFは、写真でも一貫して37〜41%減。フォーマットの世代差がはっきり出ています。

実測3：スクリーンショットとイラストは別世界

結論：平坦な色面と文字が多い画像では、WebPがJPEGの3分の1以下になります。写真の常識をそのまま当てはめてはいけません。

スクリーンショットの行をもう一度見てください。SSIM 0.98に到達するのに、JPEGはq71で149KB必要なのに、WebPはq22で53KBしか要りません。同じ画質で64%の削減です。

▼なぜここまで差が出るのか

これは実務上かなり重要です。技術記事のスクリーンショットをJPEGで貼っているなら、WebPに変えるだけでファイルサイズが3分の1になり、しかも文字がにじまなくなります。写真の記事でWebPに変えるより、はるかに効果が大きい。

逆に言えば、「WebPにしたのに思ったほど減らない」と感じるなら、扱っている画像が写真だからです。それは正常な結果です。

結論：ブログ写真はどれで保存すべきか

結論：2026年現在、迷ったらWebPで十分です。AVIFは「サイズを詰めたい大きな画像」に限って使うのが現実的です。

数字だけならAVIFの圧勝ですが、実運用では別の要素が効いてきます。

AVIFの実務上の壁は2つあります。

ひとつは書き出しの手段が限られること。ブラウザのcanvasが持つtoBlob()で出力できるのはJPEG・PNG・WebPだけで、主要ブラウザはimage/avifでの書き出しに対応していません。ブラウザ上で完結する変換ツールがAVIFを出力できないのは、この制約のためです。

もうひとつはエンコードが遅いこと。今回の測定でも、AVIFの書き出しはJPEGの数十倍の時間がかかりました。1920pxの画像6点を各quality段階で書き出すだけで、全体が20分を超えています。数十枚をまとめて変換する用途では、この差が体感に直結します。

▼用途別のおすすめ

なお、④は見落とされがちです。スクリーンショットをPNGのままアップロードしているブログは多いですが、今回のOGP画像はPNGの629KBがWebP 19KBまで落ちました。33分の1です。

ブラウザだけで変換する

ここまでの内容を実際に試すなら、変換ツールが要ります。このブログでは画像一括変換・圧縮ツールを公開しています。

▼このツールの仕様

画像がサーバーに送られないという点は、仕事の資料や未公開の写真を扱うときに効きます。オンラインの圧縮サービスの多くは、ファイルを一度サーバーへアップロードしてから処理して返す仕組みです。

プリセットは「WebP quality 80・長辺1920px」を用意してあります。今回の測定を踏まえると、この設定は写真向けとしては妥当ですが、スクリーンショットにはかなり過剰です。UI画像を変換するときは、qualityを思い切って下げてみてください。

関連する記事

▶ 画像のqualityはいくつにすべきか｜JPEGとWebPで10刻みに実測した…形式を決めたあとの品質設定

▶ MacでWebPファイルを快適に扱う Quick Look＆変換方法…WebPをMacで開く・変換する方法

▶ Pythonで画像圧縮GUIアプリを作る…同じ処理をデスクトップアプリでやる場合

まとめ

同じquality値でフォーマットを比べても意味がありません。quality 80はJPEG・WebP・AVIFでそれぞれ違う画質を指しています。

画質をSSIM 0.98に揃えて実測した結果は次のとおりです。

▼実測のまとめ

実務の結論としては、ブログ画像はWebPで十分です。AVIFは同画質でさらに2割ほど小さくできますが、ブラウザ上で書き出せず、エンコードも遅い。効果がいちばん大きいのは、写真をWebPにすることではなく、PNGのまま置いてあるスクリーンショットをWebPにすること——今回の測定でいちばんはっきりしたのはそこでした。

※測定はPillow 12.3.0のエンコーダによるものです。cwebpやavifencなど別のエンコーダ、あるいは設定を変えると数値は変わります。SSIMは知覚品質の近似であり、実際の見え方と完全には一致しません。