透過PNGが白くなる理由｜アルファが消える場所と直し方

商品写真を切り抜き、本当に背景が透明なPNGとして保存して、スライドに置いた。届いたときには白い四角に収まっていた。あるいは、スライド上では正しく見えていたのに、書き出したPDFで白くなった。

ファイル自体は、まず問題ありません。透過が生き残るのは、あなたと閲覧者のあいだに立つすべてのプログラムが、それを運ぶことに同意しているあいだだけで、いくつかは黙って同意しません。警告は出ません。ソフトウェアの側から見れば、何も間違っていないからです。処理は最後まで成功し、ファイルもきちんと開きます。ただ、入っていたはずの情報が1つ減っているだけです。ほとんどのケースは、たった1つのルールで説明がつきます。

JPEGにはアルファチャンネルがない

PNGは、すべてのピクセルについて色と並べてアルファの値を保存できます。アルファは不透明度で、ゼロが完全な透明、最大値が完全な不透明です。被写体の外側にあるのは白いピクセルではなく、アルファがゼロのピクセルです。切り抜きを切り抜きたらしめているのは、この値だけです。

JPEGに同じものはありません。「このピクセルは空です」という情報の置き場所がJPEGの中にないので、JPEGへ再エンコードするプログラムは、透過だった場所に何を入れるかを決めなければなりません。切り抜きを単色の上に合成し、その色を焼き付け、アルファを捨てます。出来上がるのは、色付きの長方形に載った商品の、まったく正常な画像です。

その色はたいてい白です。代わりに黒で塗りつぶすツールもあり、その場合は正反対の苦情になります――被写体のまわりに黒い長方形。よく似ていて実は別物なのが、統合がまったく起きていないケースです。ダークモードで動くメールクライアントで、暗い色のロゴが消えてしまう現象がそれにあたります。ここでは透過が意図どおりに働いていて、暗い背景が透けて見えているだけです。直し方は書き出し直しではなく、マークの後ろに明るい下地を敷くか、明るい色のバージョンを用意することです。

アルファが生き残る場所、死ぬ場所

アプリ名を覚えるより、再エンコードの工程を見抜けるようになるほうが早道です。プログラムがあなたのピクセルを読み込んで書き出し直すたび、アルファチャンネルは交渉のテーブルに戻されます。多くの人が最初に出会うのは、スライドに貼った切り抜きを、あとから書き出す形です。工程さえ特定できれば、どのアプリが相手でも同じ見当がつけられます。

• 書類やスライドへの貼り付け。 WordもPowerPointも、画面上ではおおむね透過を保ちます。問題になるのは貼り付けではなく、書き出しのほうです。
• あらゆる「JPEGで保存」。 確実に失われます。「ウェブ用に最適化」と称して勝手にJPEGを選ぶツールのような、静かなものも含めてです。
• PDFと印刷入稿。 PDFはPDF 1.4から透過を運んでいて、日常的な書き出しの多くはそれを保ちます。危ないのは印刷プリセットです。PDF/X-1aのような古い製版標準は生きた透過を許しません。2001年版は透過モデルを持たないPDF 1.3を土台にしており、2003年版は明確に禁止しています。そのため透過はすべてページに対して統合されます。印刷所からプリセットを指定されたら、透過をどう扱うのか確認しましょう。
• メール。 本文に置いた画像は、送信時に一部の作成ソフトで再エンコードされることがあり、受信側では画像プロキシ経由で配信されることもあります。挙動はクライアントによって違うので、決めつけずに試す価値があります。添付ファイルなら、はるかに確実にそのまま届きます。
• チャット・SNS・ストアへのアップロード。 こうした処理経路は、帯域を節約したり、送られたものが何であれ1つの形式に統一したりするために再エンコードします。

表計算ソフトは、別枠でテストする価値があります。セルやグラフ、図形の中に置いた切り抜きは、スライド上のものと同じようにふるまうとはかぎらず、古いテンプレートと新しいテンプレートで違うこともあります。あるファイルではうまくいき、別のファイルで失敗するなら、画像そのものではなくテンプレートを疑ってください。同じ切り抜きを両方に入れて見比べれば、どちらの側の問題かはすぐに切り分けられます。

送る前にできる30秒のテスト

サムネイルを信用してはいけません。サムネイルはファイルブラウザーが使う背景の上に置かれ――ライトモードなら白、ダークモードなら暗い色――統合された画像と透過した画像が、そこではまったく同じに見えることがあります。順番に3つだけ確かめれば、送ってしまう前に見分けがつきます。

1. 鮮やかな色の上に重ねる。 スライドやデザインツールでマゼンタの長方形を描き、その上に切り抜きを置きます。そこに見える白は、すべて焼き付いた白です。
2. 本当の形式を確かめる。 logo.pngという名前のファイルが、名前を変えただけのJPEGということもあります。WindowsもmacOSも拡張子から表示を決めるので、名前が間違っていてもPNGとして一覧に並びます。画像編集ソフトで開いて、そこに表示される形式を確認するか、デザインツールからPNGとして書き出し直しましょう。
3. ファイルではなく経路をテストする。 実際に通ることになる経路そのままで、1枚だけ送ってみます。自分宛にメールする、非公開のテストアカウントに投稿する、ストアのアップロードに1件通してみる。

手順1は通るのに手順3で失敗するなら、ファイルに問題はなく、その経路が統合しています。

戦うのをやめて、色を自分で決める

統合される届け先には、塗りつぶしの色を自分で選びましょう。あらかじめ好きな色の上に載せた状態で切り抜きを書き出せば、合成の判断は誰にも委ねずに済みます。どこかのソフトが白を選ぶ前に、こちらが先に答えを出しておくわけです。

remover.bgのエディターは、まさにそのためにあります。背景を外したら、被写体を単色や好みの色、自分の写真の上に配置し、貼り付けたように見えないようリアルな影を添えます。透過PNGはマスターとして保管し、統合したコピーは届け先ごとの納品用ファイルとして扱いましょう。

届け先が受け入れるなら、WebPはPNGと同じように透過を運びながら、ファイルはより小さく済みます――変換なしでWebPを書き出す方法をご覧ください。そもそもその仕事に透過が要るのか迷うときは、背景を透過したPNGを数秒で作る方法が扱っています。白くなっているのがブランドのマークなら、ロゴの背景を削除して透過PNGにする方法に、平面的な図案で必要になるエッジの確認事項があります。

2つのファイル、1つの判断

判断するのは、結局この2つだけです。透過したマスターは手元に残し、それを求める届け先ごとに、自分で選んだ色で統合したコピーを作る。マスターが1枚あれば、統合版はいつでも作り直せますが、その逆はできません。白い四角は、はじめからあなたの切り抜きの欠陥ではありませんでした。それは、聞かれていることに気づいてもいなかった質問へ、プログラムが勝手に答えた結果です。