デザインワークフロー

WebP 変換完全ガイド: 画像最適化で Web サイトを 3 倍速くする方法

次世代画像フォーマット WebP の特性、 JPEG / PNG / AVIF との使い分け、 5 つの変換ツールの比較、 デザイナー視点の運用ベストプラクティスを解説します。

#WebP#画像最適化#Web パフォーマンス#画像形式
画像最適化を象徴するイラスト

Web サイトの表示速度は、 ユーザー体験 / 検索順位 / コンバージョン率の三拍子すべてに影響します。 中でもデザイナーが直接コントロールできる「画像最適化」 は、 投資対効果が最も高い改善ポイント。 そして、 その王道が WebP への変換です。

この記事では、 WebP の特性、 他フォーマットとの比較、 推奨ツール 5 つ、 デザイナーの書き出しワークフロー、 実際に LCP が 30% 改善した事例までを、 競合上位の解説記事を踏まえた独自視点で解説します。

WebP とは何か: 3 行で理解する

  • WebP は Google が開発した次世代画像フォーマット (.webp 拡張子)
  • JPEG / PNG と比べ、 同等画質で容量 25〜35% 削減
  • 主要ブラウザ (Chrome / Safari / Firefox / Edge) がすべて対応済み (2026 年現在)

「画質を保ちつつ軽くする」 一択の選択肢として、 Web 制作の標準になりつつあります。 古いブラウザのみが課題ですが、 picture タグでフォールバックすれば実害はほぼゼロです。

JPEG / PNG / WebP / AVIF 徹底比較

画像フォーマットは「写真向け / 透過向け / 軽さ重視」 で得意分野が違います。 まず特性を整理しましょう。

形式圧縮透過アニメ容量目安 (vs JPEG)対応ブラウザ
JPEG非可逆××基準 (100%)すべて
PNG可逆◯×200〜400%すべて
GIF可逆△ (8bit)◯200%すべて
WebP両対応◯◯65〜75%主要ブラウザ
AVIF非可逆◯◯50〜60%Safari 16+ / Chrome 等

AVIF は WebP よりさらに軽くなる次世代フォーマットですが、 変換ツールの成熟度と古いデバイスの対応状況から、 2026 年時点では WebP を主軸 + AVIF を picture タグで追加するのが現実的です。

いつ WebP を使うべきか: 7 つの判断基準

「とりあえず全部 WebP にすればいい」 ではありません。 次の 7 基準で判断しましょう。

  1. ファーストビューの大きな画像: LCP に直接影響、 最優先で WebP 化
  2. 商品一覧の小さなサムネイル × 大量: 累計容量で効果が大きい
  3. 背景・装飾画像: 画質より軽さが優先される
  4. ロゴ・アイコン (1KB 未満): SVG が優先、 SVG 不可なら PNG のままで OK
  5. SNS シェア用 OG 画像: SNS 側で再圧縮されるため、 JPEG のままで OK
  6. ダウンロード用素材: 受け取り側の互換性を優先、 PNG / JPEG のまま
  7. EC のプロフェッショナル写真: 画質劣化を避けるため、 圧縮率を抑えた WebP (quality 90) で

変換ツール 5 選: 用途別の使い分け

1. Squoosh (ブラウザ / 単発・1 枚ずつ)

Google 製の無料 Web アプリ。 圧縮率・サイズ・形式をリアルタイムプレビューで比較できるため、 「どこまで圧縮しても品質が許容範囲か」 を視覚で判断できます。 ファイル 1〜10 枚程度の作業に最適。

2. サルワカ画像変換ツール (ブラウザ / 一括)

日本語 UI で複数画像を一括 WebP 化。 「設定不要で大量に変換したい」 ケースで便利。 商用案件で大量素材を整理する際の時短ツール。

3. Adobe Photoshop (デスクトップ / ワークフロー)

Photoshop 23.2 以降は標準で WebP 書き出しに対応。 デザイン制作の最終工程で書き出しと同時に最適化できるのが強みです。 アクション / バッチ処理で大量ファイルを一気に処理できます。

4. TinyPNG / TinyJPG (ブラウザ / SaaS / 無料枠)

WebP に変換しない場合でも、 PNG / JPEG の容量を 50〜70% 削減できる老舗ツール。 「フォーマットを変えたくないが軽くしたい」 ときの定番。

5. cwebp コマンド (CLI / 自動化)

Google 公式の CLI ツール。 CI / CD パイプラインに組み込んで、 デザイナーが書き出した PNG / JPEG を自動的に WebP に変換できます。 「ImageMagick + cwebp」 の組み合わせで完全自動化が可能。 オペレーション工数ゼロを目指すなら必須。 

cwebp -q 80 input.png -o output.webp

圧縮率の推奨設定

WebP の品質 (quality) は 0〜100 で指定。 用途別の推奨値は次のとおりです。

