WebPの秘密

WebPの秘密
発行形態
同人
著者
ゆずねり
イラスト
参号
デザイン
しらうた
発売日
判型
A5
ページ数
100ページ

基本情報

写真は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の利用が不利なケース
      • 超高解像度画像
      • 高度な色表現が必要な画像
      • 極端に色数が少ない画像
      • ブラウザー以外での利用