Guide
画像は WebP にするべき？ JPEG / PNG のまま？
写真は WebP、透過や印刷用は別、という実務寄りの選び方を短く整理します。
先に結論
サイトの写真・バナー・ブログの挿絵は、WebP にすると容量が減り、表示が軽くなることが多いです。一方で、印刷用・透過が複雑な素材・古い環境だけを重視する案件では、JPEG / PNG のままが向くこともあります。
「全部 WebP 一択」ではなく、用途ごとに選ぶのが実務的です。変換そのものは WebP 変換（ブラウザ内・サーバー非送信）で試せます。
WebP が向くもの
- 写真（JPEG だったもの） … 同じ見た目でもファイルサイズを下げやすい
- LP やトップの大きい画像 … 初回表示の重さに効きやすい
- 一覧のサムネイル … 枚数が多いほど差が出る
- すでに圧縮しすぎてザラついている画像の再書き出し … 元のきれいなデータから WebP を切る方がよい
品質 70〜85% あたりから試し、目で見てザラつきが出たら上げる、が無難です。
JPEG / PNG のままが無難なもの
- 印刷入稿・店頭ポップ用 … 相手指定の形式を優先
- ロゴで透過が厳密に必要なもの … PNG のまま、または SVG。WebP も透過はできるが、ワークフロー次第
- アニメ GIF をそのまま動かしたい … 簡易変換は先頭フレームだけ、など制限があることが多い
- 相手の CMS が WebP 非対応 … アップロードできない・自動で JPEG に戻るなら無理にしない
よくある心配
古いブラウザは？
いまの主要なスマホ・PC ブラウザは WebP を表示できます。どうしても古い環境が要件なら、<picture> で JPEG フォールバックを置く方法があります。要件が「社内の特定ブラウザだけ」なら、そのブラウザで一度表示確認するのが確実です。
画質は落ちる？
圧縮なので、詰めすぎると落ちます。見た目で比べて決めてください。数値の「品質 80」はソフトごとの目安であり、絶対値ではありません。
SEO に必須？
WebP であること自体が順位を上げる魔法ではありません。ただし表示が遅いサイトは体験が悪く、結果として不利になり得ます。画像の軽量化はその手段のひとつです。
進め方の例
- 重いページの画像を数枚選ぶ トップや商品一覧など
- WebP に変換して容量を比べる 目視で劣化がないか確認
- サイトに載せて表示を確認 スマホ実機も一度見る
- 問題なければ他の写真にも展開 ロゴや UI 部品は個別判断