ChatGPTなどで作った画像を、そのままブログへ載せていませんか？
今回、実際にこのブログで使った1672×941ピクセルのAI生成画像を、PNGからJPEGとWebPへ変換して容量を比べました。
結論から言うと、元のPNGは約2.14MBでしたが、WebPの品質75では約0.18MB。容量は約91.6％減り、通常の表示サイズでは見た目の差をほとんど感じませんでした。
ただし、何でもWebPにすればよいわけではありません。写真風のAI画像、文字入り画像、透明背景など、画像の内容によって向いている形式が違います。
今回使った画像と検証条件
検証には、前日に公開したDiffusion Controllerの記事で実際に使っているアイキャッチ画像を使いました。架空のテスト画像ではなく、現在ブログで配信している画像です。
- 元画像：PNG
- 大きさ：1672×941ピクセル
- 色：RGB、透明部分なし
- 元の容量：2,139,591バイト（約2.14MB）
- 変換方法：Python 3＋Pillow 12.3.0
- 確認日：2026年10月4日
同じ大きさのまま、JPEGとWebPを品質85・75で保存しました。画像の縦横サイズは変えていません。
結果：WebP 75なら約91.6％軽くなった
同じAI生成画像をPNG・JPEG・WebPで比較したイメージです。容量を大幅に減らしても、通常表示では見た目の差が小さいことが分かります。
| 形式・品質 | 容量 | PNGからの削減 | PSNR |
|---|---|---|---|
| 元のPNG | 約2.14MB | 基準 | 基準 |
| JPEG 85 | 約0.30MB | 86.1％減 | 33.06dB |
| JPEG 75 | 約0.23MB | 89.3％減 | 31.50dB |
| WebP 85 | 約0.25MB | 88.3％減 | 34.20dB |
| WebP 75 | 約0.18MB | 91.6％減 | 32.54dB |
PSNRは元画像にどれだけ近いかを数値化したもので、基本的には高いほど元画像に近いと考えます。今回の条件では、WebPは同じ品質設定のJPEGより容量が小さく、PSNRも高くなりました。
画面全体を通常サイズで見比べた限り、WebP 75でも大きな違いは分かりにくい結果でした。ただし、細かな粒子や光の線を大きく拡大すると、圧縮による変化が出る可能性があります。
ブログのAI画像なら、まずWebP 80前後が使いやすい
今回の結果だけで考えると、写真風・イラスト風のAI画像をブログに載せる場合は、WebPの品質75〜85が使いやすい範囲です。
- 画質を優先：WebP 85
- 容量とのバランス：WebP 80前後
- 表示速度を優先：WebP 75
品質を下げるほど軽くなりますが、細かな模様、髪の毛、文字の輪郭、暗い部分の階調などが崩れやすくなります。最初から一気に50まで下げるより、75〜85で確認するほうが失敗しにくいです。
PNG・JPEG・WebPはどう使い分ける？
PNGが向いている画像
- 背景を透明にしたロゴや素材
- 小さな文字が多い画面写真
- 線がくっきりした図やアイコン
- 何度も編集し直す元データ
PNGは劣化しにくく透明背景にも対応しますが、写真や複雑なAI画像では容量が大きくなりがちです。編集用の元画像として残し、ブログ掲載用は別形式にする方法が安全です。
JPEGが向いている画像
- 写真風のAI画像
- 透明部分が不要な写真
- 古い環境も含めて幅広く使いたい画像
JPEGは扱いやすく、ほとんどの機器やサービスで開けます。ただし透明背景は使えず、保存を繰り返すと劣化が積み重なります。
WebPが向いている画像
- ブログのアイキャッチ
- 記事内の写真やAI生成画像
- 画質を保ちながら容量を減らしたい画像
- 透明背景を保ったまま軽くしたい素材
WordPress公式資料では、WebPはWordPress 5.8から対応しています。現在の「AI使えないと詰む。」はWordPress 7.1.2なので、WebPをアップロードできる条件を満たしています。
WordPressにPNGを入れるだけでは、自動でWebPにならなかった
今回の元画像をWordPressへPNGでアップロードしたところ、WordPressが自動生成した300px、768px、1024pxなどの縮小画像もPNGのままでした。
つまり、このサイトの現在の設定では、PNGを入れれば勝手にWebPへ変換されるわけではありません。元画像2.14MBとは別に複数のPNGが作られ、1024×576版だけでも約0.76MBありました。
WordPress公式資料でも、初期状態では基本的に元画像と同じ形式で縮小画像を作ると説明されています。WebPで配信したい場合は、アップロード前に変換するか、出力形式を変える仕組みが必要です。
今回実際に使った変換コード
変換処理は次の短いコードで実行しました。PythonとPillowが使える環境向けです。元のPNGは残したまま、新しいWebPを書き出します。
from PIL import Image
image = Image.open("input.png").convert("RGB")
image.save(
"output.webp",
"WEBP",
quality=80,
method=6
)ファイル名の「input.png」を自分の画像名に変えます。透明背景を残したい場合は、.convert("RGB")を使うと透明部分が失われるため、そのままのモードで保存する必要があります。
今回は品質75と85を測りましたが、普段使いの開始位置としては品質80が分かりやすいです。
表示速度のために、画像サイズも見直す
形式だけでなく、縦横サイズも重要です。スマホで小さく表示する画像を4000px以上のまま載せても、見た目はほとんど変わらないのに容量だけ増えることがあります。
アイキャッチ画像なら、サイトが実際に表示する大きさに合わせて縮小し、そのうえでWebPへ変換すると効率的です。ただし、SNS共有や高精細画面で大きく見せる場合もあるため、必要以上に小さくしないようにします。
今回の結論
実際のAI生成アイキャッチ画像を比較した結果、PNG約2.14MBに対し、WebP 75は約0.18MBでした。縦横サイズを変えずに約91.6％軽量化でき、通常表示では大きな違いを感じにくい結果です。
- 写真風・イラスト風のAI画像：WebP 75〜85
- 迷った場合：WebP 80前後
- 透明背景や文字・線を最優先：PNGも比較する
- 幅広い互換性と扱いやすさ：JPEG 80〜85
- 編集用の元画像：PNGで残す
ブログ用画像は、元のPNGを保管し、掲載用だけWebPへ変換する方法が失敗しにくいです。無料の変換手段で十分なので、この作業だけを目的に有料サービスへ加入する必要はありません。
今回使った元画像の記事
検証に使った画像は、Googleの画像生成研究「Diffusion Controller」を解説した記事のアイキャッチです。
参考：WordPress Developer Resources「Images」。WordPress 5.8以降のWebP対応と、縮小画像の出力形式について確認しました。本記事の検証日：2026年10月4日。
