WebP画像はどこまで圧縮できる？
Photoshop書き出しで画質を比較してみた

前回の記事では、WebPやAVIFなど次世代フォーマットの概要や、軽量化によるメリットについて解説しました。
今回はその続編として、PhotoshopでWebP形式に書き出す際の圧縮率（クオリティ）を変化させたときに、画質がどの程度劣化するのかを検証しました。
512px × 512pxの画像を使い、「90%」「70%」「60%」「40%」の各圧縮率で比較しています。
ぜひ最後までご覧ください！

検証に使用した画像

今回の検証には、以下の画像を使用しました：

• サイズ：512×512px
• 177kb
• 背景：海と子供の風景
• フォーマット：JPEG（最高画質）

この画像をPhotoshopからWebP形式で書き出しを行い、圧縮率ごとの変化を比較しました。

WebP圧縮率ごとの画質比較

ここからは、実際に書き出した画像を見ていこうと思います。

左が元画像、右に圧縮率90％で書き出した画像です。
見比べてみると、ほとんど違いがわからないレベルの圧縮となっており、90％の設定では画質をほぼ維持したままファイルサイズを削減できています。

とはいえ、使用する画像の内容（グラデーションの有無・文字の多さ・写真かイラストか）によっても見え方は変わるため、実際の用途に応じた確認が重要です。

続けて、圧縮率を変えた画像をみていきましょう。

比較結果

512pxバナーであれば「60%圧縮」までは実用的

PhotoshopのWebP書き出し機能では、60%程度まで圧縮しても、画質の劣化はあまり気にならないという結果になりました。
一方で、文字が多い画像や、ロゴ・図形のエッジが重要な画像の場合は、60%以下にすると若干にじみやぼやけが目立つため注意が必要です。

100％表示での見え方にも注目

これは、ブラウザで拡大率100%にして表示させた時の画像です。

上記の結果でもあったように、512×512程度のバナーの場合、圧縮率60％でもあまり違和感なく表示できることがわかりました。
サービス上で使っても問題ないレベルの画質が得られるかどうかは、100％表示での見え方を基準にすると判断しやすくなります。

まとめ

今回の検証を通して、WebPの圧縮率を変えても「見た目の違いは意外と小さい」ということがわかりました。
特に512px程度の画像では、60％まで圧縮しても違和感なく使えるケースが多く、実務でも十分活用できそうです。
ただし、文字や図形など、細部の鮮明さが重要な画像では劣化が目立つ場合もあるため、用途に応じた確認は必須ですね。

次回は、PhotoshopとSquooshで書き出した場合の画質やファイルサイズの違いを比較していく予定です。
ぜひご覧ください！