画像を軽くする方法｜JPEG・PNG・WebPの圧縮を使い分ける実務ガイド
Web サイトの表示が遅い原因の多くは画像です。HTML や CSS が数十 KB で済むのに対し、写真 1 枚が数 MB を占めることは珍しくありません。この記事では、画質の劣化を体感させずにファイルサイズを削る手順を、判断基準つきで整理します。
なぜ画像の軽量化が必要なのか
Google はページ体験の指標として Core Web Vitals を採用しており、そのうち LCP（Largest Contentful Paint） は「最も大きなコンテンツが表示されるまでの時間」を測ります。多くのページでこの「最も大きなコンテンツ」はメインビジュアルの画像です。
つまり、画像が重いページは LCP が悪化し、ユーザーの離脱率が上がるだけでなく、検索評価の面でも不利になります。逆に言えば、画像を軽くするだけで改善できる余地が最も大きい領域でもあります。
軽量化は「3つの操作」の組み合わせ
画像を軽くする方法は、実質的に次の 3 つしかありません。効果が大きい順に並べています。
| 操作 | 内容 | 削減効果 |
|---|---|---|
| リサイズ | 表示サイズより大きい画像を縮小する | 非常に大きい |
| フォーマット変換 | JPEG → WebP など効率の良い形式へ | 大きい |
| 品質（圧縮率）調整 | 同一形式のまま画質を落とす | 中程度 |
多くの人が 3 番目の「品質調整」から手を付けますが、効果が最も大きいのは 1 番目のリサイズです。順番を間違えると、無駄に画質を落とすことになります。
手順1：まず表示サイズまでリサイズする
デジタルカメラやスマートフォンで撮影した写真は、横幅 4000px を超えることがあります。一方、Web ページ上で実際に表示される幅は、本文中の画像であればせいぜい 800px 程度です。
この場合、4000px の画像を送りつけても、ブラウザが縮小して表示するだけです。データ量は無駄になります。
リサイズの目安は次のとおりです。
- 本文中の画像：横幅 800〜1200px
- 記事のアイキャッチ・メインビジュアル：横幅 1200〜1600px
- サムネイル・アイコン：横幅 200〜400px
高解像度ディスプレイ（Retina など）を考慮する場合は、表示幅の 2 倍を上限にします。それ以上大きくしても、人間の目にはほとんど違いが分かりません。
リサイズは画像リサイズ・変換ツールで、ブラウザ上で完結できます。
手順2：用途に合ったフォーマットを選ぶ
フォーマットの選択を間違えると、どれだけ圧縮しても軽くなりません。特に多いのが「写真を PNG で保存している」ケースです。
| フォーマット | 得意な画像 | 透過 | 備考 |
|---|---|---|---|
| JPEG | 写真・グラデーション | 非対応 | 最も互換性が高い |
| PNG | イラスト・図表・スクリーンショット | 対応 | 写真には不向き（肥大化する） |
| WebP | 写真・イラストの両方 | 対応 | JPEG/PNG より高効率 |
PNG は写真に使ってはいけません。 PNG は可逆圧縮（データを一切失わない方式）のため、色数の多い写真を保存すると、JPEG の数倍のサイズになります。逆に、文字やベタ塗りが多いスクリーンショットや図表では、PNG のほうが軽く、かつ文字がにじみません。
判断はシンプルです。
- 写真なら JPEG または WebP
- 図表・スクリーンショット・イラストなら PNG または WebP
- 透過が必要なら PNG または WebP
つまり、迷ったら WebP が有力な選択肢になります。
変換は画像フォーマット変換ツールで行えます。複数ファイルの一括変換にも対応しています。
手順3：品質を調整する
JPEG と WebP は「非可逆圧縮」で、品質パラメータ（0〜100）を下げるほどファイルは軽くなり、同時に画質は劣化します。
実務での目安は次のとおりです。
- 品質 80〜85：ほとんどのケースで最適。劣化はほぼ知覚できず、サイズは大きく減る
- 品質 70〜80：サムネイルなど小さく表示する画像向け
- 品質 60 以下：輪郭のまわりにモヤ（モスキートノイズ）が出やすく、通常は推奨しない
品質 100 は「劣化しない」という意味ではなく、単に圧縮率が最も低いだけです。ファイルサイズの割に画質の見返りが小さいため、Web 用途で選ぶ理由はほとんどありません。
品質を変えながらサイズを比較したい場合は、画像圧縮ツールを使うと、圧縮前後のサイズを並べて確認できます。
どこまで圧縮すべきかの判断基準
「何 KB まで落とせばよいか」という質問はよく聞かれますが、絶対的な正解はありません。実務では次の基準で判断します。
本文中の画像は 100〜200KB 以内、メインビジュアルは 300KB 以内を目標にする。ページ全体の画像合計が 1MB を超えたら見直す。
ただし、これは目安です。商品写真や作品ポートフォリオのように画質そのものが価値になる画像では、サイズを優先して劣化させるべきではありません。用途に応じて基準を変えてください。
よくある失敗
圧縮済みの画像を何度も再圧縮する
JPEG は非可逆圧縮のため、圧縮 → 保存 → 再圧縮を繰り返すと、そのたびに情報が失われて画質が劣化します。編集は必ず元画像から行い、圧縮は最後の 1 回だけにしてください。
width / height 属性を省略する
画像を軽くしても、width と height を指定していないと、読み込み時にレイアウトがずれます。これは Core Web Vitals の CLS（Cumulative Layout Shift） を悪化させます。
<img src="/photo.webp" width="1200" height="800" alt="説明文" loading="lazy" />属性を指定しておくと、ブラウザは画像の読み込み前に表示領域を確保できます。あわせて、ファーストビュー外の画像には loading="lazy" を付けると、初期表示がさらに速くなります。
アップロード先のサービスで画像が外部に送信される
オンラインの画像圧縮サービスの多くは、画像をサーバーへアップロードして処理します。社外秘の資料や、人物が写った写真を扱う場合は注意が必要です。
当サイトのツールはすべてブラウザ内（お使いの端末内）で処理を行い、画像をサーバーへ送信しません。業務用のファイルもそのまま扱えます。
まとめ
- リサイズを最優先で行う。表示幅の 2 倍を上限にする
- 写真は JPEG か WebP、図表は PNG か WebP を選ぶ
- 品質は 80〜85 を基準にする。100 は不要
width/heightとloading="lazy"を必ず指定する- 再圧縮は避け、常に元画像から作業する
この順番で進めれば、画質を保ったままファイルサイズを大幅に削減できます。