記事にスクリーンショットや写真を載せていくと、いつのまにかページが重くなっています。
画像は、WebPへ変換し、必要な表示幅に合わせて縮めると容量を減らせる場合があります。変換後も元画像を残し、文字・輪郭・ファイルサイズを比べて採用します。
この記事では、ブラウザーだけで画像をまとめてWebPに変換・リサイズする方法と、画質と幅の決め方を、実際に変換した数字で紹介します。
この記事で使う画像のWebP変換・リサイズは、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- 画像をまとめてWebPに変換し、リサイズする手順
- 画質と幅の設定で、どれだけ軽くなるか（実測）
- スクリーンショットで画質を下げすぎると起きること
- WordPressでWebPを使うときの注意
最初の答え｜WebP・画質80・幅1600pxまで
| 設定 | 目安 |
|---|---|
| 形式 | WebP |
| 画質 | 写真は75〜80、文字の多いスクリーンショットは90以上 |
| 最大の幅 | 本文の画像なら1200〜1600px |
WebPへの変換でどれだけ小さくなるかは、元の形式・画像内容・画質設定によって変わります。下の実測は使用した画像と条件での結果です。利用者の対象ブラウザーで表示できることも確認してください。
多くのサイトは本文の幅が700〜800pxほどなので、高解像度の画面を考えても、その倍の1200〜1600pxあれば足ります。
形式を変えるより、幅を縮めるほうが効くことも多いので、2つは一緒に行います。
ツールで変換する手順
- 画像のWebP変換・リサイズを開く
- 変換する形式（WebP・JPEG・PNG）と、最大の幅、画質を選ぶ
- 画像をまとめてドロップするか、枠を押して選ぶ
- 変換前と変換後の大きさを表で確かめる
- 1枚ずつ「保存」を押すか、「すべて保存」でまとめて保存する
変換は、使っているブラウザーの中だけで行われ、画像はサーバーに送られません。
お客様から預かった写真や、公開前の画面のスクリーンショットでも、外に出さずに変換できます。
読み込めるのはPNG・JPEG・WebP・GIFで、複数の画像をまとめて選べます。大きな画像を多数扱うときは、端末の処理時間やメモリーに合わせて小分けにしてください。
最大の幅を空欄にすると、元の幅のまま形式だけを変えます。
最大幅は小さい画像を拡大しない
| 元画像の寸法 | 設定 | 変換結果 |
|---|---|---|
| 1265×889px | WebP・画質80・最大幅600px | 600×422px |
| 300×211px | WebP・画質80・最大幅600px | 300×211pxのまま |
2026年10月2日に、WAZAの公開画面と検証用の小さいPNGを同時に選び、結果表とプレビューの寸法を確認しました。最大幅より大きい画像だけが縮小されます。下のcwebpの-resize指定は小さい画像も指定幅へ拡大するため、同じ意味ではありません。
設定を変えただけで結果表が変わらない場合は、元画像を選び直して再変換してください。今回の確認でも、幅の欄だけを空にした時点では前の600pxの結果が残っていました。表の変換後の寸法を確かめてから保存します。
実測｜3枚をまとめて変換した結果
自分で用意した次の3枚を、WebP・画質80・最大幅1600pxで変換しました。
- WEBツール箱のトップページを2倍の解像度で撮ったスクリーンショット（PNG・2560×1800px・198KB）
- 高速化診断の結果画面のスクリーンショット（PNG・945×1300px・148KB）
- このサイトの記事のアイキャッチ（JPEG・1280×720px・28KB）
3枚の合計は375KBから114KBになり、70%軽くなりました。
いちばん減ったのは、2560pxから1600pxに縮めたスクリーンショットで、198KBが41KB（79%減）になりました。
もともと軽いJPEGのアイキャッチも、28KBから13KBに減っています。
設定を変えると、どれだけ変わるか
同じ3枚を、設定だけ変えて変換し直した結果です。
| 形式・画質 | 最大の幅 | 3枚の合計 | 元との比較 |
|---|---|---|---|
| WebP・80 | 1600px | 114KB | 70%減 |
| WebP・80 | 1200px | 96KB | 74%減 |
| WebP・80 | 元のまま | 152KB | 59%減 |
| WebP・60 | 1600px | 88KB | 76%減 |
| WebP・90 | 1600px | 155KB | 59%減 |
| JPEG・80 | 1600px | 208KB | 44%減 |
| PNG | 1600px | 597KB | 59%増 |
| WebP・100 | 1600px | 820KB | 119%増 |
2560pxのスクリーンショットだけを見ると、幅を変えずにWebPにしたときは79KB、1600pxに縮めると41KB、1200pxなら26KBでした。
形式を変えるだけでも軽くなりますが、幅を縮めるとさらに半分近くになります。
同じ画質80でも、JPEGにした場合はWebPのおよそ2倍の大きさでした。
画質100とPNGは、元より大きくなる
画質を100にすると、3枚の合計は820KBになり、元の2倍を超えました。
JPEGで28KBだったアイキャッチは、172KBまで膨らんでいます。
すでに圧縮されている画像を、最高画質で作り直すと、失われた部分は戻らないまま、ファイルだけが大きくなります。
PNGを選んだ場合も同じで、元より59%大きくなりました。
結果が元より大きくなったときは、ツールが「元より大きくなりました」と知らせるので、その画像は元のまま使います。
スクリーンショットは画質を下げすぎない
高速化診断の結果画面のスクリーンショットから、小さな文字の部分を切り出し、4倍に拡大して比べました。
元のPNGでは、文字の縁に赤や青のにじみが見えます。
これはパソコンの画面で文字をなめらかに見せる仕組みによるもので、WebPにすると画質90でもこの色は消え、文字が少し灰色にぼやけます。
画質60では、文字の周りのにじみがさらに広がります。
文字や細い線が主役の画像は、画質90以上にするか、PNGのまま使うのが安全です。
写真も画質75〜80を出発点にし、肌・空・輪郭などが崩れていないか元画像と比較します。目立つ劣化があれば画質を上げ、容量差が小さければ元画像を使います。
変換するときの注意
- JPEGとWebPは変換のたびに少しずつ劣化するので、元の画像は残しておく
- JPEGは透過を扱えないので、透過を残したい画像はWebPかPNGを選ぶ
- GIFのアニメーションは、1コマ目だけが変換される
- 変換後の大きさが元より大きい画像は、元のまま使う
WordPressでWebPを使う
WordPress 5.8以降は、WebPのアップロードに標準で対応しています。
変換した画像は、そのままメディアに追加できます。
すでにアップロードした画像をまとめて変換したい場合は、EWWW Image OptimizerやWebP Expressなどのプラグインを使います。
画像最適化のプラグインは「ShortPixelの使い方」で紹介しています。
AVIFも比較したい場合は「画像をAVIF形式で表示する方法」をご覧ください。WebPより必ず小さくなるとは限らないため、同じ元画像から書き出して比べます。
WordPress 5.3以降は、幅か高さが2560pxを超える画像をアップロードすると、2560pxに縮めた画像を自動で作り、ファイル名の末尾に「-scaled」を付けます。
元の大きな画像もサーバーに残るので、アップロードする前に縮めておくと、サーバーの容量も節約できます。
ツールを使わずに変換する方法
Google公式のcwebpをインストールし、入力画像のあるフォルダーで次の1行を実行します。input.pngは入力名に置き換え、output.webpは既存ファイルと重ならない名前にします。元画像を残せば、採用しなかった変換結果から戻せます。
cwebp -q 80 -resize 1600 0 input.png -o output.webp「-q」が画質、「-resize」の2つの数字が幅と高さです。
高さを0にすると縦横比を保ち、幅を1600pxにします。最大幅の指定ではないため、幅が1600px未満の画像も拡大されます。拡大したくない画像は -resize 1600 0 を省いてください。
たくさんの画像を定期的に変換するならコマンド、記事を書くたびに数枚を変換するならこのツール、という使い分けになります。
よくある質問
Q. 変換した画像はどこに保存されますか？
「保存」を押すと、ブラウザーの通常のダウンロード先に保存されます。
「すべて保存」を押すと続けてダウンロードされるので、ブラウザーによっては複数のダウンロードを許可するか確認されます。
Q. 何枚まで一度に変換できますか？
複数選択には対応していますが、実際に処理できる枚数は端末のメモリーや画像の大きさに依存します。まず数枚で完了を確認し、大量の素材は分割してください。
ただし、変換は使っているパソコンやスマホの中で行うので、大きな画像を大量に入れると時間がかかります。
Q. 軽くなったかどうかは、どこで確かめられますか？
画像を差し替えたあとのページ全体の重さは、ページ重量診断で確かめられます。
画像の合計と、重いファイルの順位が出るので、どの画像が残っているかも分かります。
まとめ
- 画像のWebP変換・リサイズなら、画像をまとめてドロップするだけでWebP変換とリサイズができる
- WebP・画質80・最大幅1600pxで、自作の3枚は合計70%軽くなった
- 幅を縮めるほうが、形式を変えるより効くことが多い
- 文字の多いスクリーンショットは画質90以上か、PNGのまま使う
- 画質100やPNGにすると、元より大きくなることがある
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
