Webサイトの表示が遅い原因の多くは、サイズの大きい画像ファイルです。写真を撮ってそのままアップロードしてしまうと、1枚で数MBになることもあります。適切に圧縮するだけで表示速度が大きく改善します。

この記事では画像圧縮の仕組みと、JPG・PNG・WebPそれぞれの特性に合った使い方を解説します。

画像圧縮とは？

画像圧縮とは、画像ファイルのサイズを小さくする処理です。ファイルサイズを減らすことで、Webページの読み込みが速くなり、通信量が減り、サーバーのストレージ節約にもつながります。

圧縮方法には大きく2種類あります。

  • 可逆圧縮（ロスレス）：データを1ビットも失わずに圧縮。画質は変わらないが圧縮率は低め。PNGが代表的
  • 非可逆圧縮（ロッシー）：人間の目には気づきにくい情報を削ることで大幅に圧縮。JPGやWebPで使われる

フォーマット別の特性と使い分け

JPG（JPEG）

  • 写真・グラデーションを含む画像に最適
  • 非可逆圧縮のため、品質を下げるほどファイルが小さくなる
  • 透過（アルファチャンネル）は使えない
  • 品質80〜85%前後が画質とサイズのバランスが良い

PNG

  • ロゴ・アイコン・スクリーンショットなど、エッジがくっきりした画像に最適
  • 可逆圧縮のため何度保存しても画質劣化なし
  • 透過（透明背景）が使える
  • 写真に使うとJPGより大幅にサイズが大きくなる

WebP

  • Googleが開発した次世代フォーマット
  • JPGと同等の画質でファイルサイズを約25〜35%削減できる
  • 透過にも対応しており、PNGの代替としても使える
  • 主要ブラウザはすべて対応済み（2024年時点）

どのフォーマットを選べばよいか

用途推奨フォーマット
写真・背景画像WebP（最優先）、JPG
透明背景のロゴ・アイコンWebP、PNG
スクリーンショット・テキスト入り画像PNG
アニメーションWebP、GIF（互換性優先のとき）

圧縮率の目安

スマートフォンで撮影した写真（8MB前後）を圧縮した場合のざっくりとした目安です。

  • 品質90%のJPG：1〜2MB程度
  • 品質80%のJPG：500KB〜1MB程度
  • WebP（品質80%相当）：300〜700KB程度

Webサイト掲載用の画像であれば、200KB以下を目標にするとページ速度に与える影響が小さくなります。

表示サイズに合わせてリサイズする

圧縮と同じくらい重要なのが「リサイズ」です。横幅500pxで表示するエリアに3000px幅の画像を置くと、ブラウザは縮小表示しますがデータは3000pxのまま転送されます。表示に必要な解像度（スマホなら2倍程度）にリサイズするだけで大幅な軽量化が可能です。

よくある質問（FAQ）

圧縮すると画質が下がりますか？
非可逆圧縮（JPG・WebP）は設定によっては画質が下がります。ただし品質80〜85%前後では人間の目にはほぼ気づかないレベルに抑えられます。可逆圧縮（PNG）は画質劣化がありません。圧縮ツールでプレビューを確認しながら調整するのが確実です。
WebPに変換しても古いブラウザで表示できますか？
WebPは2024年時点で主要ブラウザのほぼすべてで対応済みです。古いIE（Internet Explorer）は非対応ですが、IEは2022年にサポート終了しているため実用上は問題ありません。不安な場合はHTMLの<picture>タグを使ってWebPとJPGを切り替えるコードを書くことで古い環境にも対応できます。
SVG画像は圧縮できますか？
SVGはXMLベースのテキストファイルなので、JPGやPNGとは異なるアプローチが有効です。SVGコード内の不要なコメントやメタデータを削除する「SVGの最適化」と、gzip圧縮（サーバー設定）の組み合わせが一般的です。

まとめ

  • 画像圧縮には可逆（PNG）と非可逆（JPG・WebP）の2種類がある
  • 写真にはWebPかJPG、透過やロゴにはWebPかPNGが向いている
  • Web掲載用は200KB以下を目標に、表示サイズに合わせたリサイズも忘れずに
  • 品質80〜85%前後のJPG・WebPなら目視でほぼ劣化がわからない

ブラウザだけで画像を圧縮・変換・リサイズできるツールをご活用ください。