目に見えない品質で画像を軽量化する方法
JPEG／PNG／WebPを用途別プリセットで縮小—ヒーロー、商品写真、サムネ、メール添付に合わせる。
このガイドと一緒に使うと便利なツール：
なぜ重要か
ヒーロー画像が4.2MB。**Lighthouseが沈み、**4Gのモバイルは2秒真っ白。品質80%で320KBにすると目では差が分からず、Largest Contentful Paintが約1.6秒改善することがあり。その差は転換にも効きます。画像圧縮はWebで最コスパの性能改善の一角で、ブラウザ内ツールなら顧客写真をSaaSへ上げなくて済みます。
実際の3つのシーン
12枚ドロップ、品質80%＋WebP、zipダウンロードしてCDNへ。
LCP 2秒未満
リサイズ＋圧縮を一括。モバイルのカード表示が軽くなります。
一覧の読み込みが速い
25枚を約200KB/枚に圧縮し、Gmail 25MB内に収めます。
サイズ上限内
手順
画像圧縮ツールを開きます。
1枚または複数ドロップ
JPEG、PNG、WebP対応。複数は並列バッチ処理。
出力形式
Web（最小）、JPEG（メール・レガシー）、PNG（透過のスクショ・ロゴ）。
品質設定
50＝強め（写真にジャギー）、75＝良い既定、90＝ほぼロスレス。スライダーでサイズ確認。
出力時リサイズ（任意）
長辺1600pxや800px上限など。ランディング写真は1600pxでも十分見えることが多いです。
単品DLまたはzip
単一は通常DL、複数はzipパッケージ。
オリジナル
hero.jpg — 4,210 KB
3840 × 2160 pxWebP @ 80%
hero.webp — 318 KB (-92%)
3840 × 2160 px (unchanged)
SSIM 0.984 (perceptually identical)
実践テクノ
- WebPは主要ブラウザ95%+。極限圧縮ならAVIFも選択肢ですがエンコード遅く普及もまだ。既定はWebPで十分なことが多いです。
- **二重圧縮しない。**一度75%JPEGをまた75%にするとジャギー増。常にできるだけオリジナルから。
- **公開画像はメタデータ剥がし。**スマホEXIFにGPSが残ることがあります。圧縮ツールは既定で除去します。
- 文字のシャープなスクショは先にリサイズしてから品質。拡大でジャギが目立ちます。
よくある落とし穴
よくある誤り
出力が入力より大きい
ソースがすでに強く圧縮済み、または品質をオリジナルより上げたとき。ソースより下げる。
よくある誤り
透過PNGをJPEGへするとハロー
JPEGは透過なし。アルファ付きはWebPまたはPNGへ。
よくある誤り
100MB級1枚でタブフリーズ
Webワーカーでもタブごとメモリ制限があります。大作は一度に少数ずつ処理します。
向いていない用途
- ベクター（SVG、AI）—ラスター圧縮のメリットは薄い。SVGOや目的がラスタならSVG→PNG。
- 原版アーカイブはPNG/RAWマスターを保持し、配信用だけ圧縮。
- CI/CD自動はimagemin、sharp、vipsなどパイプライン向きです。
FAQ
画像はサーバーに送られる？
いいえ。ブラウザのcanvasと組み込みWebPエンコードで処理。ページ外には出ません。
WebPとAVIFの違いは？
同等品質でAVIFはWebPより約30%小型だがエンコードは約10倍遅い。静的資産で時間が許すならAVIFも選択肢です。
圧縮せずバッチリサイズだけ？
はい。品質100にしてリサイズのみ適用できます。
次のステップ
- レガシー形式からの変換は画像コンバーター。
- 公開前に個人情報はEXIFエディター。
- ブランド透かしは画像ウォーターマーク。