透過を失わずにPNG画像を圧縮
ロゴ、スクリーンショット、UI素材、透過画像に向けたPNG専用の選択を準備します。
PNG画像を選択
静止PNGファイルのみ。このリリースではAPNGは受け付けていません · ファイル上限:20・1ファイルあたり5 MB
ロゴ、スクリーンショット、UI素材、透過画像に向けたPNG専用の選択を準備します。
静止PNGファイルのみ。このリリースではAPNGは受け付けていません · ファイル上限:20・1ファイルあたり5 MB
透過に配慮した圧縮
透過エッジ、くっきりした文字、ベタ塗りのグラフィックを損なわないPNG戦略を選びましょう。

透過および半透明ピクセルを保持します。
ピクセル値を意図的に変えずに、エンコードを最適化します。
ロゴやUI素材で許容できる場合は、使用する色数を減らします。
アニメーションPNGファイルはこのワークフローの対象外です。
透過やきれいな輪郭が失われるなら、いくら小さいPNGでも役に立ちません。
PNGの構造
PNGには、不透明ピクセル、部分的な透明、テキスト、ベタ塗り領域が混在することがあります。写真向けの圧縮プリセットに当てはめるのではなく、それぞれの特性を分けて点検するのが大切です。
明るい背景と暗い背景の両方でアンチエイリアスのエッジをテストし、フラット化やハロー(縁のにじみ)が1つのプレビューに紛れないようにしましょう。
離れた状態のサムネイルでは問題なさそうに見えても、パレット変更によって滑らかな階調や1ピクセルの細部が影響を受けることがあります。
書き出したPNGを明るい背景と暗い背景の両方に重ねて表示しましょう。小さな文字、ベタ色、グラデーション、半透明エッジを確認します。
PNGの戦略
PNGのグラフィックは、透明度、シャープな輪郭、安定した色が求められることがあります。色数を減らすパレット削減を検討する前に、デコード後のピクセルが完全一致である必要があるかを判断しましょう。
契約で定められた色、UIのピクセル、透明エッジの値などを、デコード後も一切変えずに維持する必要がある場合に使います。
ベタ塗り中心のイラストは色数を減らしても耐えやすい一方、グラデーション、スクリーンショット、質感のあるイラストでは目に見えるバンディングが出ることがあります。
透明が不要な不透明の写真だけは、必要に応じてJPGのワークフローを使いましょう。画像に透明ピクセルが必要な場合はPNGのままにしてください。
結果を確認
PNGを明るい背景と暗い背景に置いて、髪の毛や影、アンチエイリアス文字の周りにフリンジ(縁の色にじみ)が出ていないかを確認しましょう。
ロゴやUIグラフィックで、ブランドカラーが変わっていないか、階調(色味)が失われていないかを点検しましょう。パレット削減は写真とは違う形でこれらの領域に影響することがあります。
ピクセルの完全一致が必要なら、ファイルのバイト数ではなく、デコード後のピクセル値を比較しましょう。PNGが小さくなっただけでは、可逆(ロスレス)である証拠にはなりません。
このPNGワークフローは、アルファ透明度を保持することを前提に設計されています。元の素材を置き換える前に、VisionStoryで実際の処理結果を確認してください。