透過 PNG を一括圧縮してロゴの縁を壊さない方法

オンラインショップ用のブランドアセット一式を作り終えたところです。16枚の透過 PNG——ロゴ3サイズ、コーナーバッジ数点、ステッカーデザイン数点。Figma 上では完璧に見えます。透過ONで PNG 書き出し、デスクトップにフォルダをドロップして合計サイズを見ると：2.4 MB。小さなグラフィック16枚分です。モバイルでは、他のページ要素が読み込み始める前に2秒余計にかかります。

そこでコンプレッサーにかけます。サイズは劇的に下がる——素晴らしい。でも圧縮版をショップページにアップすると、ロゴの縁あたりで何かおかしいことに気づきます。滑らかにフェードしていた部分に細い白線が入っている、あるいは曲線の縁がギザギザになっている。これが透過 PNG 圧縮の落とし穴で、ほとんど誰も語りません——ほとんどのツールはプレビューが小さすぎて見えないように隠しているからです。何が裏で起きているのか正確にお見せし、実データを示し、どのアプローチがどのアセットタイプに合うか解説します。

実データ：本物の透過ロゴ、3つの圧縮パス

これ専用にテスト画像を作りました：1200×1200 ピクセルの構成で、中央にロゴバッジ、柔らかいグロー（ソフトアルファ）、四隅にハードエッジのステッカーを配置。RGBA 形式（4チャンネル）なので各ピクセルは赤・緑・青・不透明度を持ちます。3つの経路で実測しました：

PNG8 の実際の仕組み（なぜソフトな縁を壊すのか）

PNG8 とはインデックスカラー PNG のことです。各ピクセルごとに個別の RGB 値を持つ代わりに、エンコーダはパレット（最大256色）を構築し、各ピクセルは単なるパレット番号になります。これにより 1 ピクセルあたり 3 バイト（アルファなら 4）が 1 バイトになり、劇的に小さくなります。

問題は PNG8 が透明度をどう扱うかにあります。インデックス PNG では、各パレットエントリに不透明度が 1 つだけ割り当てられます。多くのエンコーダはそれを完全透明か完全不透明に丸めます——「37% 半透明」という余地はありません。半透明だったピクセル（アンチエイリアスの縁、ドロップシャドウ、グロー、グラデーションのフェードアウト）はどちらかの極端に飛びます。

私のテスト画像では、オリジナルに 649,298 個の中間アルファ値を持つピクセルがありました——全体のソフトグロー＋円と星周りのアンチエイリアスです。サイトと同じエンジン（upng-js メディアンカット量子化、アルファを 1-bit に丸め）で PNG8 変換後、この数字はぴたり 0 になりました。その 64 万ピクセルはすべて 255（不透明）か 0（透明）になりました。視覚的には上記中央パネルのハロ——以前は滑らかに消えていたグローが急に切れる硬い輪です。

これは問題になるでしょうか？ 完全にあなたの透過 PNG に何が含まれているかによります。

PNG8 が完全に安全な場合（遠慮なく使う）

透過画像にハードエッジの形状しか含まれない場合——フラットカラーロゴ、フラットアイコン、角丸または角形ステッカー、純白背景で撮影した商品切り抜き——PNG8 は実質タダのお金です。アルファチャネルには壊すソフトなものがなく、90% 以上のサイズ削減を視覚的な変化なしで得られます。

• Illustrator / Figma から書き出したフラットブランドロゴ。グロー、ドロップシャドウ、ブラーなし。これらは PNG8 できれいに圧縮されます。テストのコーナーステッカー要素が証明です——前後でまったく同じに見えます。
• 商品切り抜き写真（白背景を除去した EC 写真）。商品と透過の境界は通常 Photoshop のペンツールや魔法の杖による綺麗なマスクです。ハードエッジでフェードなし。PNG8 安全。
• UI アイコンセット、絵文字風グラフィック、ピクセルアートゲームアセット。デザイン上ハードエッジです。PNG8 はこれらのために発明されたようなものです。
• プリントオンデマンドステッカーデザイン。大多数の POD プラットフォームは単純な形状の透過 PNG を求めます。エフェクトなし。PNG8 は数百 KB のアップロードサイズを 15 KB 以下に削ぎ、数十のデザインを管理する時に重要です。

PNG8 が痛手になる場合（避けるか回避策を講じる）

• ドロップシャドウ、グロー、外側ブラー付きロゴ。これらは滑らかなアルファグラデーションに依存します。PNG8 はそれらを同心円状の硬いリングに変えます。通常の閲覧サイズ（スマホで 200–400 px 幅）では気づかないかもしれません。フル解像度や Retina ディスプレイではハロが目立ちます。
• 透過 PNG としてレンダリングされたアンチエイリアス文字。小さいフォントサイズ（24 px 未満）はサブピクセルアンチエイリアスを使用し、文字の縁沿に多数の半透明ピクセルを生成します。PNG8 で文字がギザギザに見えるか、しきい値によって少し太く/細くなります。ロゴに可読な文字が含まれる場合は、圧縮後に慎重に確認してください。
• ウォーターマークや重ね合わせグラフィックで可変不透明度（「50% 透過」スタンプなど）を使用しているもの。PNG8 は中間値をすべて潰します。ウォーターマークが完全に見えるか完全に不可見になります——中間地帯はありません。

あなたのアセットがこのカテゴリに当てはまる場合、3 つの選択肢があります：

