DIGITAL REPRESENTATION / INTERACTIVE LAB
画像圧縮
小さくしたら、何が変わる？ 同じ画像を6つの形式で比べよう。
設定を変えると、その形式だけを再変換。品質の数値は形式ごとに意味が異なります。
圧縮の強さは右ほど強く、画質よりサイズを優先。可逆では画質は変わりません。圧縮の努力量は右ほど時間をかけます。
圧縮率 ＝ ファイルサイズ ÷（幅 × 高さ × RGBA 4バイト）× 100。小さいほどコンパクト。100%を超える場合もあります。1 kB = 1,000 B。
JPEG
どの画像からでもドラッグ・ピンチで連動移動と拡大。キーボードは矢印・＋・−・Home。差分は黒ほど一致し、透明度の差も含みます。
PSNR・画素一致・透過誤差の読み方
PSNRは白背景に合成したsRGBのRGB誤差から算出。大きいほど元に近く、∞は見える色の誤差が0です。画素の完全一致はRGBA全成分で判定し、α誤差は透明度の平均絶対誤差（0〜255）です。PSNRだけで見た目の良さは決まりません。拡大して文字・輪郭・グラデーションも確かめましょう。
もう一歩 / FAIR SIZE COMPARISON
同じくらいのサイズなら？
目標の±10%を目安に、実際に圧縮しながら品質・色数を探します。
JPEG・GIF・非可逆モードのWebP / AVIFが対象。BMPは固定長、PNGと可逆モードは画質を変えてサイズを合わせられません。
この実験のヒントと、計測のしくみ
- 元に戻せる？
- PNGと可逆モードは画素を保ったまま符号化。JPEGなどの非可逆モードは情報を捨てて小さくします。GIFのLZW圧縮は可逆ですが、その前の減色と透明度の変換で情報が失われます。
- どの画像が得意？
- 写真ではJPEG・WebP・AVIF、色の少ないイラストや文字ではPNG・GIFも試しましょう。品質設定を下げて、サイズと輪郭の変化を確かめてください。
- 処理時間は何を測る？
- 圧縮は入力の準備後から実際のエンコード終了まで。各カードで、同時実行制限による待機、Worker起動、コーデック読込・準備、復号と指標計算、全体の経過時間を確認できます。サイズ調整時の圧縮時間は全試行の合計です。端末の負荷・キャッシュでも変わり、形式の速さの厳密な順位ではありません。
- 共通の元データ
- 読み込んだ画像を上限の長辺まで縮小し、ブラウザのCanvasでRGBA各8ビットのsRGB画素に統一します。全形式に同じ画素を渡します。JPEG・24bit BMPは白背景に合成、GIFは1段階の透明度へ変換します。色プロファイル・メタデータ・アニメーションは比較対象に含めません。
JPEG: MozJPEG、WebP: libwebp、AVIF: libavif / AOM（WebAssembly）。PNG: フィルタ＋DEFLATE、GIF: パレット＋LZW、BMP: 非圧縮。コーデックはこのサイトから読み込み、画像を外部へ送信しません。コーデックの出典とライセンス。写真はNASAの宇宙飛行士Eileen Collins（Public domain、scikit-image収録）。ほかのプリセットは本教材のオリジナルです。
6つの画像形式の特徴・得意なこと・苦手なこと
可逆は画素を保ち、非可逆は情報を減らして小さくします。向き不向きは画像と設定で変わるので、プリセットを切り替えて確かめましょう。
BMP この実験では非圧縮
画素をほぼそのまま並べて保存。32bitは色と透明度を保持し、24bitは透過を白に合成します。
- 得意なこと
- 非圧縮データ量の観察。圧縮によるサイズの違いを比べる基準。
- 苦手なこと
- 写真でも単色の画像でも大きくなりやすく、Webで小さく配信する用途には不向き。
PNG 可逆圧縮
画素を変えずに圧縮し、半透明も保持。圧縮レベルを上げても画質は変わりません。
- 得意なこと
- 文字、図、スクリーンショット、ドット絵。輪郭や透過を正確に残すこと。
- 苦手なこと
- 色や模様の細かい写真は大きくなりがち。画質を下げて目標サイズへ近づけることはできません。
GIF 減色で非可逆になりうる
最大256色と「透明／不透明」で表現。LZW圧縮自体は可逆でも、その前の減色や半透明の変換では情報が失われます。
- 得意なこと
- 色数の少ない図やドット絵。色を減らしたときのサイズと見た目の変化を観察すること。
- 苦手なこと
- 写真、なめらかなグラデーション、半透明。形式はアニメーションにも対応しますが、この実験は1フレームだけを比較します。
JPEG 非可逆圧縮
細部や色の情報を減らして圧縮。品質100でも完全な画素の復元は保証されず、透過は保存できません。
- 得意なこと
- 写真など、色や明るさが連続的に変わる画像。品質とサイズの折り合いをつけること。
- 苦手なこと
- 小さな文字、細線、ドット絵。強い圧縮では輪郭のにじみやブロック状の模様が目立ちます。
WebP 可逆非可逆
可逆・非可逆を選べ、どちらも半透明に対応。同じ形式で画素の保持と小ささの優先を切り替えられます。
- 得意なこと
- 写真の小型化、透過イラスト。画像に合わせて可逆と非可逆を試すこと。
- 苦手なこと
- 非可逆では細い線や文字が変化する場合があります。可逆で写真を保存すると十分小さくならないこともあります。
AVIF 可逆非可逆
AV1の圧縮技術を使い、半透明と可逆・非可逆に対応。この実験では共通の8bit sRGB画素を比較します。
- 得意なこと
- 写真やグラデーションを小さく保存すること。同程度のサイズで細部がどう残るか比べること。
- 苦手なこと
- 圧縮に時間がかかりやすく、特にスマートフォンでは待つ場合があります。強い非可逆圧縮では文字や細部が崩れることもあります。
新しい形式ほど必ず小さくなるわけではありません。品質の数値は形式間で比較せず、実測サイズと拡大画像・差分を合わせて判断しましょう。