ウェブサイト向け画像圧縮ガイド（スピード改善）
サイトに速度の問題がある。原因はほぼ間違いなく画像だ。
画像はほとんどのウェブページの総重量の半分以上を占める。最適化されていない写真1枚が、HTML、CSS、JavaScriptすべてを合わせたものより大きいこともある。その余分な重さがページの読み込みを遅くし、訪問者をイライラさせ、検索ランキングを下げる。
良いニュースは？画像の圧縮は速くて簡単で、効果は劇的だ。このガイドでは、ウェブ向けの画像圧縮方法を詳しく解説する。正しい設定、正しいフォーマット、そして目に見える品質低下なしで最小のファイルを得るための正しいワークフロー。
なぜ未圧縮の画像はサイトを遅くするのか？
誰かがページにアクセスするたびに、ブラウザはすべての画像をダウンロードする。大きなファイルはダウンロードに時間がかかる。長いダウンロードは遅いページを意味する。
典型的な数字を見てみよう。カメラから直接の写真は5-8MBかもしれない。Retinaディスプレイのスクリーンショットは2-3MBになりうる。FigmaやCanvaなどのデザインツールからエクスポートした画像でも500KB-1MBになることが多い。
これをページ上の画像数で掛け算してみよう。最適化されていない5枚の写真があるブログ記事は、画像だけで15-25MBにもなりうる。モバイル接続では読み込みに10秒以上かかる。ほとんどの訪問者は3秒で離脱する。
Googleのデータによると、ページ読み込み時間が1秒から3秒に増えると、離脱率は32%増加する。1秒から5秒では90%増加する。重い画像がページをこれらの閾値を超えさせる主な原因だ。
圧縮がこれを解決する。適切に圧縮された画像はオリジナルとほぼ同じ見た目で、重さは80-95%減る。あの5MBの商品写真が150KBになる。ページは8秒ではなく2秒で読み込まれる。
ウェブ画像にはどの品質設定を使うべき？
品質スライダーは画像圧縮で最も重要な設定だ。高すぎるとファイルは大きいまま。低すぎると見栄えが悪い。ちょうどいい値の見つけ方がこれだ。
写真（商品写真、ブログ画像、背景）には75-85%の品質を使おう。この範囲では、JPEGとWebPファイルはオリジナルより80-90%小さくなる。品質の差は画面上でほとんどの人にはわからない。
85%では、オリジナルとの違いはわからない。75%では、非常に詳細な部分にわずかなソフトさがあるかもしれないが、ほとんど気づかない。60%以下になるとアーティファクトが目立ち始める。エッジ周りのブロック状のパターン。グラデーションの色の帯。ぼやけた細部。
グラフィックやイラスト（アイコン、ロゴ、ダイアグラム）には非可逆圧縮を使わない。シャープなエッジとテキストにはPNGを使おう。ファイルサイズが重要なら、ロスレスWebPに変換する。ロスレスWebPは通常、同じPNGより25%小さい。
スクリーンショットにはPNGまたは品質90%以上のWebPを使おう。スクリーンショット内のテキストは圧縮しすぎるとぼやける。読めるテキストを含むスクリーンショットは、高品質を維持するかロスレスを使おう。
クイックリファレンス表：
| 画像タイプ | フォーマット | 品質 | 予想サイズ |
|---|---|---|---|
| 商品写真 | WebPまたはJPEG | 75-85% | 50-200 KB |
| ブログヒーロー画像 | WebPまたはJPEG | 80-85% | 100-200 KB |
| サムネイル | WebPまたはJPEG | 70-80% | 15-50 KB |
| ロゴ/アイコン | PNGまたはSVG | ロスレス | 5-30 KB |
| スクリーンショット | PNGまたはWebP | 90-100% | 100-400 KB |
これらの目標はほとんどのサイトで機能する。画像1枚あたり200KB以下を目指し、可能なら100KB以下に。
圧縮前に画像をリサイズすべき？
はい。常に。リサイズは最大のファイルサイズ削減効果があり、ほとんどの人がスキップしている。
なぜこれが重要か。モダンスマートフォンの写真は4000x3000ピクセルだ。ブログでは800px幅で表示する。つまり画面が必要とする15倍のピクセルを送信していることになる。余分なデータはすべてダウンロードされて捨てられる。
まず画像を表示サイズにリサイズする。それから圧縮する。結果は劇的だ。
あの5MBの4000x3000写真を例に：
- 1200px幅にリサイズ（ほとんどのブログに最適）：~1MBに削減
- WebP品質80%で圧縮：~100KBに削減
- メタデータを削除：さらに20-30KB節約
最終結果：約80KB。元の5MBから98%削減だ。
Retinaスクリーン向けには、表示サイズの2倍で配信しよう。ブログのカラムが600px幅なら、1200pxにリサイズする。追加のピクセルが高密度スクリーンで画像をシャープに見せるが、4000pxのフルサイズほど無駄にはならない。
レスポンシブ画像も忘れずに。srcsetを使って異なる画面幅に異なるサイズを配信しよう。375px画面のモバイルユーザーに1200pxの画像は不要だ。
<img
src="/photo-800.webp"
srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="商品写真"
>
これがすべてのデバイスに適切なサイズの画像を配信する。モバイルユーザーは小さいファイルを受け取る。デスクトップユーザーはフル品質を受け取る。全員がより速いページを得る。
ウェブサイトの速度に最適な画像フォーマットは？
フォーマットの選択はファイルサイズに大きな影響がある。同じ写真を異なるフォーマットで保存すると、50%以上の差が出ることがある。
WebPは現在のウェブ画像に最適な万能選択肢だ。JPEGより25-35%効率よく圧縮できる。可逆・非可逆の両方に対応。透明度もサポート。そして97%以上のブラウザが対応。
JPEGは写真で今も最も広く使われているフォーマットだ。圧縮性能が良く、どこでも動作する。WebPに切り替える準備ができていなければ、75-85%品質のJPEGはまだ良い選択肢だ。
PNGは透明度やピクセルパーフェクトな精度が必要な画像に最適。ロゴ、アイコン、テキスト付きスクリーンショット。ただしPNGファイルは写真の場合、同等のJPEGの3-5倍大きい。写真にPNGは使わないように。
AVIFは利用可能な最高の圧縮率を提供する。JPEGの最大50%小さい。ただしエンコードが遅く、ブラウザサポートはまだ完全ではない。スタックが対応しているならテストする価値がある。
各フォーマットの仕組みについてより深く知りたい場合は、画像圧縮の完全ガイドを参照しよう。可逆vs非可逆、各フォーマットの使い分け、よくある間違いの回避方法をカバーしている。
大量の画像を効率的にバッチ圧縮する方法
1枚ずつの圧縮はクイックフィックスには良い。しかしサイト全体を最適化するなら、より速いワークフローが必要だ。
オプション1：オンラインバッチ圧縮ツールを使う。 CompressIMGのようなツールでは最大20枚を一度にアップロードできる。品質を設定し、圧縮して、ZIPでダウンロード。インストール不要。アカウント不要。
ほとんどの人にとって最速のオプションだ。ブログ画像をアップロードし、品質を80%に設定して、圧縮バッチをダウンロード。全プロセスが1分もかからない。
オプション2：ビルドツールで自動圧縮する。 開発者なら、ビルドパイプラインに画像最適化を追加しよう。Next.js、Astroなどのフレームワークには画像最適化が組み込まれている。ビルド時またはリクエスト時に画像を自動でリサイズ、圧縮、変換する。
オプション3：自動ワークフロー用にAPIを使う。 サイトがユーザーアップロードを処理したりCMSから画像を取得する場合、圧縮を自動化したい。画像圧縮APIがプログラムでファイルを処理する。手動のステップは不要。
オプション4：自動最適化機能付きCDNを使う。 Cloudflare、Imgix、Cloudinaryなどのサービスは画像をオンザフライで圧縮・リサイズできる。オリジナルをアップロードすると、CDNが訪問者のデバイスとブラウザに基づいて最適化されたバージョンを配信する。
コンテンツ中心のサイトなら、オプション1で十分だ。画像をアップロードして圧縮すれば完了。頻繁に更新がある大規模サイトでは、オプション2-4がプロセスを自動化して時間を節約する。
TinyPNG、Squoosh、CompressIMGの比較では、どのツールがどのワークフローに合うかを解説している。バッチ処理に対応するものもある。設定を細かくコントロールできるものもある。自分の作業スタイルに合ったものを選ぼう。
画像タイプ別のターゲットファイルサイズ
良い目標があれば、画像が「完了」したかどうかわかる。現実的なベンチマーク：
ヒーロー画像と全幅バナー： 200KB以下。ページ上で最も大きい画像で、通常LCP要素だ。200KB以下に抑えることでCore Web Vitalsスコアを改善できる。
ブログ記事の画像： 100KB以下。テキストカラム内のコンテンツ画像は巨大である必要はない。800-1200px幅で品質80%なら簡単にこの目標を達成できる。
商品サムネイル： 50KB以下。グリッドやカルーセルで表示される小さな画像。表示サイズ（多くの場合300-400px）にリサイズして70-80%で圧縮しよう。
アイコンとロゴ： 20KB以下。色数の少ないシンプルなグラフィック。可能ならSVGを使う。そうでなければPNGかロスレスWebP。
ページの画像総重量： 初期ビューポートで500KB以下。ファーストビュー以下のlazy load画像は初期読み込みにはカウントされないが、転送データの合計には影響する。
Google PageSpeed Insightsはさらに最適化できる画像を検出する。圧縮後にテストを実行して、まだ作業が必要な画像がないか確認しよう。「次世代フォーマットで画像を配信」という提案は、JPEGやPNGからWebPやAVIFに切り替えるべきだという意味だ。
画像を圧縮すると品質は下がるのか？
最もよくある心配だ。そして正直な答えは：技術的にはイエス。しかし視覚的にはノーだ。
非可逆圧縮はデータを削除する。それがファイルを小さくする仕組みだ。しかしモダンなアルゴリズムは何を削除するか賢く判断する。目に見えないディテールを削除する。微細な色の変化。サブピクセルパターン。コンピュータには意味があるが人間には意味がないデータ。
品質80%では、圧縮されたJPEGやWebPは画面上でオリジナルと視覚的に同一だ。400%にズームインしてピクセルごとに比較しなければ違いは見つからない。訪問者が気づくことはない。
アーティファクトが目に見えるようになる品質レベルは画像の内容による。滑らかなグラデーションの写真はシャープなエッジとテキストの画像よりも多くの圧縮に耐える。だから推奨品質は画像タイプによって異なる。
重要なルール：常に最高品質のソースから始めること。すでに圧縮されたJPEGを再圧縮してはいけない。非可逆圧縮の各サイクルは品質をさらに劣化させる。オリジナルから1回だけ圧縮すれば、品質は優秀なままだ。
ダウンロード前に結果を確認するために、サイドバイサイドプレビュー付きのツールを使おう。CompressIMGではオリジナルと圧縮画像をスライダーで比較できる。違いが見えたら品質を上げる。見えなければ完了だ。
サイトを高速化する準備はできた？
画像圧縮はサイトを速くする最も手軽な方法だ。数分で完了し、コストはかからず、改善は測定可能だ。
まず最も大きな画像から始めよう。ヒーローバナー、商品写真、ブログ画像。表示サイズにリサイズする。75-85%品質で圧縮する。可能ならWebPに変換する。
CompressIMGならすべてブラウザ内で完結する。最大20枚をアップロードし、品質を設定して、最適化されたファイルをダウンロード。アカウント不要。
速いサイトは訪問者を満足させ、検索ランキングを上げ、コンバージョンを増やす。画像は最も手軽な改善ポイントだ。