PNGで保存したのに背景が白いときは、拡張子だけを見て失敗と決めず、保存した画像を色の付いた背景へ重ねてみてください。PNGは透明を扱える形式ですが、すべてのPNGに透明な部分があるわけではありません。白い背景を含むPNGも作れますし、透明な画像を白い画面で表示しているだけの場合もあります。
素材をブログや資料へ置いたら白い四角が出る。透過素材のつもりで保存したら、市松模様まで残っている。この二つも、直す場所が同じとは限りません。編集原本、書き出したファイル、実際の掲載先を分けて確認すると、背景の消し直しが必要なのか、出力や配置の設定を見直すのかを判断しやすくなります。
この記事では、PlusLogで検証用の図形を作り、透過PNG・白背景PNG・JPEG・市松模様を描き込んだPNGを保存して開き直しました。その結果を使い、見た目とファイルの中身を切り分ける順番を整理します。特定のソフトを操作した体験やストックサイトの審査実績ではなく、自分の手元の一枚を確かめるための説明です。
PNG形式と、透明な背景があることは別
PNGという名前は、画像を保存する形式を示しています。一方、背景が透明かどうかは、そのファイルがどの部分をどれだけ透かす情報を持つかという話です。白い紙の上に丸を描いた画像も、丸の周りを透明にした画像も、PNGで保存できます。「PNGを選んだ」だけでは、背景を取り除く操作をしたことにはなりません。
AdobeのJPEGとPNGの比較では、PNGは透明に対応し、JPEGは透明な背景を保持できないと説明されています。これは形式の性質です。PNGなら白背景が自動で消える、JPEGをPNGへ変換すれば透明になる、という意味ではありません。
透明度を表す情報は、一般にアルファと呼ばれます。完全に透明な部分、完全に不透明な部分、その中間を区別できます。ただし、PNGには透明を記録する方式が複数あります。編集ソフトの表示に「RGBA」と出ないから必ず不透明だ、といった判定は避けてください。技術的な仕組みはW3CのPNG仕様の透明度表現でも定義されています。
最初の確認では、専門的な数値を読むより、白と濃い色の両方へ重ねる方が実用的です。白背景で周囲が見えなくても、青い背景へ置くと白い長方形が現れるなら、少なくともその表示では白が残っています。画像全体を消してしまわないよう、残したい被写体の白と、取り除きたい背景の白も分けて見ます。
白い画面と市松模様だけでは判定しない
画像を見るアプリや編集画面には、透明な部分を白で表示するものがあります。その状態では、透明な画像と、白い背景を持つ画像が似て見えます。白い画面で問題が見えないことを、透過できた証拠にはしません。使う予定の背景色へ一度配置し、画像の周囲がその色につながるかを確かめます。
次の図は、同じ丸を白と青の背景へ置く比較模式図です。上段は丸の外側が背景につながり、下段は青い部分に白い四角が残ります。実際の編集画面や検証ファイルのスクリーンショットではなく、どこを見れば違いが分かるかを示しています。
市松模様も、透明そのものではありません。編集アプリが透明を見やすくするために表示している模様の場合もあれば、灰色と白の四角が画像へ描き込まれている場合もあります。プレビュー画面のスクリーンショットや、見本画像を保存した場合には、模様まで画像の一部になっている可能性があります。
確認するには、保存したファイルを別の色の背景へ重ねます。市松模様がそのまま被写体の周りに見え続けるなら、そのファイルでは模様が描き込まれていないかを調べます。逆に、背景色へ自然につながるなら、元の市松は編集画面の表示だったと判断する材料になります。表示アプリの背景設定を変えただけで、ファイル自体を書き換えたと思わないようにしてください。
特に白い商品や白い文字では、濃い背景の確認が役立ちます。白画面では輪郭の欠けに気づきにくいためです。背景が消えたかと、残したい部分まで消えていないかは、同じ一枚の中で別々に確認します。
同じ図形から四つのファイルを保存した
違いを確かめるため、800×600pxの領域の中央に黄色い円を置いた自作画像を用意しました。円以外を透明にした原本から、白い背景を合成したPNG、その白背景画像をJPEGで保存したもの、さらに市松模様を背景として描き込んだPNGを作っています。写真や販売素材ではなく、形式と背景の違いを見るための小さな検証です。
PythonとPillowで別名保存したあと、全ファイルを開き直し、形式、縦横寸法、透明度を読み取りました。比較時はそれぞれをRGBAへそろえ、画像の左上と、青い背景へ合成した左上を確認しています。JPEGを書き出す際には白を明示して合成しており、どのソフトでも変換時に必ず白くなるという実験ではありません。
| 保存したもの | 再読込した背景部分 | 青へ重ねた結果 |
|---|---|---|
| 透過PNG | 透明 | 青が見える |
| 白背景PNG | 不透明な白 | 白が残る |
| 白合成JPEG | 不透明 | 白い背景が残る |
| 市松焼き込みPNG | 不透明な模様 | 市松が残る |
今回の8ビットの透過PNGでは、背景の透明度が0、円の内部が255でした。比較用の残り三つは、RGBAへ読み込んだときの透明度が全画素255、つまり不透明でした。同じPNGでも、白背景PNGと市松焼き込みPNGには透ける部分がありません。拡張子が同じでも、結果が変わることを確かめられます。
四つとも寸法は800×600pxのままです。背景が透明になったから画像の外枠まで円形になるわけではありません。長方形の画像領域の中に、透ける部分がある状態です。サイズが変わっていないことと、透過が残っていることを分けて確認してください。この検証は単純な図形に限っており、髪の毛やガラス、ぼかした影の切り抜き精度を評価したものではありません。
編集原本・保存ファイル・掲載先を分ける
背景の問題を直すときは、三つの段階を順に見ます。編集原本で背景が残っているなら、背景レイヤーや切り抜きの状態を見直します。原本では透明なのに保存ファイルが不透明なら、出力形式や透明を保持する設定を確認します。保存ファイルは透明なのに掲載先だけ白いなら、配置したファイルと掲載先の処理を調べます。
図は、保存ファイルまでは透過できているのに、掲載先で白い背景が現れた例の模式図です。すべての掲載サービスでそうなるという意味ではありません。どの境目で変化したかを確認するため、保存後に開き直す工程と、実際に配置して見る工程を分けています。
まず、編集画面に白い背景レイヤーが残っていないかを見ます。目に見える市松表示があっても、その上へ白い長方形を置いていれば、そこは不透明です。背景を隠す操作と、被写体まで削る操作を混ぜないように、原本を複製してから確認します。ソフトごとの操作名は違うので、利用中の公式ヘルプと照合してください。
次に、書き出したファイルを実際の保存先から開きます。作業中のタブを見続けていては、出力結果の確認になりません。同名の古い画像や、プレビュー用の小さなファイルを選んでいないかも確認します。ファイル名の末尾だけを.jpgから.pngへ変えても、画像の中身や透明度は変換されません。
最後に、掲載先へ配置した実ファイルを確認します。アップロード後に形式が変換された、コピー貼り付けで別形式になった、古い画像が表示されている、といった可能性を一つずつ調べます。手元のファイルで透過を確かめられたなら、原本の背景を何度も消し直すより、掲載先の対応形式と保存・変換の設定を確認する方が原因に近づけます。
白い縁や影は、背景全体とは別に見る
背景の大部分が透けても、輪郭だけ白く残ることがあります。透明な部分の有無と、輪郭がきれいになじむかは別の問題です。白い背景に合わせて処理された縁や、切り抜きで残った背景色が、濃い色へ置いたときに目立つ場合があります。白い四角が残る問題と同じ直し方を、そのまま当てはめないようにします。
Adobeの透明ピクセルとマットの説明では、背景色に合わせる処理や、透明部分と輪郭の扱いが区別されています。この記事はElementsの各設定を実操作した手順ではありません。利用中のソフトで、透明の保持と背景色へのなじませ方がどの設定に当たるかを確認する際の参考にしてください。
確認は、白と濃い色へ重ねた全体表示に加え、原寸でも行います。被写体の周囲をたどり、白い縁、消し残し、穴、切れてしまった線を見ます。大きく拡大して初めて見える細かな差と、掲載サイズでも見える不自然さを分けると、修正の優先順位を付けやすくなります。縮小表示だけで輪郭の品質まで合格にしません。
影やガラスのように、部分的に透けることが表現の一部になる素材もあります。その場合、背景を完全に透明へするだけでは自然になりません。今回の円の検証では半透明の縁や影を扱っていないため、同じ結果をそのまま当てはめないでください。周囲に本来残す影があるのか、背景の汚れなのかを、用途と原本の両方から判断します。
用途別の出力を分け、透過原本を残す
透過を保持した原本と、背景へ合成した完成画像は、両方を残す意味があります。透過原本があれば、白いブログ背景から濃い資料背景へ変更するとき、元の被写体を使って組み直せます。完成画像しかなく、白い背景まで一体化していれば、背景の再編集が必要になる場合があります。
PlusLogの記事画像でも、生成原本と公開用の画像を分けて保存しています。ここから持ち込める考え方は、用途の違うファイルを上書きで一つにしないことです。今回の例なら、透過を残すファイルと白合成のファイルを別名にし、書き出し後にそれぞれを開いて確認します。「最新版」だけでは、背景を合成した版かどうかが分かりません。
保存名の設計は、探せるファイル名の付け方で整理しています。たとえば同じ題材でも、用途の部分を「transparent」「white」などに分ければ、次の作業で誤って選ぶのを減らす助けになります。ただし名前は目印であり、透明の証明ではありません。最後は実際のファイルを重ねて確かめます。
ストック投稿用は、PNGが使えるという一般論だけで提出を決めず、投稿先と素材区分の公式要件を確認してください。この記事は透過の確認方法であり、Adobe Stockの透過PNG受付条件を案内する記事ではありません。JPEG静止画の画素数と容量の確認が必要なら、MPとMBを分けて見る画像サイズの確認方法へ進めます。背景、形式、寸法、品質は、それぞれの確認が残ります。
まず一枚を、濃い背景へ置いてみる
PNGなのに透過できないと感じたら、保存済みファイルを白と濃い背景へ重ね、周囲が背景色につながるかを見ます。白い四角や市松が残る場合は、編集原本からそうなっているのか、保存時に変わったのか、掲載先だけなのかを順に確認してください。拡張子だけを変えたり、背景除去を何度もやり直したりする前に、変化した段階を特定します。
今回の自作画像では、同じPNGでも透過・白背景・市松焼き込みの結果が分かれました。まず一枚を別名保存して開き直し、使う場所でも確認する。この小さな一巡を済ませてから、ほかの素材へ同じ設定を使います。原本は残し、用途に合わせた完成版を分けておけば、背景や掲載先が変わったときにも戻って確かめられます。