こんにちは、ツバサです。
商品画像のデータを制作会社に依頼したとき、「背景透過のPNGで納品します」と言われた。PNGという名前は知っていたけど、JPEGとの違いや「透過」が何を意味するのかよくわかっていなかったので調べてみた。
PNGとは
ひとことで言うと、画質を劣化させずに保存できる画像ファイル形式のこと。PNGは「Portable Network Graphics（ポータブル ネットワーク グラフィックス）」の略だ。
IT用語辞典 e-Wordsによると、PNGは可逆圧縮（ロスレス圧縮）の画像形式で、何度保存し直しても画質が劣化しない。1996年にGIF形式の代替として開発され、W3C（World Wide Web Consortium）の標準規格として認定されている。
PNGの大きな特徴は「透過」に対応していること。IT用語辞典の透過PNGの項目によると、アルファチャンネルという仕組みで画像の特定の部分を透明にできるらしい。たとえばロゴの背景を透明にしておけば、どんな色の背景に重ねてもきれいに表示される。JPEGにはこの透過機能がない。
色数の面では、PNG-8（最大256色）とPNG-24（約1677万色のフルカラー）がある。アテンドの解説記事に詳しくまとまっていたが、PNG-8はシンプルなイラストやアイコン向け、PNG-24は写真やグラデーションのある画像向けだ。
EC実務で出てくる場面
EC業務ではPNGを使う場面がけっこう多い。僕が実際に遭遇したケースを書いておく。
背景透過の商品画像
商品の切り抜き画像（背景を取り除いた画像）を作るときは、PNG形式で保存する。JPEGだと背景が白になってしまうが、PNGの透過機能を使えば背景を透明にできる。バナーの上に商品画像を重ねたり、色付きの背景に配置したりするときに必要になる。背景の切り抜きについては背景切り抜き・白抜きの方法比較にもまとめた。
ロゴやアイコンの保存
ショップのロゴやカテゴリアイコンなど、色の境界がはっきりした画像はPNG形式が向いている。キャンバスの解説記事でも、イラストやロゴのような「色の面がはっきり分かれた画像」にはPNG、写真のように色が滑らかに変化する画像にはJPEGが適していると書かれていた。
JPEGで画質が落ちたとき
商品画像をJPEGで何度も保存し直していたら、画像がぼやけてきたことがあった。JPEGは保存のたびに画質が劣化する非可逆圧縮（非可逆圧縮と可逆圧縮の違い）なので、編集途中のデータはPNGかPSDで保存しておくのが安全だ。最終的にWeb用に書き出すときだけJPEGにすればいい。
覚えておきたいポイント
PNGはファイルサイズが大きくなりやすい
PNGは画質を保つ分、同じ画像でもJPEGよりファイルサイズが大きくなる。写真のような画像だと、JPEGの3〜5倍くらいのサイズになることもある。ECサイトでは表示速度にも影響するので、写真はJPEG、ロゴや透過が必要な画像はPNGという使い分けが無難だ。整理するとこうなる。
| 項目 | PNG | JPEG |
|---|---|---|
| 圧縮方式 | 可逆圧縮（劣化なし） | 非可逆圧縮（劣化あり） |
| 透過 | 対応 | 非対応 |
| ファイルサイズ | 大きい | 小さい |
| 向いている画像 | ロゴ、イラスト、切り抜き画像 | 写真、商品画像 |
GIFとの違い
透過に対応している画像形式としてはGIFもある。ただしGIFは最大256色までしか使えないので、写真には向かない。PNGはフルカラーに対応しつつ透過もできるので、GIFの上位互換といえる。ただし、GIFにはアニメーション機能があるので、動く画像を作りたい場合はGIFの出番だ。
Web表示の最適化
PNGファイルはそのままだとサイズが大きいので、Web用に最適化するツールを使うとファイルサイズを削減できる。デザイントランスメディアの解説記事でも、PNGの圧縮ツールを使えば見た目を変えずにファイルサイズを減らせると紹介されていた。画像ファイル形式の全体像は画像ファイル形式まとめにも書いている。
