🗜️
← ガイド一覧に戻る

Web向け画像圧縮のベストプラクティス

· タグ: image-compression, best-practices, web-performance, quality-vs-size, seo

Web向け画像圧縮のベストプラクティス

画像は、一般的なWebページのデータの半分以上を占めます。最適化されていない1キロバイトごとに、読み込み時間の遅延、直帰率の上昇、検索ランキングの低下というコストが発生します。このガイドでは、プロフェッショナルなWeb開発者があらゆる画面サイズでシャープで高速に読み込まれる画像を配信するために使用するベストプラクティスを解説します。

1. 常にマスターコピーを保持する

圧縮を適用する前に、元の画像の非圧縮マスターを保存してください。マスターコピーがあれば、異なる品質レベルを自由に試し、ゼロから始めることなく後で再圧縮できます。マスターはPNGやTIFFなどの可逆フォーマットで保存し、本番用のコピーを圧縮してください。

2. 品質設定を理解する

圧縮品質は通常、0（最悪）から100（最良）のスケールで測定されます。最適な設定は、画像コンテンツとパフォーマンス目標によって異なります。

JPEG品質ガイドライン:

  • 80〜85: ほとんどのWeb写真に最適。アーティファクトはほとんど知覚できません。
  • 60〜75: サムネイルと背景画像に良好。いくつかの圧縮アーティファクトが現れます。
  • 60未満: 目立つブロックノイズとバンディング。ファイルサイズが絶対的な優先事項の場合にのみ使用します。

WebP品質ガイドライン:

  • 75〜85: 約25〜35パーセント小さいファイルサイズでJPEG品質に相当します。
  • 可逆WebP: ピクセル完全な出力が重要なグラフィックとスクリーンショットに最適です。

PNG圧縮:

  • PNGは可逆圧縮のみを使用します。ビット深度の削減（32ビットから8ビットカラーへの変換）は、フラットカラーグラフィックで目に見える品質劣化なしにPNGを縮小する最も効果的な方法です。

AVIF品質ガイドライン:

  • 50〜70: 同等の視覚品質でJPEGより最大50パーセント小さいファイルを生成します。
  • エンコードの複雑さが高いほど圧縮は遅くなりますが、ファイルサイズの削減効果は大きいです。

3. 圧縮を画像コンテンツに合わせる

すべての画像が圧縮に対して同じように反応するわけではありません。コンテンツタイプに応じてアプローチを調整してください：

  • 写真: 非可逆圧縮（JPEG、WebP、AVIF）が最適です。品質80から始め、許容できる閾値が見つかるまで下方調整します。
  • スクリーンショットとUIモックアップ: 可逆圧縮（PNG、可逆WebP）がシャープなテキストと鮮明なエッジを保持します。これらの画像には広い均一な領域があり、非常に効率的に圧縮されます。
  • ロゴとアイコン: 可逆フォーマットがベクターに似たシャープネスを維持します。元の画像が色数の少ない場合、色深度を減らしたPNGは非常に小さくできます。
  • 商品写真: 品質75〜85が最適なポイントです。元の画像との視覚的な違いはほぼ見えませんが、ファイルサイズの削減効果は劇的です。

4. 隠れたメタデータを削除する

デジタルカメラやデザインソフトウェアは、EXIFデータと呼ばれるメタデータを画像ファイルに埋め込みます。これには、カメラモデル、GPS座標、タイムスタンプ、カラープロファイル情報が含まれることがあります。メタデータの削除により、視覚的な影響をゼロにしながらファイルサイズを5〜15パーセント削減できます。

ほとんどの圧縮ツールは、メタデータを自動的に削除するオプションを提供しています。著作権やカラープロファイル情報を保持する具体的な理由がない限り、有効にしてください。

5. 元のフォーマットで圧縮する

モダンな画像圧縮ツールは、元のフォーマットを維持したまま画像を最適化できます。これは重要な機能です。フォーマット変換はしばしば不要であり、時には望ましくないこともあるためです：

  • PNGはPNGのまま: 可逆圧縮が透過とシャープなエッジを保持します。
  • JPEGはJPEGのまま: 最適化されたハフマンテーブルと量子化により、再エンコードによる劣化なしにファイルを小さくします。
  • WebPはWebPのまま: 非可逆・可逆の両方のWebPが、メタデータの削除と最適化されたエンコードパラメータの恩恵を受けます。
  • AVIFはAVIFのまま: 高度な圧縮チューニングにより、すでに効率的なAVIFファイルをさらに削減できます。

その場での圧縮（インライン圧縮）は、フォーマット変換チェーンによる品質劣化を決して発生させず、ワークフローもシンプルに保ちます。

6. 圧縮ワークフローを自動化する

手動圧縮は、数枚を超える画像にはスケールしません。本番Webサイトでは、ビルドパイプラインに圧縮を統合してください：

  • ビルド時プラグイン: sharp、Squoosh CLI、imageminなどのツールをビルドステップ中に実行できます。
  • CMS自動化: 多くのコンテンツ管理システムが、アップロード時に画像を圧縮するプラグインを提供しています。
  • CI/CD統合: デプロイメントパイプラインに圧縮ステップを追加して、公開前にすべての画像が自動的に最適化されるようにします。

7. サムネイルをより積極的に圧縮する

サムネイルとプレビュー画像は小さなサイズで表示されるため、圧縮アーティファクトがはるかに目立ちません。より低い品質設定を適用してください：

  • JPEGサムネイル: 品質50〜60
  • WebPサムネイル: 品質50〜70
  • PNGサムネイル: 画像が許せば8ビットカラーに削減

8. 圧縮と遅延読み込みを組み合わせる

圧縮は各画像のサイズを削減しますが、遅延読み込みは画像がビューポートに入ったときにのみダウンロードされることを保証します。この組み合わせは、利用可能なパフォーマンス最適化の中で最も影響力の大きいものの1つです。imgタグにloading="lazy"を追加して、残りはブラウザに任せてください。

9. 実際の指標でテストする

視覚による推測は信頼できません。客観的なツールを使用して、圧縮設定の影響を測定してください：

  • Lighthouseは画像最適化の機会を報告し、潜在的な節約額を推定します。
  • PageSpeed Insightsは画像の重量がCore Web Vitalsスコアにどのように影響するかを示します。
  • WebPageTestは、time-to-first-byteとダウンロード時間を含む、すべての画像リクエストのウォーターフォールチャートを提供します。
  • Squooshは、設定を確定する前に圧縮出力を元の画像と横並びでプレビューできます。

すべてをまとめる

モダンな画像最適化ワークフローは次のようになります：

  1. 非圧縮のマスターコピーを保存します。
  2. 圧縮中にメタデータを削除します。
  3. 元のフォーマットで圧縮します — 不要な変換はしません。
  4. 異なるビューポートに適切なサイズのバージョンを配信します。
  5. 重要でない画像で遅延読み込みを有効にします。
  6. パフォーマンスを測定して反復します。

今すぐ無料のオンライン画像圧縮ツールでこれらのベストプラクティスを適用し始めましょう。画像をアップロードして、数秒で最適化されたバージョンをダウンロードできます — 元のフォーマットをそのまま維持しながら。