画質を落とさずに画像を圧縮する方法 — 完全ガイド2026

画像圧縮が重要な理由

画像はWebページの平均的な総サイズの約50%を占めています。カメラから直接取り出した未圧縮の写真は5MB以上になることも珍しくなく、そのような画像が10枚あるページでは、ユーザーはコンテンツを操作する前に50MBものデータをダウンロードしなければなりません。このような負荷はユーザー体験を著しく損ない、ビジネス指標に直接悪影響を与えます。

ページ速度とCore Web Vitals

GoogleのCore Web Vitalsはランキングシグナルであり、Largest Contentful Paint（LCP）は画像サイズに最も影響される指標です。GoogleはLCPを2.5秒以下にすることを推奨しています。画像サイズが大きすぎることがLCPスコアが低い最大の原因です。ヒーロー画像を2MBから200KBに圧縮すると、読み込み時間を数秒短縮できる可能性があります。

SEOへの影響

検索エンジンは遅いページにペナルティを与えます。調査によると、ページ読み込み時間が1秒遅くなるとコンバージョンが7%減少し、直帰率が11%上昇する可能性があります。画像を圧縮すればページが速くなり、ランキング向上、トラフィック増加、エンゲージメント向上につながります。

帯域幅とホスティングコスト

サーバーが配信するすべてのバイトはコストがかかります。月間100,000ページビューのサイトで、各ページが3MBの未最適化画像を読み込む場合、画像データだけで約300GBの転送が発生します。それらの画像を70%圧縮すれば90GBに削減でき、CDNとホスティングのコストを大幅に削減できます。

可逆圧縮と非可逆圧縮の違い

すべての画像圧縮は可逆と非可逆の2種類に分類されます。この違いを理解することが、画質を落とさずに画像を圧縮するための鍵です。

可逆圧縮

可逆圧縮は画像データを一切失わずにファイルサイズを削減します。解凍された画像はピクセル単位で元の画像と同一です。ZIPファイルがデータを圧縮するのと同様に、統計的な冗長性を見つけて除去することで機能します。

• 最適な用途: スクリーンショット、テキストが多いグラフィック、ロゴ、アイコン、技術的な図表
• 典型的な削減率: 画像内容によって10〜50%
• フォーマット: PNG、WebP（可逆モード）、AVIF（可逆モード）

非可逆圧縮

非可逆圧縮は、人間の目に認識されにくい画像データを永久に削除することで、はるかに大きなファイルサイズの削減を実現します。私たちの視覚系は色の変化よりも明るさの変化に敏感で、細かいディテールよりもなめらかなグラデーションに敏感であるという特性を利用しています。

• 最適な用途: 写真、多くの色を持つ複雑な画像、ヒーロー画像、背景画像
• 典型的な削減率: 許容品質レベルで60〜90%
• フォーマット: JPEG、WebP（非可逆モード）、AVIF（非可逆モード）

重要な洞察

非可逆圧縮は敵ではありません。適切な品質設定では、元の画像と視覚的に区別できないほどの画像を生成しながら、5〜10倍小さくなります。目標は非可逆圧縮を避けることではなく、圧縮アーチファクトが見えなくなる品質のしきい値を見つけることです。

フォーマット比較: JPEG vs PNG vs WebP vs AVIF

適切なフォーマットを選ぶことは、適切な品質設定を選ぶことと同じくらい重要です。各フォーマットには、特定の種類のコンテンツに最適な特定の強みがあります。

JPEG

JPEGは1990年代からWeb上の写真画像の標準として使用されています。離散コサイン変換（DCT）ベースの非可逆圧縮を使用し、非可逆モードのみをサポートします。

• 長所: 普遍的なブラウザサポート、写真に優れた品質、合理的な品質での小さなファイルサイズ
• 短所: 透明度サポートなし、可逆モードなし、低品質設定での目に見えるブロックアーチファクト
• 最適な用途: 最大限の互換性が必要な場合の写真

PNG

PNGは可逆圧縮を使用し、フルアルファ透明度をサポートします。シャープなエッジと正確な色再現が必要なグラフィックのためのフォーマットです。

