画像圧縮の基礎と実務:フォーマット比較・画質評価・最適化の実践ガイド

画像圧縮とは — 概要と目的

画像圧縮は、デジタル画像データを小さくするための処理全般を指します。目的は主に「保存領域の削減」「ネットワーク転送の高速化」「読み込み時間の短縮」「帯域やストレージコストの節約」です。圧縮によってファイルサイズを小さくする一方で、画質や再現性、処理時間、対応環境などのトレードオフが生じます。

基本的な分類:非可逆(損失)圧縮と可逆(非損失)圧縮

  • 可逆(ロスレス)圧縮:元の画像データを完全に復元できる方式。PNG、GIFの一部、可逆WebP、FLIF(歴史的)などが該当します。無損失のため、アイコンや図表、テキストを含む画像、医療や印刷用途に適します。

  • 非可逆(ロッシー)圧縮:一部の情報を破棄することで高い圧縮率を得る方式。JPEG、ロッシーWebP、AVIF、HEIC(HEIF/HEVCベース)など。写真で目立たない部分の情報を削ることでファイルサイズを大幅に削減しますが、繰り返しの再圧縮で劣化が進みます。

主要フォーマットと特徴

  • JPEG(.jpg/.jpeg):最も広く使われる写真向けロッシー形式。離散コサイン変換(DCT)+量子化+エントロピー符号化を用いる。色の細かい情報を間引く「色差サブサンプリング(例:4:2:0)」を使うことが多く、高圧縮でも見た目の低下を抑えられる。

  • PNG(.png):可逆圧縮の代表。フィルタリング+DEFLATE(zlib)による圧縮。透過(アルファ)を扱えるため、ロゴやUI部品に多用される。

  • GIF(.gif):256色パレットに制限され、アニメーションをサポート。静止画用途では色数制限があるため適用場面が限られる。

  • WebP(.webp):Googleのフォーマット。ロッシーはVP8ベース、ロスレスは予測+トランスフォーム+エントロピーで高効率。アルファもサポートし、同等画質でJPEGより小さくなるケースが多い。

  • AVIF(.avif):AV1ビデオ符号化技術を静止画向けにしたフォーマット。非常に高い圧縮率と高品質を実現しやすいが、エンコードに高い計算コストを要する。最近のブラウザ採用が進む。

  • HEIF/HEIC(.heif/.heic):HEVC(H.265)ベースの静止画フォーマット。高効率だが特許・ライセンスの問題が絡む。iPhoneのデフォルト保存形式として使われることがある。

技術の中身(代表的な手法)

  • 変換(Transform):JPEGはDCT、JPEG2000はウェーブレットを使う。変換により空間領域の相関を周波数領域に分離し、重要度の低い係数を削減しやすくする。

  • 量子化(Quantization):各係数を粗く丸めることで情報を削る操作。量子化はロッシー圧縮の中心で、強くするとファイルは小さくなるが画質は落ちる。

  • 色空間とサブサンプリング:人間の視覚は色差(クロマ)より輝度に敏感なため、色成分を間引く(4:4:4 → 4:2:2 → 4:2:0)ことで目立たない劣化に抑えつつ圧縮効率を上げる。

  • 量子化マトリクスとトレリス最適化:フォーマットやエンコーダによっては視覚特性を考慮した最適化(例:mozjpegのトレリス量子化)を行い、同サイズでより良好な見た目を実現する。

  • エントロピー符号化:最終的にデータの冗長性を減らすためにハフマンや算術符号化、ANSなどを用いる。

画質評価(定量と定性)

  • PSNR(Peak Signal-to-Noise Ratio):ピクセル単位の差分に基づく古典的指標。数値はわかりやすいが、人間の知覚差と必ずしも一致しない。

  • SSIM(Structural Similarity):構造やコントラストを考慮した指標で、視覚的類似度をより反映する。

  • VMAF(Video Multimethod Assessment Fusion):Netflixが開発した指標で、複数の手法を組み合わせて視覚品質を高精度に推定する。静止画評価にも適用可能。

  • 結論として、最終評価は「目的に応じた主観的テスト(目視)」と「複数指標の併用」が必要です。

Webサイトでの実践的な使い分けと最適化

利用シーンによって最適なフォーマットは変わります。例:

  • 写真中心のページ:AVIFやWebPを優先(対応ブラウザにフォールバックでJPEG/PNG)。

  • ロゴやアイコン:可能ならSVG(ベクター)、PNG(アルファ)や8bitパレットPNGを検討。

  • アニメーション:GIFではなくAPNGまたはWebPアニメーションを検討(ファイルサイズとサポートに注意)。

実装上のテクニック:

  • レスポンシブ画像(srcset/sizes)で適切な解像度を配信する。

  • 遅延読み込み(lazy loading)とプレースホルダ(低解像度先読み)を併用する。

  • CDNの画像最適化機能(自動フォーマット変換・リサイズ)を利用する。

  • コンテンツに応じたクオリティ設定を用いる(写真は80〜90、サムネは60など)。

ツールとライブラリ(開発/運用で使うもの)

  • エンコーダ:libjpeg-turbo、mozjpeg(JPEGの画質最適化)、cwebp(WebP)、libavif/avifenc(AVIF)、oxipng/zopflipng/pngquant(PNG最適化)。

  • コマンド例(参考):
    convert input.png -quality 85 output.jpg
    cwebp -q 80 input.jpg -o output.webp
    (環境やバージョンに依存するためドキュメントを参照してください)

  • ライブラリ:ImageMagick、Sharp(Node.js)、libvips(高速・低メモリ)など。

実務上の注意点と落とし穴

  • 再圧縮による劣化:ロッシー画像を繰り返し保存すると劣化が累積する。編集は可逆フォーマットで行い、仕上げ時にロッシー変換する。

  • 色プロファイルやガンマ:ICCプロファイルやsRGBの扱いを誤ると見た目が大きく変わる。Web配信ではsRGBで揃えるのが一般的。

  • 透過情報の扱い:アルファが必要な場合はPNG、WebP(アルファ対応)、AVIF(アルファ対応)を選択。

  • 互換性:古いブラウザやツールでサポートされないフォーマットはフォールバックを用意する。

まとめ:選び方のフレームワーク

  • 目的(見た目最優先/サイズ最優先/透明度/アニメーション)を明確にする。

  • ターゲット環境(ブラウザ、端末)を確認し、フォールバック戦略を設計する。

  • 自動化パイプライン(CDN、バッチ変換、CIでの最適化)で一貫した品質管理を行う。

  • 主観的な品質チェックと、PSNR/SSIM/VMAFなどの指標を組み合わせる。

実用的なワークフロー例

1) 原本は無圧縮または高品質(TIFF/HEIF/RAW)で保存。 2) 編集は可逆フォーマットで行う。 3) Web公開時に自動的に複数フォーマット(AVIF/WebP/JPEG)と複数解像度を生成。 4) CDNでユーザ環境に合わせて最適なファイルを配信。

参考文献