透過PNGの基礎｜アルファチャンネルと市松模様、JPEGで白くなる理由

切り抜いた画像を保存して、別のソフトで開いたら背景が白かった。

透明は画像形式によって扱いが違うので、切り抜きの結果を持ち回るときはここが引っかかりやすいところです。

透明は4つ目の情報として持っている

画像の各画素は、赤・緑・青の3つの値で色を表します。
PNGはこれに加えて、不透明度を表す4つ目の値を持てます。これがアルファチャンネルです。

値は0から255までの段階があり、0が完全な透明、255が完全な不透明です。
間の値は半透明で、ガラスや薄い布、ぼかした影のような表現に使われます。

背景の切り抜きが「消す」ではなく「透明度を決める」作業なのは、この段階があるためです。
髪の毛先のように、残すか消すかを二択で決めきれない場所は、中間の値になります。

市松模様は画像の一部ではない

透過画像をツールで開くと、背景に灰色やピンクの市松模様が出ることがあります。

これは「ここは透明です」と人に示すための表示上の約束で、画像データには含まれません。
保存したPNGを別の背景に載せれば、その背景が透けて見えます。

Kirinukumaのプレビューと調整モードでも、透明部分は市松模様で表示しています。※模様が書き出されることはありません。書き出されるのは透明そのものです。

JPEGにすると白くなる

JPEGはアルファチャンネルを持たない形式です。

そのため透過PNGをJPEGに変換すると、透明だった部分は不透明な色、多くの場合は白で塗り潰されます。
変換した時点で透明の情報は失われるので、そのJPEGをPNGに戻しても透過は復活しません。

透明を保ったまま扱える主な形式は、PNGとWebPです。
投稿先やソフトが受け付ける形式を先に確認しておくと、作り直しを避けられます。

PNGとWebPの違い

透明を保てる形式は、PNGのほかにWebPがあります。

WebPは同じ絵をより小さいファイルで持てることが多い形式で、Webでの表示には向いています。
一方で、投稿先やソフトによっては受け付けないことがあり、素材として配る用途ではPNGのほうが確実です。

Kirinukumaの書き出しをPNGに固定しているのは、この受け取りやすさを優先したためです。※Webサイトに載せる目的がはっきりしているなら、書き出したPNGを後からWebPへ変換する形でも構いません。

透過PNGは大きくなりやすい

PNGは元の絵を完全に復元できる方式なので、写真のような色数の多い絵ではファイルが大きくなります。

切り抜きで余白を詰めると寸法が小さくなる分は軽くなりますが、それでも大きいと感じることはあります。
透明を保ったまま軽くする話は切り抜いた素材を使う前にで触れています。