用途推奨 quality備考
ファーストビュー / ヒーロー画像85〜90画質と容量のバランス
商品一覧サムネイル75〜80軽量化を優先
背景画像 (ぼかし含む)60〜70画質劣化が目立ちにくい
EC プロフェッショナル写真90〜95拡大ズーム時の品質を確保
透過 PNG 代替 (可逆)lossless モードJPEG では不可能だった可逆透過

「画質劣化が分からない」 限界点を Squoosh で探り、 そこから -5 した値を本番運用に使うのが安全策です。

picture タグでブラウザ互換を確保

古いブラウザに対応するには、 picture タグでフォールバックを提供します。 

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="ヒーロー画像" width="1200" height="630" loading="lazy">
</picture>

上から順に試され、 対応していないフォーマットは自動的にスキップされます。 alt / width / height / loading 属性も忘れずに設定 (CLS スコア改善のため)。

デザイナー視点の書き出しワークフロー

WebP 変換を実務に組み込む際の推奨ワークフローはこちらです。

  1. デザインツール (Figma / Photoshop) で大元の高解像度 (2x) を PNG / JPEG で書き出し
  2. 命名規則: hero_2x_2400.png のように倍率と幅を明記
  3. 圧縮ツールで WebP (quality 80) + AVIF を生成
  4. 同名で srcset (1x / 2x) を作成
  5. 原本 PNG / JPEG + 変換後 WebP / AVIF をすべてアセット管理ツール (Digift など) に保管
  6. 制作ファイル内では <picture> でフォールバック付き

原本も保管する理由は「将来 AVIF が標準になった時に再変換できるように」 です。 WebP / AVIF だけ残すと再圧縮で画質が劣化する一方通行になります。

LCP 改善 30% の実例

実際にあるサービスサイトで、 ヒーロー画像 + 商品一覧 12 枚を JPEG (合計 1.8MB) → WebP (合計 580KB) に変換した結果:

  • LCP: 3.2 秒 → 2.2 秒 (30% 改善)
  • 転送容量: 1.2MB 削減 (1 ページあたり)
  • Lighthouse Performance: 72 → 89 (+17 pt)
  • 離脱率: 月次平均で 4.2% 減

これは「変換するだけ」 で得られる効果。 サーバ追加や CDN 契約のような投資なしで、 ユーザー体験 / SEO スコア / コンバージョンを同時に改善できる希少な施策です。

よくある落とし穴 5 つ

  • 原本 PNG / JPEG を削除してしまう: 将来の再変換に備えて必ず保管
  • quality を一律 75 で運用: 用途に応じて 70 / 85 / 90 を使い分けないと、 重要画像で品質劣化が目立つ
  • picture タグなしで .webp を直接 src 指定: 一部古いブラウザでは画像が表示されない
  • 幅・高さ属性を省略: 画像の読み込みが完了する前にレイアウトシフトが発生 (CLS スコア悪化)
  • SNS シェア用 OG 画像を WebP で配信: 一部 SNS は WebP をサポートせず、 シェア時にプレビューが出ない

よくある質問

Q1. JPEG / PNG を全部 WebP に置き換えるべき?

A. Web 用は原則 YES。 ただし配布用 / SNS 用は元形式のまま残す。 印刷用は TIFF / EPS など別形式が必要なので別管理。

Q2. WebP の方が JPEG より画質が悪いと感じることがあるが?

A. 同じ quality 数値でも内部アルゴリズムが違うため、 直接比較できません。 Squoosh でファイルサイズが同じになるよう調整してから視覚比較するのが正しい方法です。

Q3. AVIF の方が軽いなら WebP は不要?

A. AVIF は古いブラウザ / 一部デバイスで未対応。 2026 年現在は WebP を主軸 + AVIF を picture タグの上段に追加が現実的。

Q4. デザインアセット管理ツールに WebP を保管できる?

A. はい。 Digift では JPG / PNG / GIF / SVG / WebP / PSD / AI 等の主要フォーマットすべてに対応し、 サムネイル生成も自動です。

Q5. 変換ツールは無料のものだけで十分?

A. 個人 / 小規模なら無料で十分。 月 1000 枚を超えるなら CI 自動化を検討、 数十万枚規模なら有料 CDN (Cloudflare Images / Imageflux 等) も視野。

まとめ

WebP 変換は「無料で・低リスクで・効果絶大」 な数少ない Web 改善施策の 1 つです。 ファーストビューの大画像から優先的に置き換え、 picture タグでフォールバックを設定するだけで、 LCP は 30% 単位で改善します。

実務的には原本も最終 WebP も両方保管するアセット管理が重要。 Digift のような DAM を使えば、 元 PNG と変換後 WebP を同じアセットのバージョン違いとして紐づけて保管でき、 将来の再圧縮や再書き出しがスムーズになります。

画像最適化はデザイナーが担当するか、 エンジニアが担当するか曖昧になりがちな領域。 ここに「アセット管理ルール」 を確立することで、 チーム全体の制作品質が底上げされます。