PNGロスレス最適化の実務（ブラウザ完結MVP→WASM強化）
PNGは可逆・透過・UIに強い一方、重くなりがちです。まずはMVP（メタ除去の再エンコード）から始め、効果が高ければインデックス色/ディザへ強化する段階的アプローチが安全です。
関連ツール
MVPは /png-lossless。必要なら将来的にWASM導入（oxipng/pngquant相当）を検討。
要点（TL;DR）
- UI/スクショはロスレス最適化の恩恵が大きい。
- まずMVPで効果と副作用ゼロを確認→必要ならWASMでインデックス色/ディザへ。
- 色数削減の副作用（バンディング/偽輪郭）は ディザ選択 で緩和。
1. PNGの中身とMVPが効く理由
- 不要メタ（EXIF/gAMA/iTXt 等）の削除で数％〜十数％の削減が見込める。
- 画像内容は一切変えないため副作用ゼロ。
- スクショ/UIは冗長メタを含みやすく、効果が出やすい。
2. 実装（ブラウザ完結MVP）
// Canvas 再エンコード（メタ除去）
const bmp = await createImageBitmap(file);
const canvas = document.createElement('canvas');
canvas.width = bmp.width; canvas.height = bmp.height;
const ctx = canvas.getContext('2d', { alpha: true });
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
ctx.drawImage(bmp, 0, 0);
const out = await new Promise<Blob>(r => canvas.toBlob(b => r(b!), 'image/png'));MVPは /png-lossless と同等の挙動です。
3. WASM強化（インデックス色/ディザ）
- 色数を 128→96→64 と段階的に下げ、帯域が目立たない最小へ。
- UIは Ordered（Bayer）、写真/グラデは FS/Sierra を試す。
- 誤差は /compare と ΔE でチェック。
4. 配信と公開前チェック
- 配信：immutable / SWR の方針で。
- 命名：/rename で v2/ハッシュの規則を適用。
- 見え：/compare で回帰なし。
- 計測：zip_download 等の GA4 イベントが発火。
5. まとめ：MVP→強化で安全に前進
まずはMVPでリスクゼロの軽量化、効果が大きければWASM最適化へ。段階的に進めるのが、品質と工数の最短解です。