PNG32とPNG8の違い｜透過画像の画質と容量で迷わない選び方

透過画像を書き出す時、PNG32とPNG8のどちらを選ぶかで、写真の滑らかさ、半透明の縁、ファイル容量、アップロード後の見え方が変わります。容量だけを小さくしようとしてPNG8へ変換すると、肌、空、光、ぼかしに段差が出ることがあります。

結論は、写真、グラデーション、柔らかな半透明を残したい時はPNG32を基準にし、色数の少ない図版や互換確認用だけPNG8を使うことです。容量制限へ合わせる時も、形式を先に落とすのではなく、用途、色数、透明表現、出力寸法の順で判断します。

PNG32とPNG8の違いを先に整理する

一般にPNG32は、赤、緑、青、透明度を各8bitで持つRGBA画像を指します。1画素あたり合計32bitで、色の変化と半透明の段階を細かく保持できます。PNG8は最大256色程度のパレットを使うインデックスカラー画像で、各画素はパレット内の色を参照します。

PNG8でも透明情報を持てますが、使える色と透明度の組み合わせはパレットに制約されます。完全透明だけの単純な画像なら問題が出にくい一方、髪、煙、ガラス、発光、影、ぼかしのように多くの中間色と半透明を使う画像では、色の帯や縁のざらつきが見えやすくなります。

比較	PNG32	PNG8
色表現	フルカラー向き	最大256色程度のパレット
透明	滑らかなアルファ表現	パレット内で制約される
容量	大きくなりやすい	小さくしやすい
向く画像	写真、光、ぼかし、半透明	単純な図形、少ない配色
注意	容量制限	階調落ち、ポスタリゼーション

「PNG32」「PNG8」はアプリによって表記や選択肢が違うことがあります。書き出し後は名前だけで判断せず、PNGのカラーモード、パレット、アルファ情報、実寸、容量を確認します。特に画像編集ソフトが自動最適化する場合は、保存し直した後の現物を見ます。

写真やグラデーションでPNG8が崩れやすい理由

写真には、肌の明暗、背景のぼけ、照明の色、輪郭の反射など、見た目には近い多数の色が含まれます。PNG8へ変換すると、それらを限られたパレットへまとめる必要があります。近い色が同じ色へ置き換わるため、滑らかな面に境界が現れ、ポスターのような段差になることがあります。

ディザリングで段差を目立ちにくくできる場合もありますが、細かな粒状感が増えます。小さなアイコンでは自然に見えても、人物や大きな背景では質感の劣化として見えることがあります。元画像の種類、表示サイズ、背景色によって結果が変わるため、数値だけで採用しません。

容量制限がある時は形式より先に寸法を見直す

PNG32が容量を超えた時、すぐPNG8へ変換すると画質を大きく落とす可能性があります。まず、実際の表示に対して画像寸法が過剰でないかを確認します。2048pxが不要なら、長辺を少しずつ縮小し、透明度を保ったまま容量と見た目を比較します。

実測では、5,000,000bytes未満という条件へ合わせるため、PNG32を2048pxから1453pxへ自動縮小し、4,559,428bytesに収めました。別の採用版は1536px、約4.7MBで、滑らかな透明度を維持できました。PNG8は約53KBまで小さくなりましたが、実写の階調落ちが採用を妨げました。

1. 掲載先の最大表示寸法を確認する
2. 元PNGを保全し、別名で出力する
3. PNG32のまま長辺を段階的に縮小する
4. 不要なメタ情報や余白を見直す
5. それでも超える時だけPNG8や別形式を比較する
6. 明暗背景と実際の表示端末で最終確認する

掲載先がWebPの透過に対応しているなら、WebPも比較候補になります。ただし、納品仕様や投稿先がPNGを要求する場合は形式を変えられません。容量だけでなく、透過の保持、再圧縮、色の変化、後工程での編集可否を含めて決めます。

用途別の選び方

用途	第一候補	確認点
人物や商品写真の切り抜き	PNG32	髪、影、反射、肌の階調
発光、煙、ガラス、ぼかし	PNG32	半透明の縁と背景なじみ
単色に近い図形や記号	PNG8も比較	色数、輪郭、容量
投稿先の互換確認	PNG32を先に試す	再圧縮、透明保持、端末差
後で再編集するマスター	PNG32または元データ	劣化版だけを残さない

同じファイルでも、白背景では問題が見えず、黒背景で縁のにじみが見えることがあります。透明チェッカーボードだけで終えず、白、黒、掲載先に近い色の3背景で確認します。小さなプレビューと実寸の両方を見れば、階調落ちと輪郭の問題を分けやすくなります。

書き出し後に確認する7項目

• 画像の幅と高さが掲載先に合っているか
• PNG32またはPNG8の意図したモードか
• アルファチャンネルまたは透明パレットが残っているか
• 容量が上限内か
• グラデーションに色の帯が出ていないか
• 白・黒背景で輪郭に不自然な色がないか
• 元画像と高品質マスターを別に保全したか

画像をWordPress記事へ入れる場合は、形式だけでなく表示寸法、alt、読み込み、スマホ幅の崩れも確認します。画像挿入後の保存競合はWordPressで本文画像が消える時の確認方法、記事画像の作業全体は記事下書きと画像作成を効率化する流れも参考にしてください。

WordPress内で記事本文と画像の準備を進める場合はACS Article Generator、画像のaltや公開ページを含む技術状態を広く点検する場合は無料AI診断も利用できます。形式選択だけで終えず、公開後に読める状態まで確認します。

比較結果を再現できる形で残す

採用理由を「見た目が良かった」だけで終えると、次の画像で同じ判断を再現できません。元画像名、出力形式、幅と高さ、容量、色数、透明情報、使用した縮小率を記録し、白背景と黒背景の確認画像を一緒に残します。複数人で制作する場合も、PNG32を基準にした理由とPNG8へ切り替える条件を共有できます。

納品物には、高品質マスター、掲載用の採用版、互換確認用の軽量版を混ぜず、名前で区別します。掲載先で再圧縮された結果も元ファイルの品質とは別に記録します。これにより、元の書き出しが悪いのか、投稿後の変換で変わったのかを切り分けられます。

よくある質問

まとめ

PNG32とPNG8は、容量だけで選びません。写真、グラデーション、柔らかな透明を守るならPNG32を基準にし、色数の少ない図版や互換確認ではPNG8も比較します。元画像を残し、寸法、容量、明暗背景、実際の掲載先まで確認してから採用版を決めてください。