• 長所: 可逆品質、フルアルファ透明度、フラットカラーのグラフィックに優れた品質
• 短所: 写真では大きなファイルサイズ、非可逆モードなし
• 最適な用途: ロゴ、アイコン、スクリーンショット、UI要素、シャープなエッジの透明度が必要な画像

WebP

Googleが開発したWebPは、可逆・非可逆圧縮の両方、アルファ透明度、アニメーションをサポートします。Safari（バージョン14以降）を含むすべてのモダンブラウザでサポートされています。

• 長所: 同等の視覚品質でJPEGより25〜34%小さい、透明度とアニメーションをサポート、可逆・非可逆両モード
• 短所: レガシーシステムや古いメールクライアントとの互換性がやや低い
• 最適な用途: モダンWeb上のほぼすべて。幅広いサポートで今日利用可能な最高の汎用フォーマット

AVIF

AVIFはAV1ビデオコーデックをベースとし、現在の画像フォーマットの中で最高の圧縮率を実現します。Chrome、Firefox、Safari 16+、Edgeがサポートしています。

• 長所: 同等品質でJPEGより50%小さい、写真とグラフィック両方に優秀、HDRとワイド色域サポート
• 短所: エンコードが遅い、WebPよりブラウザサポートがやや少ない
• 最適な用途: WebPまたはJPEGのフォールバックを提供できるWebサイト

クイック比較表

機能	JPEG	PNG	WebP	AVIF
圧縮	非可逆のみ	可逆のみ	両方	両方
透明度	なし	あり	あり	あり
アニメーション	なし	なし（APNGあり）	あり	あり
ブラウザサポート	100%	100%	約97%	約92%
JPEGとの比較	ベースライン	N/A（大きい）	25〜34%小さい	40〜50%小さい

どのフォーマットをいつ使うか

適切なフォーマットを選ぶには、いくつかの簡単な質問に答えることから始まります。

1. 画像に透明度が必要か？ 必要であればWebPを使用。非常に古いブラウザをサポートする必要がある場合のみPNGにフォールバック。
2. 写真や複雑な画像か？ WebP（非可逆）をプライマリフォーマットとして使用。WebPフォールバックを実装できる場合はAVIFも検討。
3. ロゴ、アイコン、シンプルなグラフィックか？ 可能であればSVGを使用。それ以外はWebP（可逆）またはPNG。
4. 互換性が最優先事項か？ 写真にはJPEG、透明度のあるグラフィックにはPNG。
5. アニメーション画像か？ GIFの代わりにWebPまたはAVIFを使用。アニメーションWebPは同等のGIFより劇的に小さい。

画質を落とさずに画像を圧縮する方法

最も効果的なテクニックは、非可逆圧縮の適切な品質設定を見つけることです。

品質70〜85のスイートスポット

JPEGと非可逆WebPの場合、品質設定とファイルサイズの関係は線形ではありません。品質70〜85の間に、知覚品質の損失をほとんど伴わずに大幅なファイルサイズの節約が得られるスイートスポットがあります。

• 品質100: 最大品質、最小圧縮。品質85と比べて見た目の違いはなく、ファイルサイズだけが大きい。
• 品質85: ほとんどの写真で元の画像と視覚的に区別できない。重要なビジュアルの良いデフォルト。
• 品質75〜80: まだ優れた品質。ほとんどの視聴者はズームして並べて比較しない限り元との違いを区別できない。
• 品質70: 細かいディテールやシャープなテキストオーバーレイがある部分で若干のぼかしが見える場合がある。
• 60以下: 圧縮アーチファクトが目立ち始める。推奨しない。

実践的なアプローチ: 品質80から始めて元の画像と比較し、違いがわからなければ75に下げてみます。品質の低下に気づいたら一歩戻ります。

圧縮前にリサイズする

圧縮は半分の方程式に過ぎません。Webサイトで800ピクセル幅で表示される800万画素の写真は、決して見られることのないピクセルをエンコードするためにデータを無駄にしています。

