結論: 画像圧縮の最適解は「ロッシー圧縮 + 次世代フォーマット（WebP/AVIF）」の組み合わせだ。JPEGは品質80%、WebPは品質75-80%に設定すれば、肉眼で劣化が分からないレベルで元サイズの50〜90%を削減できる。ToolShare Labの画像圧縮ツールを使えば、ブラウザ内で即座に圧縮可能。サーバーへの送信なし、無料・無制限。
なぜ画像圧縮が重要なのか
画像圧縮は「ファイルサイズを小さくする」という単純な作業に見えるが、実はWebサイトのパフォーマンス、ユーザー体験、そしてSEOに直結する極めて重要な工程だ。
Core Web Vitalsへの影響
GoogleはCore Web Vitalsをランキング要因として使用している。中でもLCP（Largest Contentful Paint）は、ページ内の最大要素が表示されるまでの時間を測定する指標で、多くのページではヒーロー画像やアイキャッチ画像がLCPの対象要素になる。画像サイズが大きいとLCPが遅延し、検索順位に悪影響を与える。
| LCPスコア |
評価 |
画像サイズの目安 |
| 2.5秒以内 |
良好（Good） |
200KB以下 |
| 2.5〜4.0秒 |
改善が必要 |
200〜500KB |
| 4.0秒超 |
不良（Poor） |
500KB超 |
モバイルユーザーへの配慮
日本のWebトラフィックの約70%はモバイルからだ。4G回線でも帯域幅は限られており、未圧縮の大きな画像は読み込みに数秒かかることがある。Googleの調査によると、表示に3秒以上かかるページからは53%のユーザーが離脱する。画像圧縮はモバイルユーザーの離脱を防ぐ最も効果的な施策の一つだ。
サーバーコストの削減
画像サイズを50%削減すれば、転送量も半減する。月間100万PVのサイトでページあたり平均2MBの画像を配信している場合、画像を1MBに圧縮するだけで月間約1TBの転送量を節約できる。クラウドホスティングでは転送量に応じた課金が一般的なため、直接的なコスト削減につながる。
まず画像圧縮から始めよう
PageSpeed Insightsで「次世代フォーマットでの画像の配信」「適切なサイズの画像」「画像を効率的にエンコードする」の指摘が出ている場合、画像圧縮だけで大幅なスコア改善が期待できる。他のパフォーマンス施策より費用対効果が高い。
ロスレス圧縮 vs ロッシー圧縮
画像圧縮には大きく分けて2つの方式がある。それぞれの仕組みと使い分けを理解することが、最適な圧縮を行う第一歩だ。
ロスレス（可逆）圧縮
ロスレス圧縮は、データを一切失わずにファイルサイズを削減する方式だ。圧縮後のファイルを展開すると、元のファイルと完全に同一のデータが復元される。ZIPファイルの圧縮と同じ原理だ。
画像のロスレス圧縮では、連続する同じ色のピクセルをまとめて表現する「ランレングス符号化」や、出現頻度の高いパターンに短い符号を割り当てる「ハフマン符号化」などが使われる。PNG形式のDeflate圧縮がその代表例だ。
| 項目 |
ロスレス圧縮 |
| 圧縮率 |
10〜50%程度（画像内容に依存） |
| 画質 |
劣化なし（完全復元可能） |
| 主な用途 |
ロゴ、アイコン、スクリーンショット、医療画像 |
| 対応フォーマット |
PNG、WebP（lossless）、AVIF（lossless）、GIF |
ロッシー（非可逆）圧縮
ロッシー圧縮は、人間の目には知覚しにくい情報を削除することでファイルサイズを大幅に削減する方式だ。元のデータは完全には復元できないが、適切な品質設定であれば肉眼では劣化を判別できない。
JPEG圧縮を例にすると、画像をRGBからYCbCr色空間に変換し、人間の目が敏感でない色差成分（Cb、Cr）のデータ量を減らす「クロマサブサンプリング」を行う。さらにDCT（離散コサイン変換）で周波数成分に変換し、高周波成分（細かいディテール）を量子化で間引く。品質設定はこの量子化の強さを制御するパラメータだ。
| 項目 |
ロッシー圧縮 |
| 圧縮率 |
50〜95%（品質設定に依存） |
| 画質 |
品質設定により調整可能 |
| 主な用途 |
写真、バナー、ブログ画像、EC商品画像 |
| 対応フォーマット |
JPEG、WebP（lossy）、AVIF（lossy） |
どちらを選ぶべきか
| 画像の種類 |
推奨圧縮方式 |
理由 |
| 写真・自然画像 |
ロッシー |
高圧縮率で劣化が目立ちにくい |
| スクリーンショット |
ロスレス or 高品質ロッシー |
テキストのにじみを防ぐ |
| ロゴ・アイコン |
ロスレス（またはSVG） |
エッジの鮮明さを維持 |
| グラデーション画像 |
高品質ロッシー（85%以上） |
バンディング（階調の段差）を防ぐ |
| EC商品画像 |
ロッシー（80〜85%） |
色再現と圧縮率のバランス |
ロッシー圧縮の再圧縮に注意
ロッシー圧縮済みの画像を再度ロッシー圧縮すると、劣化が蓄積して画質が著しく低下する。編集用には必ず元画像（RAW、PSD、PNG等）を保存しておき、配信用ファイルはそこから毎回書き出す運用にすること。「JPEGを開いて編集してJPEGで保存」を繰り返すのは禁物だ。
フォーマットの選択は画像圧縮において最も重要な判断の一つだ。同じ画像でもフォーマットが違うだけでファイルサイズが2〜5倍変わることがある。
JPEG — 写真の定番フォーマット
JPEGは1992年に策定された歴史あるフォーマットだが、今でも写真やグラデーション画像の圧縮では優秀な選択肢だ。特にmozjpeg（Mozillaが開発した改良版JPEGエンコーダー）を使えば、標準のJPEGエンコーダーより10〜15%小さいファイルを生成できる。
| 品質設定 |
ファイルサイズ（目安） |
見た目 |
用途 |
| 95〜100% |
大きい |
ほぼ原画 |
印刷用、マスターデータ |
| 80〜85% |
中程度 |
劣化ほぼ見えない |
ブログ、EC、一般的なWeb用途 |
| 60〜75% |
小さい |
よく見ると劣化あり |
サムネイル、プレビュー |
| 40〜55% |
とても小さい |
明確に劣化 |
低帯域環境向けフォールバック |
JPEG品質80%が黄金比率
品質80%はファイルサイズと画質のバランスが最も良いポイントとして広く知られている。80%から100%に上げてもファイルサイズは2〜3倍になるのに、見た目の改善はほとんどない。逆に80%から60%に下げると、ブロックノイズやバンディングが目立ち始める。迷ったら80%を基準にする。
PNG — ロゴ・スクリーンショットに最適
PNGはロスレス圧縮をサポートするフォーマットで、テキストを含むスクリーンショット、透過が必要なロゴ、エッジが鮮明なイラストに最適だ。ただし写真を保存するとJPEGの3〜10倍のファイルサイズになるため、写真には使わない。
PNGの最適化には2つのアプローチがある。
ロスレス最適化（oxipng等）: 圧縮パラメータを最適化してファイルサイズを削減する。画質は一切変わらない。元サイズの5〜30%程度の削減が可能。
ロッシー最適化（pngquant/imagequant等）: 24bitカラー（約1600万色）を8bitカラー（256色）に減色する。色数の少ないイラストやアイコンなら見た目の変化なく、ファイルサイズを60〜80%削減できる。写真のような色数の多い画像では劣化が目立つ。
WebP — 現在のベストバランス
WebPはGoogleが開発した次世代画像フォーマットで、ロッシーとロスレスの両方をサポートする。2024年時点で全主要ブラウザ（Chrome、Firefox、Safari、Edge）に対応しており、現時点で最もバランスの良いフォーマットだ。
| 比較対象 |
WebPの圧縮率 |
補足 |
| vs JPEG（同品質） |
25〜35%小さい |
写真・グラデーションで特に有効 |
| vs PNG（ロスレス） |
26%小さい（Google公称） |
スクリーンショットやイラスト向け |
| vs GIF（アニメーション） |
64%小さい |
アニメーション対応、24bitカラー |
WebPのロッシー圧縮は品質75〜80%で、JPEG品質85%相当の見た目を維持しながら、ファイルサイズを大幅に削減できる。さらに透過（アルファチャンネル）もサポートしているため、「透過が必要だからPNG」という場面でもWebPが使える。
迷ったらWebPを選べ
現在のWeb制作において、画像フォーマットに迷ったらWebPを選べば間違いない。ブラウザ対応率は96%以上。JPEG/PNGからの変換だけで25〜50%のファイルサイズ削減が見込める。これが最もコストパフォーマンスの高い画像最適化施策だ。
AVIF — 最新・最高圧縮フォーマット
AVIFはAV1動画コーデックから派生した画像フォーマットで、現時点で最も高い圧縮効率を持つ。Chrome、Firefox、Safari（iOS 16+/macOS Ventura+）で対応済みだ。
| 比較対象 |
AVIFの圧縮率 |
補足 |
| vs JPEG（同品質） |
50%以上小さい |
特に低〜中ビットレートで差が顕著 |
| vs WebP（同品質） |
20〜30%小さい |
写真で特に効果大 |
AVIFのメリットは圧倒的な圧縮率だが、エンコード速度がWebPやJPEGより遅い点がデメリットだ。リアルタイム変換には向かないが、事前に変換しておく用途（ブログ画像、EC商品画像等）では問題にならない。
AVIFのブラウザ対応状況を確認
AVIFのブラウザ対応率は2026年時点で約93%。IE11はもちろん非対応だが、古いSafariバージョンでも非対応の場合がある。HTMLの<picture>要素を使って、AVIF → WebP → JPEG/PNGの順でフォールバックを設定するのが安全だ。
フォーマット選択フローチャート
| 条件 |
推奨フォーマット |
理由 |
| 写真・グラデーション |
AVIF > WebP > JPEG |
圧縮率が高い順 |
| 透過が必要 |
WebP > AVIF > PNG |
PNG比で大幅にサイズ削減 |
| テキスト・スクリーンショット |
WebP(lossless) > PNG |
テキストの鮮明さを維持 |
| ロゴ・アイコン（単色・少色） |
SVG |
ベクター形式で拡大しても劣化なし |
| アニメーション |
WebPアニメーション > GIF |
GIF比で64%以上軽量 |
実践: ToolShare Labで画像を圧縮する
理論を理解したら、実際に画像を圧縮してみよう。ToolShare Labの画像圧縮ツールを使えば、インストール不要でブラウザから即座に圧縮できる。
ステップ1: 画像をアップロード
画像圧縮ツールにアクセスし、圧縮したい画像をドラッグ&ドロップするか、ファイル選択ボタンから画像を選ぶ。複数ファイルを一括で処理することも可能だ。JPEG、PNG、WebP、AVIF、GIF、BMP、TIFFなどの主要フォーマットに対応している。
ステップ2: 出力フォーマットと品質を選択
出力フォーマット（WebP推奨）と品質レベルを選択する。デフォルト設定はWeb用途に最適化されているので、こだわりがなければそのまま圧縮してもOKだ。
| 用途 |
推奨設定 |
| ブログ・記事画像 |
WebP、品質75〜80% |
| EC商品画像 |
WebP、品質80〜85% |
| SNS投稿用 |
JPEG、品質80%（互換性重視） |
| アイコン・ロゴ |
WebP lossless または PNG |
ステップ3: ダウンロード
圧縮が完了すると、元サイズと圧縮後サイズ、削減率が表示される。圧縮後の画像をダウンロードする前に、プレビューで画質を確認しよう。劣化が気になる場合は品質設定を上げて再度圧縮する。
プライバシーが守られる仕組み
ToolShare Labの画像圧縮ツールは、すべての処理をブラウザ内（JavaScript + WebAssembly）で実行する。画像がサーバーに送信されることは一切ない。社外秘のスクリーンショットや個人情報を含む画像でも安心して圧縮できる。
用途別 品質設定の目安表
品質設定は「高ければ高いほどいい」というものではない。用途に応じた最適値を把握しておくことで、無駄なファイルサイズの増加を防げる。
| 用途 |
JPEG品質 |
WebP品質 |
目標サイズ/枚 |
備考 |
| ブログ記事画像 |
75〜82% |
70〜80% |
50〜150KB |
可読性よりもロード速度を優先 |
| EC商品画像 |
82〜88% |
78〜85% |
100〜250KB |
色再現の正確さが重要 |
| ポートフォリオ |
85〜92% |
82〜88% |
150〜400KB |
作品の質を正確に伝える |
| SNS投稿用 |
78〜85% |
75〜82% |
100〜300KB |
プラットフォーム側でも再圧縮される |
| サムネイル |
65〜75% |
60〜72% |
10〜50KB |
小さいので劣化が目立ちにくい |
| 印刷原稿 |
95〜100% |
— |
制限なし |
TIFF/PSD推奨。圧縮は最小限 |
| OGP/Twitterカード |
80% |
—（JPEG推奨） |
100〜200KB |
1200x630px、JPEG形式 |
品質100%は「無圧縮」ではない
JPEG品質100%でも圧縮は行われており、元の非圧縮データとは完全に同一にならない。JPEGの仕組み上、DCT変換と量子化が必ず介在するためだ。完全に無劣化のデータが必要な場合はPNGやTIFFを使う。また、品質95%→100%でファイルサイズは大きく増加するのに、見た目はほぼ変わらないため、95%以上の設定は費用対効果が極めて低い。
画像ファイルには目に見えるピクセルデータ以外に「メタデータ」と呼ばれる付加情報が含まれている。このメタデータがファイルサイズを無駄に大きくしているケースが多い。
メタデータの種類
| 種類 |
内容 |
サイズ目安 |
| EXIF |
カメラ機種、撮影日時、シャッタースピード、ISO感度、GPS位置情報 |
1〜50KB |
| XMP |
Adobe製品の編集履歴、タグ、レーティング |
1〜100KB |
| ICCプロファイル |
色空間情報（sRGB、Adobe RGB等） |
0.5〜4KB |
| サムネイル |
埋め込みプレビュー画像 |
5〜30KB |
| コメント |
ソフトウェア名、著作権情報 |
0.1〜1KB |
プライバシーリスク
特に注意すべきはEXIFに含まれるGPS位置情報だ。スマートフォンで撮影した写真には、撮影場所の緯度・経度が自動的に記録される。この情報をそのままWebにアップロードすると、自宅や勤務先の住所が特定される危険がある。
Web用画像からは、表示に必要ないメタデータを原則としてすべて削除するべきだ。ToolShare Labの画像圧縮ツールは、圧縮と同時にメタデータを自動削除するため、別途ツールを使う必要がない。
メタデータ削除だけで5〜10%軽くなることも
Photoshopで書き出した画像や一眼レフで撮影した写真には、50KB以上のメタデータが含まれていることがある。100KBの画像に50KBのメタデータが付いていたら、メタデータ削除だけで33%のサイズ削減だ。圧縮と合わせて確実に除去しよう。
上級者向けテクニック
HTMLの<picture>要素でフォーマットを出し分ける
<picture>要素を使えば、ブラウザの対応状況に応じて最適なフォーマットを出し分けることができる。AVIFに対応したブラウザにはAVIFを、そうでなければWebPを、それも非対応ならJPEGを配信する。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文"
width="800" height="450"
loading="lazy" decoding="async">
</picture>
レスポンシブ画像（srcset属性）
デバイスの画面幅に応じて適切なサイズの画像を配信することで、モバイルで不要な大きい画像を読み込ませない。
<img srcset="image-400w.webp 400w,
image-800w.webp 800w,
image-1200w.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
src="image-800w.webp"
alt="説明文"
width="1200" height="675"
loading="lazy" decoding="async">
プログレッシブJPEG
通常のJPEGは上から1行ずつ描画されるが、プログレッシブJPEGは全体がぼやけた状態から徐々に鮮明になる方式で描画される。低速回線でもコンテンツの概要がすぐに見えるため、ユーザーの体感速度が向上する。mozjpegはデフォルトでプログレッシブJPEGを出力する。
画像CDNの活用
大量の画像を配信するサイトでは、画像CDN（Cloudinary、imgix、Cloudflare Images等）の導入を検討すべきだ。画像CDNはオリジナル画像をアップロードするだけで、リクエスト元のデバイスとブラウザに最適なフォーマット・サイズの画像を自動配信してくれる。自前でフォーマット出し分けやリサイズを管理する手間が不要になる。
バッチ処理の自動化
数百枚の画像を一括で圧縮する場合、コマンドラインツールを使った自動化が効率的だ。以下は代表的なCLIツールだ。
| ツール |
フォーマット |
コマンド例 |
| cwebp |
WebP |
cwebp -q 80 input.jpg -o output.webp |
| avifenc |
AVIF |
avifenc --min 20 --max 30 input.png output.avif |
| mozjpeg |
JPEG |
cjpeg -quality 80 input.bmp > output.jpg |
| oxipng |
PNG |
oxipng -o 4 input.png |
Web制作のビルドパイプラインに組み込む
gulp、webpack、Vite等のビルドツールに画像最適化プラグインを組み込めば、ビルド時に自動で圧縮される。手動作業を忘れるリスクがなくなり、チーム全体で統一された品質の画像を配信できる。
まとめ
画像圧縮はWebパフォーマンスを改善する最も費用対効果の高い施策だ。ポイントを整理すると以下の通り。
- フォーマットを選ぶ: 写真はWebP/AVIF、スクリーンショットはWebP(lossless)/PNG、ロゴはSVG
- 品質を設定する: JPEGは80%、WebPは75〜80%が黄金比率
- メタデータを削除する: EXIF（GPS情報含む）を除去してプライバシー保護とサイズ削減
- フォーマット出し分け:
<picture>要素でAVIF → WebP → JPEGのフォールバック
- 目視で品質確認: 圧縮後は必ず見た目を確認し、劣化があれば品質設定を調整
小さな画像最適化の積み重ねが、サイト全体のパフォーマンスを大きく変える。まずは画像圧縮ツールで1枚試してみてほしい。