画像圧縮の方法 — 画質を落とさずファイルサイズを小さく

画像のファイルサイズを画質を維持しながら小さくする方法を解説。JPEG・PNG・WebPの最適な圧縮設定から、無料で使えるオンラインツールまで。

なぜ画像圧縮が重要なのか

Webサイトの表示速度において、画像は最も大きな影響を与える要素です。HTTPArchiveの調査によると、Webページの平均的な転送量のうち約50%が画像です。

画像圧縮のメリット

ページ表示速度の向上 — Core Web Vitals（LCP）のスコア改善
ストレージ容量の節約 — クラウドストレージやサーバーの使用量削減
通信量の削減 — モバイルユーザーのデータ通信量を節約
メール添付 — 添付ファイルの容量制限（多くは25MB）をクリア
SEO効果 — Googleはページ速度をランキング要因として考慮

画像圧縮の基礎知識

可逆圧縮と非可逆圧縮

画像圧縮には2つのアプローチがあります。

種類	説明	対応フォーマット	圧縮率
可逆圧縮（Lossless）	画質劣化なし。元に戻せる	PNG, WebP, AVIF	低〜中
非可逆圧縮（Lossy）	画質が若干劣化。元に戻せない	JPEG, WebP, AVIF	中〜高

画像フォーマットごとの特徴

JPEG（.jpg / .jpeg）

特徴: 写真に最適。非可逆圧縮のみ
品質設定: 0〜100（80前後が品質とサイズのバランスが良い）
透過: 非対応
適したコンテンツ: 写真、グラデーションのある画像

PNG（.png）

特徴: イラスト・スクリーンショットに最適。可逆圧縮
透過: 対応（アルファチャンネル）
適したコンテンツ: ロゴ、アイコン、テキストを含む画像、スクリーンショット

WebP（.webp）

特徴: Googleが開発した次世代フォーマット。可逆・非可逆両対応
圧縮率: JPEGより約25〜34%小さい
透過: 対応
ブラウザ対応: 主要ブラウザすべて対応（2026年現在）

AVIF（.avif）

特徴: 最新の高効率フォーマット。AV1ベース
圧縮率: JPEGより約50%小さい
透過: 対応
ブラウザ対応: Chrome, Firefox, Safari（16.4以降）

品質を落とさず圧縮する5つのテクニック

1. 適切なフォーマットを選ぶ

コンテンツに合わないフォーマットを使うと、無駄にファイルサイズが大きくなります。

写真 → JPEG（品質80）or WebP（品質75）
イラスト・ロゴ → PNG or SVG
スクリーンショット → PNG or WebP（可逆）
アニメーション → WebP or GIF

2. 解像度を必要最小限にする

ディスプレイに表示されるサイズ以上の解像度は無駄です。

用途	推奨幅
サムネイル	300〜400px
ブログ記事内	800〜1200px
ヒーロー画像	1600〜2000px
OGP画像	1200×630px

Retina対応が必要な場合は、表示サイズの2倍を用意します。

3. メタデータを除去する

写真にはEXIFデータ（撮影日時、GPS情報、カメラ設定など）が含まれています。これを除去するだけで**10〜20%**サイズを削減できることがあります。

プライバシーの観点からもEXIF削除は推奨
特にGPS情報は位置情報の漏洩リスクがある

4. JPEG品質の最適値を見つける

JPEG品質の目安は以下の通りです。

品質	用途	見た目への影響
90〜100	印刷用、高品質が必要	ほぼ劣化なし
75〜85	Web用（おすすめ）	ほとんど気にならない
60〜74	サムネイル、プレビュー	よく見ると若干劣化
50以下	極限まで小さくしたい	明らかに劣化

品質80がWeb用途では最もバランスが良いとされています。品質100→80にするだけで、ファイルサイズが60〜70%削減されることもあります。

5. 次世代フォーマット（WebP/AVIF）に変換する

同じ見た目の品質を維持しながら、フォーマット変換だけで大幅にサイズ削減できます。

元画像: photo.jpg (500KB, 品質85)
↓ WebPに変換（品質80）
photo.webp (180KB) — 約64%削減

↓ AVIFに変換（品質65）
photo.avif (120KB) — 約76%削減

無料で使える画像圧縮ツール

オンラインツール

ツール	特徴	一括処理	フォーマット変換
Squoosh（Google）	圧縮前後の比較が見やすい	×	○
TinyPNG	PNG/JPEGの圧縮に特化	○（20枚まで）	×
Assisty	ブラウザ完結で安全	○	○

デスクトップソフト

ツール	OS	特徴
ImageOptim	Mac	ドラッグ&ドロップで一括圧縮
RIOT	Windows	JPEG/PNG/GIF対応
GIMP	全OS	高機能だが操作が複雑

コマンドラインツール

# jpegoptim（JPEG圧縮）
jpegoptim --max=80 --strip-all image.jpg

# pngquant（PNG圧縮）
pngquant --quality=65-80 image.png

# cwebp（WebP変換）
cwebp -q 80 image.jpg -o image.webp

# avifenc（AVIF変換）
avifenc --min 20 --max 40 image.png image.avif

Webサイトでの画像最適化ベストプラクティス

レスポンシブ画像の設定

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文" loading="lazy"
       width="800" height="600">
</picture>

遅延読み込み（Lazy Loading）

画面外の画像は遅延読み込みを設定して、初期表示速度を改善します。

<img src="image.jpg" loading="lazy" alt="説明文">

CDNの画像最適化サービス

Cloudflare ImagesやCloudinary、imgixなどのCDNサービスを使えば、URLパラメータで自動的に最適な形式・サイズに変換できます。

よくある失敗パターン

1. PNGで写真を保存

写真をPNGで保存すると、JPEGの3〜5倍のファイルサイズになることがあります。写真は必ずJPEGまたはWebPで保存しましょう。

2. 何度もJPEG再保存

JPEGを開いて編集して保存を繰り返すと、そのたびに画質が劣化します（世代劣化）。編集用には元画像をPNG等で保持し、最終出力時にJPEGにすると良いです。

3. 巨大な画像をCSSで縮小

4000×3000pxの画像をCSSで400×300pxに縮小表示しても、ブラウザは元の巨大な画像をダウンロードします。事前にリサイズしましょう。

まとめ

画像圧縮で最も効果的なのは以下の3ステップです。

適切なフォーマットを選ぶ（写真→JPEG/WebP、イラスト→PNG/SVG）
必要な解像度にリサイズする
品質80前後で圧縮する（WebP/AVIFならさらに効果的）

この3つだけで、多くの場合は元のサイズから50〜80%の削減が可能です。

画像のリサイズ・圧縮・フォーマット変換は Assistyの画像リサイズツール で簡単に行えます。ブラウザ完結なので、画像がサーバーに送信されることはありません。