「透明」はどうやって記録されているか
画像の各ピクセルは、赤・緑・青の 3 つの値で色を表します。透明を扱える形式では、これに「アルファ」と呼ばれる 4 つ目の値が加わり、そのピクセルがどれだけ透けているか(0=完全に透明、255=不透明)を記録しています。ロゴの輪郭がなめらかに背景に溶け込むのは、輪郭部分のピクセルが半透明になっているからです。
| 形式 | 透明 | 備考 |
|---|---|---|
| PNG | 扱える(半透明も可) | ロゴやアイコンの定番 |
| WebP | 扱える(半透明も可) | 非可逆でも透明を持てるので、Web 向けのロゴを軽くできる |
| GIF | 扱える(完全に透明か不透明かの 2 択) | 輪郭がギザギザになりやすい |
| JPEG | 扱えない | 透明部分は必ず何かの色で塗られる |
JPEG にすると背景が黒くなる理由
JPEG には透明という概念がないため、透明なピクセルも何かの色にしなければなりません。透明なピクセルは、内部的には「色の値は 0(=黒)で、アルファも 0」として持たれていることが多く、アルファの情報だけを捨てると、残った色の値=黒が表に出てきます。これが「背景が黒くなる」正体です。
変換ソフトによっては、自動で白を敷いてから JPEG にするため、こちらは「背景が白い四角になる」という形で現れます。どちらにしても、JPEG にした時点で透明はなくなります。
このサイトの形式変換では、JPEG を選ぶと透明な部分を塗る色を選べるようにしています(初期値は白)。載せる場所の背景色に合わせれば、透明だったときと同じように見せられます。
透明を残したまま軽くしたい
- WebP にする。WebP は非可逆圧縮でも透明を残せるため、PNG のロゴを大幅に軽くできることがあります。Web に載せるなら最初に試したい方法です。
- 大きさを必要なだけにする。表示が 200px のロゴに 2000px の画像は不要です。サイズ変更で形式を「元と同じ」にすれば、PNG のまま透明を保って縮小できます。
- ロゴなら SVG を検討する。デザインソフトで作ったロゴなら、ベクター形式の SVG で書き出すと、どの大きさでもくっきりして容量も小さくなります。
輪郭に白いフチや黒いフチが出るとき
白い背景の上で作った画像から背景を消した場合や、半透明の輪郭を不透明に変換した場合、ロゴの周りにうっすらと白や黒のフチ(ハロー)が残ることがあります。これは、輪郭の半透明のピクセルに元の背景色が混ざっているためです。
- 載せる場所の背景色が決まっているなら、その色を背景にして JPEG などにすると、フチが目立たなくなります。
- 濃い背景にも明るい背景にも載せる予定なら、元のデザインデータから透明の状態で書き出し直すのが確実です。
「透明なはずなのに白く見える」とき
画像を開いたアプリによっては、透明な部分を白や黒で表示します。実際に透明かどうかは、背景が市松模様(グレーと白のチェック)で表示されるソフトで確かめると分かります。このサイトのツールでも、処理結果のプレビューは市松模様の上に表示しています。
スクリーンショットや写真は透明にならない
スクリーンショットやカメラの写真は、もともと透明な部分を持っていません。PNG で保存されていても、背景を透明にするには、画像編集ソフトの「背景を削除」などの機能で別途切り抜く必要があります。形式を変えるだけでは透明にはなりません。