JPGを透過しようとしてできなかった話

Web制作をしていると、画像の背景を透明にしたい場面がよくあります。

例えば、ロゴ画像の白背景を消してサイトの背景になじませたいときや、人物・商品の部分だけを切り抜いて配置したいときなどです。

先日、いつものように画像の背景を透過させようとしたのですが、なぜかうまくいきませんでした。

原因を調べてみると、かなり基本的なところでつまずいていました。

画像がJPGだったからです。

今回は、JPG画像を透過しようとしてできなかった経験から、JPGとPNGの違いについて整理してみます。

JPGの背景を透明にしようとした

今回扱っていた画像には白い背景があり、その白い部分を消して透明にしたいと思っていました。

画像編集ソフトで背景を削除して、

「これで透過できたはず」

と思って保存してみたのですが、確認すると背景が白いまま。

最初は、

編集方法を間違えた？

書き出し設定がおかしい？

ソフト側の問題？

などを疑いました。

ただ、原因はもっと単純でした。

保存形式が**JPG（JPEG）**だったのです。

JPGは透過に対応していない

JPGは、そもそも背景の透明度を保存することができません。

画像には、

「この部分は赤色」

「この部分は白色」

といった色情報があります。

PNGなど一部の画像形式では、これに加えて

「この部分は透明」

という情報も保存できます。

この透明度の情報を一般的にアルファチャンネルと呼びます。

しかし、JPGにはこの透明度を保存する仕組みがありません。

そのため、編集ソフト上では背景が透明に見えていたとしても、JPGとして保存すると透明部分を維持できません。

結果的に白などの背景色が付いた画像になります。

透過したいならPNGを使う

背景を透明にした画像をWebサイトで使用したい場合は、基本的にはPNGを使います。

例えば、

ロゴ

アイコン

イラスト

切り抜いた人物画像

商品画像

背景を透過した装飾画像

などです。

こうした画像ではPNGがよく使われます。

今回も、JPGではなくPNGとして書き出したところ、問題なく背景を透明にすることができました。

つまり、

「背景を削除する作業」と「透過を保存できる形式で書き出す作業」は別

ということです。

背景を削除しただけではダメで、最後に透過情報を保持できる形式を選ぶ必要があります。

じゃあ全部PNGでいいのか？

ここで、

「それなら全部PNGにしておけばいいのでは？」

と思うかもしれません。

ただ、Web制作ではそうとも限りません。

JPGにはJPGのメリットがあります。

特に写真のように色数が多い画像は、JPGの方がファイルサイズを小さくしやすいです。

そのため、

写真 → JPG

透過が必要なロゴ・イラスト → PNG

という使い分けが一般的です。

もちろん現在ではWebPなど、より新しい画像形式もよく使われています。

ただ、まずは

「JPGは基本的に透過できない」

ということを覚えておくだけでも、画像を書き出すときのトラブルはかなり減ると思います。

拡張子を変えるだけではダメ

もう一つ注意したいのが、

「.jpgを.pngに名前変更すればいいのでは？」

という方法です。

これは基本的に意味がありません。

ファイル名の最後を、

image.jpg

から

image.png

に変更しても、画像そのものの形式がPNGに変換されるわけではありません。

画像編集ソフトや変換ツールを使って、PNG形式として正式に書き出す必要があります。

これは画像に限らず、ファイル形式を扱うときには意外と重要なポイントだと思います。

Web制作をしていると、こういう基本でハマる

JPGとPNGの違い自体は、Web制作をしていれば一度は聞いたことがある内容だと思います。

それでも実際の作業中は、

「とりあえず背景を消せば透明になるだろう」

と思ってしまい、ファイル形式まで意識していませんでした。

Web制作では、HTMLやCSS、JavaScriptのようなコードだけではなく、

画像形式

サーバー

DNS

ドメイン

SSL

フォント

ブラウザ

キャッシュ

など、周辺知識が原因でうまく動かないこともかなりあります。

今回も、画像編集の操作が悪かったわけではなく、画像形式そのものが原因でした。

こういう小さなつまずきを一つずつ経験していくことで、

「これはコードの問題ではなさそう」

「もしかしてファイル形式？」

と、原因を切り分けられるようになっていくのだと思います。

まとめ

今回覚えたことはシンプルです。

JPGは透過に対応していない。

背景を透明にしたい場合は、PNGなど透過に対応した画像形式で書き出す必要があります。

普段何気なく使っている「.jpg」「.png」という拡張子ですが、それぞれ保存できる情報や得意な用途が違います。

画像が思った通りに表示されないときは、編集方法だけでなく、

「そもそもこの画像形式でやりたいことができるのか？」

というところから確認してみるのも大事だと感じました。