WebP・JPEG・PNGの選び方｜同じ素材の容量比較と画質の確認

WebPにすれば必ず画像が軽くなる、同じ品質数値ならJPEGと同じ画質になる、とは限りません。選ぶときは、容量だけでなく画像の内容と提出先の対応を確認します。この記事では、写真の共有・透過画像・Web掲載を分け、同じ素材を使った容量比較の条件と、変換後の採否を判断する手順を示します。

1. WebP・JPEG・PNGを用途で選ぶ

• JPEG：写真の共有・提出の候補です。提出先の形式指定を確認します。透過は保存できません。
• PNG：透過ロゴ、文字や図を可逆形式で残したい場合の候補です。写真では容量が大きくなる場合があります。
• WebP：対応するWebサイトで容量を抑えたい場合の候補です。非可逆・可逆圧縮と透過に対応しますが、提出先が受け付けるとは限りません。

WebPの形式自体はアニメーションにも対応します。静止画変換ツールがその機能まで扱えるとは限らないため、形式の仕様とツールの対応範囲は別に確認します。

2. 同じ素材2点を再保存した容量比較

2026年10月1日、当サイトのアイキャッチ（描画画像）と文字入り判断図を、JPEGとWebPへ再保存して容量を測りました。縮小せず、同じ素材をRGBへ読み込んでから両形式へ書き出しています。実写写真の比較でも、ブラウザ版変換ツールの測定でもありません。

測定環境はPillow 11.1.0、libwebp 1.5.0です。両方のqualityを80とし、JPEGはoptimize=True・subsampling=2、WebPはmethod=6で保存しました。同じ「80」は同じ画質を意味しません。容量だけを測った結果で、見た目が同等という判定はしていません。元素材も既に圧縮された画像なので、カメラ原本や別画像へこの削減率を当てはめないでください。

from PIL import Image
# 参考素材をダウンロードし、入力名を指定する
image = Image.open("input-image").convert("RGB")
image.save("compare.jpg", quality=80, optimize=True, subsampling=2)
image.save("compare.webp", quality=80, method=6)

3. 品質の数値より細部を確認する

「品質0.82なら劣化しない」といった共通の境界はありません。ブラウザやエンコーダー、画像内容によって結果が変わります。同じ寸法でJPEGとWebPを書き出し、表示予定の大きさと原寸の両方で確認します。

• 写真：髪、布、暗い部分の階調がつぶれていないか。
• 文字入り画像：小さい文字、細い線、文字周辺のにじみが許容範囲か。
• 透過画像：明るい背景と暗い背景で縁を確認する。JPEGへ変換する場合は背景色を決める。

容量が減っても、用途に必要な文字や輪郭が崩れるなら採用しません。品質を上げる、寸法を保つ、PNGへ戻すなど、画像ごとに選びます。

4. Web掲載では寸法と読み込みも確認する

画像形式だけでページ速度やCore Web Vitalsの改善は保証できません。まず表示寸法と配信画像の寸法を照合し、大きすぎる場合は公開用コピーを縮小します。その後で形式・容量・画質を比較し、PageSpeed Insightsなどで変更前後を測ります。

複数回JPEGへ圧縮してからWebPへ変換するより、残してある原本から必要な寸法のコピーを作る方が、不要な再圧縮を避けられます。編集用の原本を公開用ファイルで上書きしないでください。

5. 提出・共有は相手の指定を優先する

フォームがJPEGとPNGしか受け付けない場合は、WebPの拡張子を変更するだけでは使えません。実際に対応形式へ変換し、開けることと容量上限を確認します。写真ならJPEG、透過が必要ならPNGを候補にし、印刷では依頼先の入稿規定を優先します。

6. まとめ：軽さと使える形式の両方で決める

今回の2素材ではWebPの容量が小さくなりましたが、全画像に共通する削減率ではありません。元素材、寸法、保存設定をそろえて比較し、見た目と提出先の対応まで確認します。Web用コピーと編集・共有用の原本を分けて保管すると、後から用途を変える場合にも対応できます。