画像圧縮とWebP変換｜PageSpeed改善の基本
画像 WebP PageSpeed 最適化
結論
WebPでJPEGより25〜35%軽量化。サーバーに送らないローカル処理のツールを選ぶ。品質80%前後が目安。
なぜ画像圧縮が必要か
| 理由 | 効果 |
|---|---|
| **PageSpeed** | 画像最適化はCore Web VitalsのLCP（Largest Contentful Paint）に直結。重要な評価項目。 |
| **ユーザー体験** | 読み込みが速いほど離脱率低下。特にモバイルでは体感速度が変わる。 |
| **モバイル** | 通信量を抑えると、データ消費と遅延が減る。 |
WebPとは
Googleが開発した画像形式。JPEGより高効率で、透過にも対応。主要ブラウザ（Chrome、Firefox、Safari、Edge）はほぼすべてサポート済み。2020年以降のSafari対応で、実務上はほぼ全環境で使える。
フォーマットの使い分け
| 用途 | 推奨フォーマット・理由 |
|---|---|
| 写真・一般的な画像 | **WebP**。JPEGより25〜35%程度軽量。画質は同等。 |
| 透過が必要な画像 | **WebP**。PNGより軽量。透過PNGの代替として。 |
| レガシー対応 | **JPEG/PNG**。`<picture>`でWebPを優先し、非対応ブラウザ用にフォールバック。 |
推奨設定の目安
- 品質 — 80%前後。画質と容量のバランスが良い。90%以上は差が小さい割に容量が増える。
- リサイズ — 表示サイズに合わせて縮小。1920px幅で表示するなら、それ以上は不要。
- フォーマット — 写真はWebP、透過が必要ならWebP（PNGより軽い）。
安全に圧縮するには
サーバーに送信しないツールを選ぶ。ブラウザ内完結なら、機密画像や個人情報を含む画像も安心して処理できる。
🧪 画像圧縮ツールで試す
WebP変換をブラウザ内で安全に
試す