写真はJPEG、アイコンや透過画像はPNG、アニメーションはGIF。
長い間、Webの画像はこの三つのフォーマットを使い分けるのが常識でした。

2010年、Googleがこの常識を覆します。
写真も、イラストも、アニメーションも、すべてを一つでまかなうWebPの発表です。
その中身を開けてみると、まったく異なる二つの圧縮技術が同居しています。

非可逆圧縮のベースは、動画コーデックの技術をそのまま静止画に持ち込んでいます。
WebPは「1フレームしかない動画」として、画像を圧縮するのです。
一方、可逆圧縮にはPNGの限界を超えるべく、画像専用のコーデックがゼロから設計されました。

本書では、RIFFコンテナの中に何が詰まっているのかを覗き、VP8とVP8Lという二つのコーデックがどうやって画像を縮めるのかを追いかけます。
変換ツールの使いこなしにも踏み込み、各オプションと圧縮の仕組みが、どうつながっているのかを掘り下げます。
さらに、Webサイトでの配信や既存フォーマットとの使い分けなど、実践的なヒントもお伝えします。

WebPの秘密を、一緒に解き明かしていきましょう。

第1章　WebPとは何か

• 画像フォーマットの歴史
• WebPの誕生
• WebPの特徴
  　- 非可逆圧縮と可逆圧縮の両対応
  　- アルファチャンネル
  　- アニメーション
  　- メタデータ
  　- 従来フォーマットとの比較
• ブラウザー対応と普及
  第2章　WebPファイルフォーマット
• RIFFフォーマット
• ファイルヘッダー
• チャンクの基本構造
• ファイルレイアウト
  　- Simple Lossy
  　- Simple Lossless
  　- Extended
• チャンク構造
  　- VP8
  　- VP8L
  　- VP8X
  　- ICCP
  　- ALPH
  　- ANIM
  　- ANMF
  　- EXIF
  　- XMP
  第3章　非可逆圧縮（VP8）
• VP8の概要
  　- JPEGとの処理フロー比較
• 色空間変換
• ダウンサンプリング
• マクロブロックへの分割
• イントラ予測
  　- 輝度予測モード
  　- 色差予測モード
• 離散コサイン変換
  　- JPEGのDCT
  　- VP8の整数DCT
  　- 2パス構造と分離可能性
  　- 整数演算による実装
  　- 計算例
• Walsh-Hadamard変換
  　- DC係数の配置
  　- Hadamard行列
  　- 計算例
• 量子化
  　- 量子化インデックスと逆量子化テーブル
  　- 計算例
  　- セグメントベースの適応量子化
  　- トレリス量子化
• ブール算術符号化
  　- 算術符号化の原理
  　- 有限精度と正規化
  　- VP8における確率の決定
  　- パーティション構造
• DCT係数の符号化
  　- ジグザグスキャン
  　- トークンツリー
• ループフィルター
  　- デコード処理におけるフィルターの位置づけ
  　- フィルターの種類
  　- 適用順序と判定の概要
  　- フィルターパラメーターの算出
  　- エッジ条件
  　- 内部平滑性条件
  　- HEV条件
  　- フィルター値の計算
  　- Simpleフィルター
  　- Normalフィルター（HEV成立）
  　- Normalフィルター（HEV不成立・サブブロック境界）
  　- Normalフィルター（HEV不成立・マクロブロック境界）
• レート歪み最適化
  　- レート歪みコスト関数
  　- 空間ノイズシェーピング
  　- 探索精度と処理速度
• アルファチャンネル
  　- 量子化
  　- フィルタリング
  　- VP8Lによる圧縮
• エンコードパラメーターと内部処理の関係
  　- qualityパラメーター
  　- methodパラメーター
  　- sharp_yuvオプション
  　- snsパラメーター
  　- segmentsパラメーター
  　- preprocessingパラメーター
  　- フィルター制御パラメーター
  　- presetパラメーター
  　- cwebp主要オプション一覧
  第4章　可逆圧縮（VP8L）
• VP8Lの概要
  　- PNGとの処理フロー比較
• 画像変換
• 予測変換
  　- モード11（Select予測）
  　- モード12（ClampAddSubtractFull予測）
  　- モード13（ClampAddSubtractHalf予測）
• 色変換
• 緑チャンネル減算変換
• カラーインデックス変換
  　- カラーテーブルの構築
  　- ピクセルバンドリング
• LZ77後方参照
  　- 2次元距離マッピング
  　- 長さと距離のプレフィックス符号化
• カラーキャッシュ
  　- LZ77後方参照との比較
• プレフィックス符号化
  　- 正準化の原理
  　- 五つのプレフィックスコードグループ
  　- メタプレフィックスコード
  　- ハフマンテーブルの格納
