JPEG 圧縮の可視化
画像が JPEG になるまでの色の変換・8×8 の DCT・量子化・ハフマン符号を、ブロックごとに見せます。品質や色差の間引き方を変えて、ファイルの大きさと画質の関係や、ブロックノイズが出るしくみを確かめられます。
画像
なめらかな色の変化は少ないビットで表せる
色差の間引き（クロマサブサンプリング）
低いほど量子化テーブルの値が大きくなり、細かい模様が消えてファイルが小さくなります。
画像を用意しています…
使い方
- 見本の画像（風景・文字と線・色の縞）を選ぶか、「画像を選ぶ…」で手元の画像を読み込みます。
- 品質のスライダーと色差の間引き方を変えると、圧縮後の画像・元との差・ファイルの大きさ・PSNR がすぐに変わります。
- 画像をクリック（ドラッグ）すると、その場所の 8×8 ブロックの画素・DCT 係数・量子化・符号を詳しく表示します。Y・Cb・Cr の成分も切り替えられます。
- 「JPEG ファイルを保存」で、このページで作った JPEG をそのまま保存できます。ほかのソフトで開けます。
しくみ
- ベースライン JPEG（ITU-T T.81）の手順を、ブラウザの中で 1 つずつ計算しています。
- 色の変換: RGB を JFIF の式で Y（明るさ）・Cb・Cr（色差）に分けます。色差は 4:2:2 なら横、4:2:0 なら縦横の 2 画素を平均して間引きます。
- DCT: 8×8 の画素を、64 個の模様（基底関数）の重ね合わせに分解します。なめらかな部分は左上の少数の係数に集まります。
- 量子化: 係数を量子化テーブルの値で割って丸めます。ここで情報が失われます。テーブルは標準の表（Annex K）を、品質に合わせて libjpeg と同じ式で拡大・縮小します。
- エントロピー符号化: ジグザグの順に並べ、0 の連続と値の組を標準のハフマン符号で表します。ここは情報を失わずに縮める部分です。
- 復元は逆の順（逆量子化 → 逆 DCT → 色差を最近傍で引き伸ばす → RGB）です。PSNR はこの復元と元の画像の RGB の平均二乗誤差から求めます。
注意事項
- 読み込んだ画像は長い辺 320 画素まで縮小し、ブラウザの中だけで処理します。どこにも送信・保存しません。
- プログレッシブ JPEG・算術符号・ハフマン符号表の最適化・EXIF などのメタデータには対応していません。画像の表示ソフトは色差をなめらかに引き伸ばすことが多いので、保存した JPEG の見え方は少し違うことがあります。