※本記事にはプロモーションが含まれています。
ブログ画像を軽くするときは、元ファイルを残し、表示する大きさを決めてから、同じ幅で圧縮前後を比べると判断しやすくなります。容量の小ささだけで選ばず、読者に必要な文字や細部が残っているかを見ることが中心です。
この記事では、2026年10月19日に自作の文字・線画サンプルでPNGとWebPを比較しました。画像の大きさを固定して圧縮設定だけを変えています。写真全般に適した数値や、サイトの表示速度を測った検証ではありません。
サイズ変更と圧縮を一度に進めない
画像を小さくする操作には、幅や高さの画素数を減らす方法と、画像形式や圧縮の設定を変える方法があります。両方を同時に変えると、読みにくくなった理由を追いにくくなります。
先に掲載場所を決め、必要な表示幅で読める元画像を用意します。その後、画素数を固定したまま圧縮して比べると、容量と見え方の関係を確認できます。元から文字が小さすぎる画像は、圧縮より先に作り直す余地があります。
WordPressの画像ブロックで選ぶサイズと、手元の元ファイルも分けて見ます。基本の切り分けは、画像がぼやけるときの確認順にまとめています。
同じ画像・同じ画素数で比較した結果
自作のオフホワイト背景に、黒い日本語と青い細線を置いた1200×630pxのPNGを使いました。macOSのローカル環境でSharp 0.35.5、libwebp 1.6.0を使い、WebPのqualityを85・50・20へ変えています。このqualityは今回の書き出し設定で、他ソフトの同じ数字と同等とは限りません。
| 形式・設定 | 画素数 | ファイル容量 |
|---|---|---|
| 元PNG | 1200×630px | 45,768バイト |
| WebP quality 85 | 1200×630px | 14,696バイト |
| WebP quality 50 | 1200×630px | 10,680バイト |
| WebP quality 20 | 1200×630px | 8,136バイト |
今回の画像では、設定を下げるとファイル容量も小さくなりました。ただし、縮小して見たときと、文字の周囲を詳しく見たときでは、違いの分かり方が変わりました。
目視では、大きな見出しはいずれも読めました。一方、低いqualityの画像では、小さな文字の縁や青い線の周囲ににじみや色の変化が見えます。今回の結果だけで、quality20でも常に十分とは判断できません。
確認する場所は、画像の用途で変える
| 画像 | 比べる箇所 |
|---|---|
| 操作画面 | ボタン名、設定値、小さな説明文字 |
| 図・表 | 細い線、数字、色分け、凡例 |
| 写真 | 髪や布などの細部、輪郭、色の階調 |
| アイキャッチ | 一覧へ縮小したときのタイトルと補足 |
写真の細部は今回のサンプルには含めていません。人物や商品写真に使うときは、その画像自体で別に確認する必要があります。圧縮後のファイルを何度も編集し直すより、保存した元データから書き出し直すと条件をそろえやすくなります。
公開前には、実際のページでも比べる
- 圧縮前の元ファイルと、比較用の書き出しを別名で残します。
- 同じ表示幅で、文字・輪郭・色を見比べます。
- WordPressのプレビューで、意図した画像が使われているかを確認します。
- スマホ相当の幅でも、必要な説明が読めるかを見ます。
画像容量が減ったことと、ページが何秒速くなったことは別です。この記事では通信速度やページ表示速度を測っていません。速度を評価する場合は、計測条件をそろえたページ単位の確認が必要になります。
無料で済むなら、補正ソフトを足さなくてよい
使っている編集ソフトや無料の変換機能で、必要な画素数・形式・画質を満たせるなら、その範囲で進められます。圧縮で読みにくくなったときは、圧縮を弱める、PNGへ戻す、文字を大きく作り直す方法もあります。
高画質化ソフトは容量を小さくするための必須条件ではありません。元画像に必要な画素数がなく、撮り直しや再書き出しも難しい場合に別の選択肢として考えます。拡大の限界はAiartyの倍率別検証にも残しています。
今回は、読めるかどうかの確認用に同じ自作サンプルを使いました。別の画像へこの設定をそのまま当てるより、その記事で伝えたい情報を基準に、容量と見え方を比べるのがよいと思います。
検証日：2026年10月19日。自作SVG由来のPNGを使用。参考：WordPress公式「Image block」（同日確認）。