• 画像の最大表示サイズを決定する。コンテンツエリアが800ピクセル幅なら、4000ピクセル幅の画像を提供する理由はありません。
• 高DPI画面を考慮して、表示サイズの1.5〜2倍の画像を提供します。800pxの表示スロットには1200〜1600px幅の画像で十分です。
• まずリサイズし、それから圧縮します。

メタデータの削除

デジタル写真にはカメラ設定、GPS座標、タイムスタンプなどのEXIFメタデータが含まれており、各画像に10〜50KBを追加する可能性があります。Webへの配信にはほぼ常にメタデータを削除するのが適切です。ファイルサイズが削減され、潜在的に機密性の高い位置データも削除されます。

ブラウザベースの圧縮とCanvas API

モダンブラウザはHTML5 Canvas APIを使用してクライアント側で画像を完全に圧縮できます。これはブラウザベースの画像圧縮ツールがファイルをサーバーにアップロードせずに動作する方法です。

プロセスは以下の通りです。

1. ユーザーがデバイスから画像ファイルを選択する。
2. JavaScriptが画像をImageオブジェクトに読み込み、非表示の<canvas>要素に描画する。
3. canvas.toBlob()またはcanvas.toDataURL()メソッドが、指定された品質レベルで希望のフォーマット（JPEG、WebP、PNG）のキャンバスコンテンツをエクスポートする。
4. ブラウザの組み込みエンコーダーが圧縮を処理する。

// クライアントサイド画像圧縮の簡略化した例
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(sourceImage, 0, 0, targetWidth, targetHeight);

// 品質80%でWebPとしてエクスポート
canvas.toBlob(
  (blob) => {
    const compressedUrl = URL.createObjectURL(blob);
  },
  'image/webp',
  0.8
);

このアプローチには重要なプライバシーの利点があります。画像がデバイスから出ることはなく、自分のハードウェアを使ってブラウザ内で完全に圧縮が行われます。

Web画像のベストプラクティス

適切なフォーマットと品質設定を選ぶこと以外にも、画像配信パフォーマンスを向上させるためのテクニックがあります。

レスポンシブ画像を使用する

srcset属性を使用して、視聴者の画面幅に基づいて異なる画像サイズを提供します。

<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="説明的な代替テキスト"
/>

遅延読み込みを実装する

ファビコンより下の画像はすぐに読み込む必要はありません。ネイティブのloading="lazy"属性を使用します。

<img src="photo.webp" alt="説明" loading="lazy" />

LCP画像（通常はヒーロー画像）には遅延読み込みを適用しないでください。代わりにヒーロー画像にfetchpriority="high"の使用を検討してください。

自動フォーマットネゴシエーション付きのCDNを使用する

Cloudflare、Cloudinary、imgixなどのコンテンツ配信ネットワークは、訪問者のブラウザに基づいて最適なフォーマットを自動的に提供できます。

適切なキャッシュヘッダーを設定する

画像はほとんど変更されません。長いキャッシュ有効期限ヘッダー（少なくとも1年）を設定し、ファイル名にコンテンツベースのハッシュを使用します。

画像の寸法を指定する

<img>タグには常にwidthとheight属性を含めます。これにより、ブラウザは画像が読み込まれる前に適切なスペースを確保でき、Cumulative Layout Shift（CLS）を防ぎます。

ToolPalで無料で画像を圧縮する

ソフトウェアをインストールせずに素早く画像を圧縮する必要がある場合は、ToolPalの画像圧縮ツールを使えばブラウザから直接できます。画像をドラッグ&ドロップし、品質スライダーでスイートスポットを見つけ、圧縮結果をダウンロードします。画像は前述のCanvas APIアプローチを使って完全にデバイス上で処理されるため、サーバーには何もアップロードされません。

適切なフォーマット、適切な寸法、適切な品質設定を組み合わせることで、視覚的な品質の損失なしに可能な限り小さなファイルサイズを実現できます。品質80のWebPから始め、実際の表示寸法にリサイズして結果を測定しましょう。ユーザーと検索ランキングが感謝することになります。