画質を落とさずに画像を圧縮する:テクニックとベストプラクティス
圧縮による節約は、原本、形式、エンコーダー、設定によって大きくも小さくも、ほぼゼロにもなります。役立つ目標は約束された割合ではなく、用途に適した最小の出力です。形式ごとにその点を見つける方法を説明します。
「品質を落とさない」とは実際どういうことか
可逆圧縮はピクセルデータを効率よく表現し、デコーダーが同じピクセル値を復元します。メタデータやファイル構造は変わる場合があります。非可逆圧縮は画像情報を捨ててさらに小さくし、その変化を許容できるかは内容と用途によります。
「品質を落とさずに」とは、特定の閲覧条件で非可逆の変化が問題にならないことを指す場合がよくあります。SSIMなどの指標は比較に役立ちますが、単一スコアですべての人に区別できないと証明できません。文字、顔、グラデーション、再保存、画面密度、拡大率によって異なる欠点が見えます。
JPEG:原本に合う品質点を探す
JPEGは写真配信で広く使われます。多くのエンコーダーが名目上の品質尺度を示しますが、端点、初期値、色差サンプリング、量子化表、最適化は異なります。値100でも通常はJPEG符号化であり「無圧縮」ではありません。数値を原本品質の割合と解釈せず、出力を比較してください。
推奨設定:
- 品質80〜85 — ヒーロー画像、作品写真、商品写真の慎重な開始範囲。細かな質感、文字、輪郭を確認します。
- 品質75〜80 — 容量を抑えたいコンテンツ画像やサムネイルの一般的な開始範囲。実際の表示サイズで比較します。
- 品質60〜70 — 欠点を許容できる小さなプレビューや添付用の強めの開始範囲。
同じ名目設定でもエンコーダー実装により容量と欠点の出方が変わります。VizuaのJPEG圧縮ツールで候補を作り、質感、文字、グラデーション、輪郭、色、容量を最良の原本と比べてください。
PNG:デフォルトは可逆、必要に応じて非可逆も
標準PNG圧縮は復号ピクセルに対して可逆ですが、メタデータや補助チャンクは変わる場合があります。スクリーンショット、ロゴ、アイコン、鋭い輪郭や透過を持つ図に向きます。節約幅は原本に強く依存し、最適化済みPNGはほとんど縮まないことがあります。
パレット量子化はフルカラーPNGを最大256色のインデックス画像へ変換できます。見た目が許容できても処理は非可逆です。平坦なイラストや一部の画面画像に向きますが、グラデーション、アンチエイリアス、半透明の輪郭を確認してください。
VizuaのPNG圧縮ツールはラスターピクセルを可逆で再符号化します。ブラウザーでの復号により、メタデータ、カラープロファイル、補助チャンク、完全透過下のRGB値が削除・変更される場合があります。ワークフローを確認せずにそれらを「不要」と呼ばないでください。
WebP:非可逆・可逆・透過・アニメーション
WebPは非可逆・可逆圧縮、透過、アニメーションに対応します。JPEGやPNGの原本より小さくなる場合がありますが、寸法、見た目、メタデータ、エンコーダー負荷、原本の履歴をそろえて初めて比較に意味があります。
推奨設定:
- 非可逆品質75〜80 — 写真の開始範囲であり、特定JPEG設定との同等性ではありません。出力を比較します。
- 可逆モード — 復号ピクセルを保つ必要がある図、ロゴ、画面画像に有用。最適化PNGより必ず小さくなるとは限りません。
WebPは現在の主要ブラウザーで動作しますが、古いブラウザー、組み込みWebView、メールクライアント、制作ソフトでは対応が異なります。分析データと配信要件を確認してください。VizuaのWebP圧縮ツールは既存WebPに調整可能な非可逆品質を提供しますが、可逆モード切替はありません。
AVIF:最高の圧縮率を求めるなら
AVIFはAV1画像符号化を基盤とし、HDR、広色域、透過などに対応します。原本や設定によってJPEGやWebPを上回る場合がありますが、すべての画像やエンコーダーに固定の節約率はありません。
符号化の計算負荷が高い場合があり、現在のブラウザー以外では互換性にばらつきがあります。AVIFはWebパイプラインで検証し代替形式を用意できる場合の候補です。直接共有するなら受信者が開ける形式を選びます。
対応ブラウザーでVizuaを使いAVIF候補を作成できます。選択したファイルはブラウザー内で処理され、当社の画像処理サーバーへ送信されません。必要なコードやサイトサービスはネットワークを使う場合があり、提供されるエンコーダープロファイルが全AVIF機能を網羅するとは限りません。
フォーマット別・最適設定クイックリファレンス
| フォーマット | 開始設定 | 想定される節約 | 候補用途 |
|---|---|---|---|
| JPEG | 75〜85 | 原本と設定に依存 | 写真・商品画像・ヒーローバナー |
| PNG(可逆) | 最大圧縮 | 原本に依存し、小さい場合あり | スクリーンショット・ロゴ・テキスト入り画像 |
| PNG(8ビット) | 256色 | 適した図では大きい場合が多い | イラスト・シンプルなグラフィック |
| WebP(非可逆) | 75〜80 | 原本と設定に依存 | 見た目を確認した写真と図 |
| AVIF | 60〜75 | 原本と設定に依存 | 必要に応じ代替形式を持つ検証済みの最新配信 |
さらに容量を削減するためのヒント
- 最終圧縮前にレスポンシブ寸法を作る。 カメラ原寸は小さな枠には過大ですが、高密度画面や広いブレークポイントには大きな候補も必要です。固定幅一つでなく
srcsetとレイアウトに合う組み合わせを使います。 - メタデータを確認する。 EXIF、IPTC、サムネイル、カラープロファイルは容量を増やし情報を漏らす場合があります。必要な項目は保持し、機密または不要な項目を除きます。
- 用途に合う形式を使う。 写真にはJPEGやWebP、鋭い輪郭の図にはPNGがよく合います。配信経路が対応するならAVIFを試します。
- ツールが対応するとき一括処理する。 原本を残し、代表的な出力を確認してから同じ設定を全体へ適用します。
- 前後を比較する。 実表示サイズと高倍率で確認し、重要な画面を試し、原本を残します。「十分」は目的と利用者によって異なります。
よくある質問
「可逆圧縮」とは実際には何ですか?
画像の可逆圧縮はピクセルデータを効率よく表現し、復号後に同じピクセル値を戻します。ただしツールはメタデータ、プロファイル、補助チャンク、ファイルのバイト列を削除・変更することがあります。そのため「可逆」はファイル全体がビット単位で同一という意味ではありません。PNGと可逆WebPはピクセルの可逆符号化に対応します。
Webサイト向けJPEGの最適な品質設定は?
エンコーダーごとに品質尺度が異なり、画像の反応も違うため、普遍的な値はありません。多くのWeb写真では75〜85付近が実用的な開始範囲です。代表画像を書き出し、実際の表示サイズと高い倍率で確認して調整してください。JPEGを何度も再圧縮せず、原本を残します。
圧縮ではWebPがJPEGより優れていますか?
一部の写真では、同程度の見た目でWebPがJPEGより小さくなる場合がありますが、結果はエンコーダー、設定、画像に依存します。WebPは透過とアニメーションにも対応します。自分のトラフィックのブラウザーを確認し、必要なら代替形式を用意してください。
すべての画像をAVIFへ変換すべきですか?
自動的にそうするべきではありません。AVIFは効率的な場合がありますが、符号化コスト、デコーダー対応、ソフトウェア互換性、原本の種類、世代劣化を考慮する必要があります。変種を生成・検証し、WebPまたはJPEGを代替配信できるWebパイプラインに向きます。直接渡す場合は受信側ソフトが開ける形式を選びます。