The Anatomy of Transparency: 透過されていないPNGを見抜いて白背景を除去する
The Anatomy of Transparency
アイコンの容量を WebP で削ったあと、次にぶつかったのは透過の問題だった。
問題：透過されていない白背景
WebP への変換を終えて完璧だと思った直後、おかしな現象に気づいた。 「透過されているはずの PNG」から作った WebP が、ポータルの背景の上で「白い四角い箱」になっていた。
画像のメタデータを調べると、こうだった。
- format: “jpeg”
- hasAlpha: false
拡張子は .png だが、実体はアルファチャンネル（透過層）を持たない 3 チャネルの JPEG だった。
素材の PNG が透過されていない以上、単純に WebP へ変換しても「不透明な白」は「不透明な白」のまま残る。
対応：Chroma Key で白背景を除去する
素材を差し替える手もあるが、変換側で機械的に落とすことにした。
convert_icons.js に**白背景自動除去（Chroma Key）**を組み込む。
sharp の raw ピクセル操作で、輝度が 245 を超える「ほぼ白のピクセル」を検出し、そこをアルファ値 0（透明）に書き換える処理だ。
結果：透過が通った
この処理で、白枠に囲まれていたアイコンから背景が抜け、透過が通った。 ポータルのグラデーション背景の上でも、キャラクターが違和感なく馴染む。
容量だけでなく、こうした見えにくい品質も詰めておく。情報の「解像度」はピクセル数だけでなく、こういう仕上げの精度でもある。
ZashStudio 技術監修
2026-04-03