画像最適化パイプライン完全ガイド
巨大な元画像からWeb対応アセットへ — 実際に帯域を節約するステップバイステップのワークフロー。
デザイナーからPhotoshopから直接出力された4000x3000のPNGが届きます。8MB。Webページには800px幅、100KB以下、できればWebP形式が必要です。
「手元にあるもの」と「Webに必要なもの」のギャップ。多くの開発者が時間を無駄にするポイントです。適切なパイプラインで解決しましょう。
ステップ1：目標サイズにリサイズ
ファイルサイズを最も大きく削減するのはリサイズです。800pxで表示される画像が4000pxなら、ピクセルの96%を無駄にしています。大げさではなく、数学です。
Retinaディスプレイ向けには表示サイズの2倍に設定してください。画面上で400pxでレンダリングされるなら、800pxにリサイズ。4000pxではありません。
一般的な削減量：4000x3000（8MB）→ 800x600（400KB）。リサイズだけで95%削減。
ステップ2：見た目を損なわず圧縮
リサイズ後に圧縮します。写真の場合、JPEG品質75-85%がスイートスポットです — 元画像と視覚的に同一でありながら、ファイルサイズは大幅に小さくなります。
コツは、圧縮アーティファクトが目に見え始める閾値を見つけることです。ほとんどの写真で、その閾値は約70%。それ以上を維持すれば、拡大しない限り誰も区別できません。
一般的な削減量：400KB → 120KB（品質80%）。ユーザーの目には分かりません。読み込み速度には分かります。
ステップ3：モダンフォーマットに変換
JPEGとPNGは長い歴史があります。WebPは同じ品質で25-35%小さいファイルを提供します。AVIFはさらに進んでいます。
実用的なアプローチ：
- 写真：WebP（幅広いサポート）またはAVIF（最高の圧縮率）
- スクリーンショット/グラフィック：透過の必要に応じてWebPまたはPNG
- アイコン/ロゴ：可能ならSVGを維持
<picture>要素でWebPを提供し、JPEGフォールバックを設定しましょう。WebPのブラウザサポートは97%以上ですが、フォールバックにコストはかかりません。
ステップ4：SVGを最適化
デザインツールから出力されたSVGファイルには余分なものが多く含まれます — エディタのメタデータ、不要な小数点精度、冗長なグループ、不可視の要素。Illustratorから出力されたSVGの30-50%は不要なデータです。
SVG最適化ツールを通すとファイルサイズが激減します。15KBのアイコンが5KBに。ページに20個のアイコンがあれば、200KBのマークアップを節約できます。
ステップ5：小さなアセットはBase64で
非常に小さな画像（2KB以下）— アイコン、箇条書きの点、小さな装飾要素 — はBase64に変換してインラインで埋め込むと、HTTPリクエストを一つ完全に省けます。
リクエスト1つ削減 > HTMLが少し大きくなる。ただし、小さな画像に限ります。CSSに50KBのBase64文字列が入ると、別リクエストより悪くなります。
経験則：2KB以下？Base64。2KB超？別ファイル。
実際の数字：ケーススタディ
出発点：カテゴリページの商品画像12枚。
| ステージ | 合計サイズ | 削減率 | |---------|-----------|--------| | オリジナルPNG | 45MB | — | | リサイズ後（800px） | 2.1MB | 95.3% | | 圧縮後（80%） | 680KB | 98.5% | | WebP変換後 | 450KB | 99.0% |
45MBから450KBに。同じ視覚品質。ページの読み込みが12秒から1.2秒に。
実践パイプライン
画像のバッチ処理では、ワークフローは機械的に進みます：
- リサイズ — 目標サイズに調整
- 圧縮 — 適切な品質設定で
- 変換 — WebP/AVIFへ
- 最適化 — SVGアセット
- Base64エンコード — 小さなアイコン
3回やれば、1ページ分の画像を5分で処理できるようになります。
忘れずに：遅延読み込み
最適化はファイルサイズで終わりではありません。ファーストビュー以下の画像にloading="lazy"を追加してください。ブラウザはユーザーがスクロールして近づくまでダウンロードしません。無料のパフォーマンス向上です。
画像最適化は華やかではありません。JPEG圧縮にワクワクするという記事を書く人はいないでしょう。しかし、ほとんどのサイトが実施できるパフォーマンス改善の中で、最もインパクトが大きいものです。小さな画像は速いページ、満足なユーザー、低い帯域幅コストを意味します。本番環境にアップロードする前に、すべての画像をパイプラインに通してください。