WebPはWeb向けに使いやすい画像形式ですが、WebPに変換しただけで必ず最小になるわけではありません。元の縦横サイズが大きい、品質設定が高い、内容が細かいといった場合は、WebPでも追加の圧縮が有効です。
WebP画像を圧縮する手順
- 画像圧縮ツールへWebPを追加
- 出力形式をWebPにし、目標容量を設定
- 結果の容量と縮小率を確認
- 文字・輪郭・グラデーションを確認して保存
品質設定と画像サイズのどちらを変える？
まず品質を少し下げ、変化が足りなければ縦横サイズを表示用途に合わせます。たとえばWeb上で横800px表示なのに元画像が4000pxなら、寸法の見直しが効果的です。品質だけを下げ続けるより、適正寸法と適度な圧縮を組み合わせる方が見た目を保ちやすくなります。
WebP・JPG・PNGの使い分け
| 形式 | 得意な画像 | 確認点 |
|---|---|---|
| WebP | 写真、図版、透明背景 | 運用環境の対応状況 |
| JPG | 写真 | 透明背景は使えない |
| PNG | ロゴ、文字、透明背景 | 写真では大きくなりやすい |
ブラウザ圧縮の仕組み
ブラウザでは画像をCanvasへ描画し、対応形式のBlobとして書き出せます。MDNの仕様説明では、JPEGやWebPなど品質を指定できる形式が案内されています。実際の圧縮結果は画像内容とブラウザのエンコーダーに左右されるため、数値だけでなく目視確認も必要です。
圧縮後のチェックリスト
- 拡張子と実データ形式が一致している
- CMSやECサイトへ正常に登録できる
- 透明背景が必要な画像で背景が変わっていない
- スマホとPCの表示に不自然なにじみがない
- 原本を別に保管している
まとめ
WebPの軽量化は、品質設定、縦横サイズ、画像内容の3点で決まります。最初に表示寸法を整え、次に品質を調整し、実際のページで表示を確認すると失敗を減らせます。
WebPが小さくならない主な理由
- 元画像がすでに十分圧縮されている
- 品質設定が高く、細部を多く残している
- 表示用途に対してピクセル寸法が大きい
- ノイズや細かな模様が多く圧縮しにくい
- 可逆WebPとして保存されている
同じ設定でも、単色のイラストと細かな写真では結果が異なります。容量だけを比較せず、同じ表示寸法・同程度の見た目でJPGやPNGと比較します。
公開前の実装チェック
- HTMLの画像URLがWebPファイルを指している
- Content-Typeがimage/webpで配信される
- CMSのサムネイル生成やSNS画像に問題がない
- キャッシュやCDN更新後も新しい画像が表示される
- 必要に応じてpicture要素などで代替形式を用意する
よくある質問
WebPをもう一度WebPへ圧縮してもよいですか？
可能ですが、非可逆圧縮を繰り返すと劣化が重なります。できるだけ元の高品質画像から最終サイズへ一度で書き出してください。
WebPならSEO順位が上がりますか？
形式だけで順位が決まるわけではありません。適正寸法、代替テキスト、レイアウトの安定、ページ速度、内容の有用性を含めて最適化します。