• エンコードパラメーターと内部処理の関係
  　- qualityパラメーター
  　- methodパラメーター
  　- 可逆プリセット
  　- near_losslessパラメーター
  　- cwebp可逆圧縮オプション一覧
  第5章　WebP活用法
• HTMLでの記述方法
  　- img要素による直接指定
  　- picture要素によるフォールバック
  　- レスポンシブ画像との組み合わせ
  　- 画像の読み込み最適化
• 配信と変換
  　- コマンドラインツールによる変換
  　- Content Negotiation
  　- CDN・画像最適化サービス
  　- フレームワーク・ビルドツール連携
  　- プログラマティックな変換
• フォーマットの使い分け
• WebPの利用が有利なケース
  　- 写真
  　- イラスト・ロゴ・アイコン
  　- 透過画像
  　- アニメーション
• WebPの利用が不利なケース
  　- 超高解像度画像
  　- 高度な色表現が必要な画像
  　- 極端に色数が少ない画像
  　- ブラウザー以外での利用

フルHD映像を非圧縮で保存すると、1秒間で約190MB、1時間では約680GBものデータ量になります。

ところが現代では、スマートフォンからSNSへの動画アップロードは数秒で完了し、Netflixでの映画ストリーミングは途切れることなく再生され、ビデオ会議で世界中の人々と顔を合わせて会話できます。
この当たり前の光景の裏には、映像データを劇的に小さくする「魔法」のような技術「MPEG」があります。

1980年代後半、約650MBのCDに映画を収録するという夢物語から始まったMPEGの圧縮技術の仕組みと、誕生から現代までの物語をたどります。

第1章　映像圧縮の歴史

• 映画のはじまり
  　- 35mmフィルムと映写機の誕生
  　- サイレント映画からトーキー映画へ
  　- 白黒映画からカラー映画へ
  　- ワイドスクリーンの登場
  　- サラウンド音響の発展
• テレビのはじまり
  　- 世界のアナログ放送規格
  　- ビデオ録画技術の誕生
  　- 家庭用ビデオ規格戦争
• MPEGのはじまり
  　- テレビ会議から始まった映像圧縮
  　- CD規格がもたらしたMPEGの誕生
  　- MPEG-1の登場
  　- MP3が開いた音楽配信
• デジタル放送と高画質メディア
  　- MPEG-2の登場
  　- DVDの登場
  　- デジタル放送への移行
  　- HDTVの普及
• インターネット映像時代の幕開け
  　- Flash VideoとWeb映像配信
  　- MPEG-4の登場
  　- H.264/AVCの登場
  　- 次世代光ディスクの規格競争
  　- コーデック戦争の終焉
• 4K時代と次世代コーデック
  　- H.265/HEVCの登場と特許問題
  　- オープンコーデックの台頭
• 映像技術の進化と継承

第2章　映像と音声のデジタル表現

• 映像を構成する三つの次元
  　- 空間次元
  　- 時間次元
• アナログ信号の仕組み
  　- 走査線
  　- インターレース方式
  　- プログレッシブ方式
• デジタル信号の仕組み
  　- 標本化
  　- 量子化
• データ量とビットレート
  　- 非圧縮映像のビットレート
  　- 非圧縮音声のビットレート
  　- ビットレート制御

第3章　映像圧縮の原理

• 映像が持つ冗長性
  　- 空間的冗長性
  　- 時間的冗長性
  　- 統計的冗長性
• 空間的冗長性の削減方針
• 色空間の変換
• クロマサブサンプリング
• 離散コサイン変換
• 量子化
  　- 量子化テーブル
  　- 空間的マスキング効果
• ランレングス符号化
• 可変長符号化
• 時間的冗長性の削減方針
• フレーム間予測技術
  　- Iフレーム
  　- Pフレーム
  　- Bフレーム
  　- GOP
• 動き補償
  　- エンコーダー側の例
  　- デコーダー側の例
  　- マクロブロック
  　- 動きベクトルの算出
  　- 残差の計算と符号化
• コンテナとコーデック
  　- コンテナフォーマット
  　- コーデック
  　- コンテナとコーデックの関係

第4章　MPEG-1

• 開発の背景
• MPEG-1 Part 1（Systems）
  　- Program Stream
  　- タイムスタンプによる同期
• MPEG-1 Part 2（Video）
  　- 解像度とフレームレート
  　- マクロブロックとブロック構造
  　- 動き補償の仕様
• MPEG-1 Part 3（Audio）
  　- Layer I
  　- Layer II
  　- Layer III
• MPEG-1の限界
  　- 解像度の制約
  　- インターレース映像の非対応
  　- ビットレート制御の制約
• MPEG-1の功績

第5章　MPEG-2

• 開発の背景
• MPEG-2 Part 1（Systems）
• MPEG-2 Part 2（Video）
  　- インターレース映像対応
  　- フレームDCTとフィールドDCT
  　- 動き補償の拡張
  　- デュアルプライム予測
  　- 量子化マトリクスと適応量子化
  　- プロファイルとレベル
