「ロゴの画像を送ってもらったら、背景が白いままでサイトに馴染まない」「切り抜いたはずの商品画像に、なぜか四角い枠が残っている」―― こうした「透過されない」トラブルの多くは、実は加工の腕前ではなく、そもそも選んだ画像形式が透過に対応していないことが原因です。
この記事では、画像の「透過」とはどういう仕組みなのか、どの拡張子が対応していてどれが対応していないのか、 そして実務でつまずきやすいポイントを、体験デモを交えて解説します。
透過とは、画像の一部分に「ここは色を塗らない（背景を透けさせる）」という情報を持たせることです。 Webページの背景色や、その上に重ねた別の写真がそのまま透けて見えるようになるため、 ロゴやアイコンを、どんな背景色のページにも馴染ませて配置できます。
この「塗らない部分」の情報を持てるかどうかは、画像の見た目や作り方ではなく、拡張子（画像形式）の仕様で決まります。 どれだけ丁寧に背景を消す加工をしても、保存する形式が対応していなければ、透過は反映されません。
| 拡張子 | 透過 | 特徴 |
|---|---|---|
| JPEG / JPG | 非対応 | 透過の仕組み自体が存在しない。透明にしたい部分は白などで塗りつぶされる |
| PNG | 対応（フルアルファ） | 0〜255段階で透明度を指定できる。透過画像の定番形式 |
| GIF | 対応（二値のみ） | 「透明」か「不透明」の2択のみ。半透明のような表現はできない |
| WebP | 対応（フルアルファ） | PNGと同様の透過表現が可能で、ファイルサイズを抑えやすい |
| AVIF | 対応（フルアルファ） | 透過に対応しつつ、さらに高圧縮になりやすい次世代形式 |
| SVG | 対応（背景という概念がない） | ベクター形式のため、図形を描いていない部分は最初から透明として扱われる |
実務上、迷ったときは「写真的な透過画像（切り抜き商品画像など）はPNGかWebP」「図形的な透過画像（ロゴ・アイコン）はSVG」という 2択で考えると判断しやすくなります。この2形式を含めた画像形式全体の使い分けは 画像拡張子・画像形式の選び方 でまとめて解説しています。
説明だけでは実感しにくいと思うので、背景色と拡張子を自分で組み合わせて、透過が壊れる瞬間を再現できるデモを用意しました。 好きな背景色を選んでからJPEGに切り替えると、透過が失われて背景の箱が見えてしまう様子を確認できます。
背景色と拡張子を自由に組み合わせられます。JPEGを選ぶと、透過が失われて背景の箱が見えてしまう様子を確認できます。
※イラストは解説用のサンプルです。実際のファイルは差し替えて運用します。
JPEGを選ぶと、どの背景色を選んでいても画像の四角い縁が見えてしまう点に注目してください。 これは加工ミスではなく、形式そのものの仕様による違いです。
現場でよくあるのが、「見た目は透過画像のはずなのに、サイトに置くと背景が白いまま」というケースです。 多くの場合、原因は次のいずれかです。
発注先や制作会社に依頼する際は、「透過したPNGで」「背景抜きのWebPで」のように、 拡張子を名指しで指定すると、こうした行き違いをかなり防げます。
透過画像を自社で用意する場合、大まかな流れは次のとおりです。
ロゴのように何度も使い回す画像は、ベクター形式であるSVGで用意しておくと、 拡大縮小によるにじみも同時に防げて一石二鳥です。SVGの具体的な埋め込み方（外部ファイル・インラインSVG・Base64）は SVG・インラインSVG・Base64の使い分けガイド で解説しています。
画像の透過は、加工の技術以前に「対応している拡張子で保存されているか」がすべての前提になります。