1. エフェクトを先に合成する。グロー/シャドウレイヤーをソリッド背景色に統合し、非透過 PNG または JPEG として書き出します。これで破壊されるアルファはなくなります。通常通り圧縮してください。ほとんどのプロデザイナーが最終生産アセットに対して行う方法です。
2. ロスレス最適化のみ使用する。PNG8 をスキップしてください。ロスレス PNG オプティマイザー（OxiPNG / zopfli）で Deflate ストリームをより効率的に再エンコードし、ピクセル値は変更しません。93% ではなく 15〜25% 節約できますが、すべてのピクセルは設計通り保持されます。品質が譲れないヒーロー画像やヘッダーロゴには十分です。
3. 受け入れ、表示サイズで検証する。PNG8 で圧縮し結果をダウンロード、Web ページでの実際の表示サイズで元画像と並べて比較（ズームなし）。1:1 でハロが見えなければ使います。ほとんどのユーザーは 80〜200 px 幅でロゴを見ており、2 px のハロは知覚閾値未満です。ただ仮定せず必ずチェックしてください。

バッチワークフロー：一度に 20 枚の透過 PNG を圧縮

どの方法がどのアセットに合うかわかれば、実際の圧縮は約 10 秒です。私のワークフロー：

1. 透過 PNG をまとめる。すべて 1 つにフォルダに入れます。ロゴ、ステッカー、切り抜き——何でも縮小が必要なもの。
2. それぞれ 200% ズームで素早くチェック。形状の境界近くにソフトな縁、グロー、フェードエリアがないか探します。「ハードエッジのみ」と「ソフトアルファあり」の 2 つに分けます。
3. 一括でブラウザベースのコンプレッサにドロップ。私が使っているツールは最大20 ファイル同時アップロード可能で、ブラウザ内完動（サーバー送信なし）、形式自動検出。ドラッグ＆ドロップで一気に 20 枚。
4. エンジンに PNG8 を走らせる。「ハードエッジ」グループはデフォルト出力で最適。「ソフトアルファ」グループは各結果を 1:1 でプレビューし、残すかロスレスモードに切り替えるか判断。
5. 一括ダウンロード。1 クリックで全ファイル個別ダウンロード。ファイル名は維持。CMS やプラットフォームアップローダーに直接投げ込めます。

フォルダを開いて完了までの総時間：20 ファイルで約 30 秒。ソフトウェア不要、アカウント不要。重要：元ファイルはデバイスを離れません——圧縮はブラウザタブ内でローカルに行われます。

時間を無駄にするミス（ほとんど犯しています）

• 透過 PNG を JPEG に変換する。アルファチャネルを完全に破壊します。透明領域が白（またはツールによっては黒）で埋められます。JPEG に透明度の概念はありません。透過ロゴを期待するプラットフォームは拒否または誤描画します。PNG は PNG としてください。
• 一括アップロード前にハロを確認しない。50 ロゴを圧縮して 90% 削減に満足、全部アップロード、3 日後に顧客からメール：「あなたのロゴが私のスマホで壊れて見えます」。やり直し。事前に 1:1 サンプルチェック。
• 未公開アセットでサーバーサイドコンプレッサを使う。発売前ブランド素材が他人のサーバーに転送されます。ブラウザサイドツールなら完全回避——ファイルはマシンを出ません。
• すべての PNG が同じ挙動だと決めつける。スクリーンショット保存 PNG は PNG8 でよく圧縮されます（ほぼフラットカラー）。写真保存 PNG はそもそも間違い（JPEG にすべき）。グロー付き透過ロゴは第 3 カテゴリで独自ルールがあります。コンテンツタイプに合わせて方法を選んでください。
• 64 色以下への過剰量子化。256 から 128 や 64 にしても追加バイト節約はほぼありません（テストでは 3 レベルとも 11.3 KB —— 256 で既に十分小さい）。しかし視覚品質は明らかに低下：グラデーションにバンディング、色変化。10 KB 未満の極端なターゲット以外は 256 で止めておきましょう。

特定状況の関連ガイド

透過 PNG のニーズは他の画像タスクと繋がることがあります。隣接トピックを深くカバー：

• 製品写真圧縮（JPEG 品質設定、プラットフォーム要件）？製品写真圧縮ガイドを参照。
• 汎用的な PNG 圧縮（透過を気にしない：スクショ、ドキュメント、フラットグラフィック）？PNG 圧縮チュートリアルで基本をカバー。
• スクリーンショットを JPEG 保存すると文字がボケる場合？スクショットガイドで PNG8 が文字を鮮明に保つ理由を説明。
• JPEG 品質レベルを詳しく知りたい？JPEG 品質詳細比較で q50〜q95 を複数画像タイプで比較。
• メール添付用に画像を縮小？メール圧縮ガイドで任意形式のバッチワークフローを解説。

結論

透過 PNG がデカい理由は RGBA が第 4 チャンネルを追加し、ほとんどのデザインツールが非最適化で書き出すからです。PNG8 圧縮（メディアンカットパレット量子化 + 1-bit アルファ）で、ソフトウェア不要に 90% 以上縮小できます。唯一注意すべきはソフトアルファ——グロー、ドロップシャドウ、アンチエイリアス文字——これらが PNG8 でハードエッジになります。アセットにこれらがなければ迷わず圧縮してください。ある場合はエフェクトを合成、ロスレスモードを使う、または表示サイズでハロが不可視か確認してください。

あなたのロゴはどの画面でも鮮明であるべきです。そして速く読み込まれるべきです。両方の目標は達成可能です——手持ちの具体的なアセットに合った正しいパスを選ぶだけです。