• MPEG-2 Part 3（Audio）
• MPEG-2 Part 7（Advanced Audio Coding）
• 幻のMPEG-3
• MPEG-2の限界
  　- イントラ符号化の制約
  　- 動き補償精度の制約
  　- エントロピー符号化の制約
  　- HD解像度での効率低下
  　- インターネット配信への制約
• MPEG-2の功績

第6章　MPEG-4

• 開発の背景
• MPEG-4 Part 2（Visual）
  　- 動き補償の高度化
  　- Global Motion Compensation
  　- 符号化ツールの改良
  　- MPEG-4 Visualの実装例
  　- 技術的成果と課題
• MPEG-4 Part 3（Audio）
• MPEG-4 Part 14（MP4 file format）
• MPEG-4 Part 10（Advanced Video Coding）
  　- 予測技術の高度化
  　- デブロッキングフィルター
  　- CABAC/CAVLCエントロピー符号化
  　- プロファイルとレベル
• H.264/AVCの限界
  　- 並列処理の制約
  　- マクロブロックサイズの制約
  　- エントロピー符号化の制約
• MPEG-4の功績

第7章　次世代映像圧縮技術

• 4K時代の標準コーデックH.265/HEVC
  　- H.265/HEVCの技術的革新
  　- H.265/HEVCの課題
• ロイヤリティフリーに挑戦するAV1
  　- AV1の技術的革新
  　- AV1の課題
• 究極の圧縮効率を追求するH.266/VVC
  　- H.266/VVCの技術的革新
  　- H.266/VVCの課題
• 映像圧縮技術の未来

JPEGの品質は「85がよい」と、耳にしたことはありませんか？
そもそも、JPEGの「品質」という数値が何を意味しているのか、深く考えたことはあるでしょうか。

JPEGは1992年に誕生し、30年以上たっています。
今でも写真やウェブ画像など、私たちの身の回りで広く使われている画像フォーマットです。
しかし、JPEGの圧縮の仕組みや「品質」の意味について、詳しく知っているでしょうか。

JPEGは、人間の視覚特性や画像の特徴、情報を効率的に表現するためのさまざまな符号化技術を、うまい具合に組み合わせてデータを削減します。
その裏側には、長年にわたる研究と工夫が積み重ねられており、とてもおもしろい仕組みになっています。

本書では、なるべく予備知識がなくても理解できるように、JPEGの仕組みを解説します。

普段何気なく使っているJPEG画像の舞台裏を、一緒にのぞいてみましょう。
きっと、これまでとは違った視点で画像を見られるようになるはずです。

第1章 色を視るしくみ

• 光の正体
• 光を色と認識するまで
  　- 桿体細胞の役割
  　- 錐体細胞の役割
• 色の正体
  　- 光を視る場合
  　- 物体を視る場合
• カメラのしくみ
  　- 標本化
  　- 量子化
  　- イメージセンサー

第2章 JPEGファイルフォーマット

• JPEGの誕生
• JPEGの規格
  　- JPEGコア規格（ISO/IEC 10918-1）
  　- JPEG File Interchange Format（ISO/IEC 10918-5）
  　- Exchangeable Image File Format
• JPEGのデータ構造
  　- Start Of Image
  　- Application segment
  　- Define Quantization Table
  　- Define Huffman Table
  　- Start Of Frame
  　- Start Of Scan
  　- End Of Image

第3章 JPEGの圧縮アルゴリズム

• 画像圧縮の考え方
  　- 色の変化を省略
  　- 細かい情報を省略
  　- データを圧縮
• 圧縮処理の流れ
• 色空間変換
  　- 色空間の視覚的効果
• ダウンサンプリング
  　- クロマサブサンプリング方式
  　- 視覚的影響
• ブロック分割
• レベルシフト
• 離散コサイン変換
  　- 画像の周波数表現
  　- 2次元DCT
  　- 逆DCT
• 量子化
  　- 量子化テーブル
  　- デコーダーの品質
  　- ブロックノイズ
  　- モスキートノイズ
• エントロピー符号化
  　- DC 成分の符号化
  　- AC 成分の符号化
• 全体の計算過程
  　- 符号化過程
  　- 復号化過程

付録A JPEG以外のフォーマット

• JPEG 2000
• JPEG XR
• JPEG XT
• JPEG XL
• JPEG XS
• TIFF（Tagged Image File Format）
• GIF（Graphics Interchange Format）
• PNG（Portable Network Graphics）
• BMP（Microsoft Windows Bitmap Image）
• WebP
• RAW
• SVG（Scalable Vector Graphics）

付録B 色空間

• sRGB
• Adobe RGB
• Display P3
• CMYK
• HSV / HSB
• HSL
• YCbCr

付録C 画質評価

• 平均二乗誤差
• ピーク信号対雑音比