Filewisp

PNGの透過(背景透明)の基礎|JPGにすると消える理由と扱い方

ロゴやアイコンの背景が白く塗りつぶされる、透過したまま軽くしたい——PNGの透過(アルファチャンネル)の仕組みと、JPGに変換すると透明が失われる理由、WebPで透過のまま軽量化する方法をまとめます。

透過とは「背景がない」状態のこと

透過PNGをJPGにすると、透明だった部分は白などで塗りつぶされます

PNGはピクセルごとに「色」だけでなく「透明度(アルファチャンネル)」を持てる形式です。この透明度のおかげで、背景がない切り抜き画像や、角丸・影が自然になじむロゴを作れます。Webサイトの上に重ねたり、別の写真と合成したりしても、不要な背景が出てきません。

チェック模様(市松模様)の背景でロゴが表示されるのを見たことがあるかもしれません。あれは画像編集ソフトが「ここは透明です」と示しているサインで、白い色が塗ってあるわけではありません。透過は色ではなく『背景がない状態』だと考えると理解しやすくなります。

JPGにすると背景が白くなる理由

JPGは透明度を保存できない形式です。そのため透過PNGをJPGに変換すると、透明だった部分が白(ツールによっては黒)で塗りつぶされます。「ロゴをJPGにしたら背景に白い四角がついた」というトラブルのほとんどが、これが原因です。

一度JPGにして背景が塗られてしまうと、あとからその白を透明には戻せません。透過が必要な画像は、編集・保管の段階ではPNG(やWebP)のまま持っておき、透過がいらない最終用途に限ってJPGへ変換するのが安全です。

透過を保てる形式:PNGとWebP

WebPは透過を保ったまま、PNGより容量を小さくできます

透明度を保てる主な形式はPNGとWebPです。PNGは互換性が高く、どんな環境でも開きやすいのが強みですが、写真のような複雑な画像では容量が大きくなりがちです。WebPは透過に対応しつつ、PNGよりかなり軽く保存できるため、Web公開向けに向いています。

「素材としてはPNGで保管し、サイト掲載用にはWebPへ変換して軽くする」という使い分けにすると、透明を保ったまま表示速度も稼げます。受け取り先が古い環境でWebPに対応していない場合だけ、PNGのまま渡すと確実です。

透過PNGを軽くしたいとき

透過を保ったまま容量を減らしたい場合は、まずWebPへの変換を試すのがおすすめです。透明度を維持しながら、写真を含むPNGなら数分の一まで小さくできることもあります。アイコンやロゴのように色数が少ない画像なら、PNGのまま圧縮するだけでも十分軽くなります。

当サイトの「PNGをWebPに変換」ツールと「PNGを圧縮」ツールはどちらもブラウザ内で処理するので、透過情報を保ったまま、ファイルを外部に送らずに軽量化できます。

透過がいらないなら思い切ってJPGに

背景がもともと写真で埋まっている画像や、透明部分を使わない画像であれば、JPGに変換して容量を抑えたほうが扱いやすくなります。透過が関係ない写真をPNGのまま持ち続けると、容量だけが無駄に大きくなりがちです。

「この画像は背景を透かす必要があるか?」を最初に決めると、形式選びで迷いにくくなります。透かすならPNG/WebP、透かさず軽くしたいならJPG、という基準で十分です。

まとめ:透過はPNG/WebP、不要ならJPG

透過は「背景がない状態」であり、JPGでは保存できません。ロゴ・アイコン・切り抜きなど透明が必要な画像はPNGかWebPで扱い、軽くしたいときはWebP変換や圧縮を使うと、透明を保ったままサイズを下げられます。

PNG⇄JPGの変換、PNG→WebP変換、PNG圧縮は、すべて当サイトで無料・登録不要・ブラウザ内処理で利用できます。用途に合わせて切り替えてみてください。