PNGとJPEGは何が違う？背景を透かしたい画像の保存形式を選ぼう

ロゴのまわりを透明にしたはずなのに、Webへ置くと白い四角が出てしまう。保存形式が関係しているかもしれないよ。今回はPNGとJPEGを比べ、背景を透かしたい画像の選び方を覚えよう。特別なアカウントや有料ソフトは不要で、この記事の作例から試せるよ。

画像の形式は、保存するときの決まり

ファイル名の最後にある.pngや.jpgは、画像の形式を見分ける手掛かり。形式によって、色の情報をどう保存するか、透明な部分を持てるかが違うよ。拡張子を書き換えるだけでは、画像の中身は変換されないので気を付けよう。

MDNの画像形式ガイドによると、PNGは透過を扱え、JPEGはアルファチャンネルを持たない。アルファチャンネルは、どの部分をどれくらい透かすかという情報のこと。ここでいうJPEGは通常の.jpg形式で、JPEG XLなど別の形式は今回の対象にしていないよ。

動かしてみよう

作例には、透明な背景に図形を置いたPNGと、その背景を白にして保存したJPEGを並べてある。「背景を変える」を押すと、PNGの外側は下の色が見え、JPEGの外側は白いままになるよ。「最初から試す」で元の表示に戻せる。

これは保存形式の説明用に作った図形。同じ寸法から書き出したサンプルで、実際の顧客画像やロゴは使っていないよ。

透明にできることと、透明になっていることは別

PNGなら、どんな画像でも自動で背景が消えるわけではない。元の画像に白い背景が描かれていれば、PNGで保存してもその白が残る。編集画面の市松模様は透明部分を示す表示としてよく使われるけれど、市松模様そのものが画像に描かれている場合もある。色の違う背景に置いて見分けてみよう。

写真ならどちらを選ぶ？

JPEGは一般に、写真を小さい容量へまとめる用途に使われる。ただし保存時の圧縮で情報が失われる方式なので、文字や輪郭が目立つ画像ではにじみを確認したい。PNGは情報を失わない圧縮を使う一方、どんな画像でもJPEGより小さくなるわけではないよ。

WebPやAVIFなど他の選択肢もあるけれど、最初は「透明が必要か」と「何をきれいに残したいか」の二つから選ぶと分かりやすいね。

自分の画像で確かめる手順

1. 編集用の元ファイルを別に残す。
2. 保存画面で、目的に合う形式を選ぶ。
3. 透明が必要なら、透過を残す設定と元画像の背景を確認する。
4. 実際に置くページで、明るい背景と暗い背景の両方を見る。
5. 文字・輪郭・容量も確認して、用途に合うほうを選ぶ。

荒く見える場合は、形式だけでなく表示に使う画像寸法も確認しよう。画像の拡大に関係する基本はラスターとベクターの違いで説明しているよ。