日本語

透過を失わずにPNG画像を圧縮

ロゴ、スクリーンショット、UI素材、透過画像に向けたPNG専用の選択を準備します。

PNG画像を選択

静止PNGファイルのみ。このリリースではAPNGは受け付けていません · ファイル上限:20・1ファイルあたり5 MB

透過に配慮した圧縮

デザインを崩さずにPNGファイルを軽量化

透過エッジ、くっきりした文字、ベタ塗りのグラフィックを損なわないPNG戦略を選びましょう。

PNGを圧縮
アルファ

透過を保持

透過および半透明ピクセルを保持します。

可逆

デコード後の色を保護

ピクセル値を意図的に変えずに、エンコードを最適化します。

パレット

色数を減らす

ロゴやUI素材で許容できる場合は、使用する色数を減らします。

静止

アニメーション消失を回避

アニメーションPNGファイルはこのワークフローの対象外です。

透過やきれいな輪郭が失われるなら、いくら小さいPNGでも役に立ちません。

PNGの構造

アルファ、輪郭、色構造を守る

PNGには、不透明ピクセル、部分的な透明、テキスト、ベタ塗り領域が混在することがあります。写真向けの圧縮プリセットに当てはめるのではなく、それぞれの特性を分けて点検するのが大切です。

アルファ

透明ピクセルを意図どおりに保つ

明るい背景と暗い背景の両方でアンチエイリアスのエッジをテストし、フラット化やハロー(縁のにじみ)が1つのプレビューに紛れないようにしましょう。

色

グラデーションと小さな文字を確認

離れた状態のサムネイルでは問題なさそうに見えても、パレット変更によって滑らかな階調や1ピクセルの細部が影響を受けることがあります。

比較

元画像と書き出しファイルを比較

書き出したPNGを明るい背景と暗い背景の両方に重ねて表示しましょう。小さな文字、ベタ色、グラデーション、半透明エッジを確認します。

PNGの戦略

ピクセルの完全一致か、確認済みのパレット変更かを選ぶ

PNGのグラフィックは、透明度、シャープな輪郭、安定した色が求められることがあります。色数を減らすパレット削減を検討する前に、デコード後のピクセルが完全一致である必要があるかを判断しましょう。

正確性

検証済みの可逆(ロスレス)ルートを優先

契約で定められた色、UIのピクセル、透明エッジの値などを、デコード後も一切変えずに維持する必要がある場合に使います。

パレット

確認してから色数を減らす

ベタ塗り中心のイラストは色数を減らしても耐えやすい一方、グラデーション、スクリーンショット、質感のあるイラストでは目に見えるバンディングが出ることがあります。

次の作業

必要に応じて関連ツールを選ぶ

透明が不要な不透明の写真だけは、必要に応じてJPGのワークフローを使いましょう。画像に透明ピクセルが必要な場合はPNGのままにしてください。

結果を確認

透明エッジと細部を確認

書き出したPNGを明るい背景と暗い背景の両方に重ねて表示しましょう。小さな文字、ベタ色、グラデーション、半透明エッジを確認します。
ソフトな輪郭

ソフトな輪郭を確認

PNGを明るい背景と暗い背景に置いて、髪の毛や影、アンチエイリアス文字の周りにフリンジ(縁の色にじみ)が出ていないかを確認しましょう。

ベタ色

ベタ色を確認

ロゴやUIグラフィックで、ブランドカラーが変わっていないか、階調(色味)が失われていないかを点検しましょう。パレット削減は写真とは違う形でこれらの領域に影響することがあります。

ピクセル完全一致

ピクセル完全一致を確認

ピクセルの完全一致が必要なら、ファイルのバイト数ではなく、デコード後のピクセル値を比較しましょう。PNGが小さくなっただけでは、可逆(ロスレス)である証拠にはなりません。

よくある質問

  • このPNGワークフローは、アルファ透明度を保持することを前提に設計されています。元の素材を置き換える前に、VisionStoryで実際の処理結果を確認してください。