色の付いた背景にロゴを置いたとき、画像のまわりに白い四角が出てしまった経験はないでしょうか。あれは形式の問題です。PNGはまさにそれを解決するために作られました。背景を透明にしたい画像、保存で画質を落とせない画像には、この形式が基本になります。
PNGとは何の略か
PNGは Portable Network Graphics 、日本語でいえば「持ち運べるネットワーク用画像」の略です。1995年、GIFに代わる、特許料の要らないオープンな形式として生まれ、またたく間にウェブでもっとも使われる画像形式のひとつになりました。JPGと違い、PNGは 可逆圧縮（ロスレス）を採用しており、保存の際にピクセルの情報がいっさい捨てられません。
PNGのしくみ
PNGは DEFLATE というアルゴリズム（ZIPファイルと同じものです）に、ピクセルを予測するフィルターを組み合わせて圧縮します。画像の中の繰り返しのパターンを見つけて効率よく符号化するだけで、元の情報は一切捨てません。
そのため、PNGは10回開いて保存し直しても、元のファイルとピクセル単位で同一のままです。見た目の正確さが決定的に重要な場面、たとえばスクリーンショット、ロゴ、何度も手を入れる画像には最適な形式といえます。
PNGにはもうひとつ、 アルファチャンネルと呼ばれる特別なチャンネルがあり、ピクセルごとに透明度を指定できます。完全に不透明、完全に透明、そしてその間の任意の半透明まで表せるため、なめらかな輪郭や、本当に透けて見える影が作れます。
PNGの利点
- アルファチャンネルによる透過： 半透明やなめらかな輪郭も含め、透過に完全に対応しています。どんな背景の上に置いても白い四角が出ない形式のうち、広く使えるのはPNGだけです。
- 可逆圧縮： 何度保存し直しても、元の画質がそのまま保たれます。
- 文字や図版がくっきり： 直線の輪郭、文字、べた塗りの部分が鮮明に出ます。JPGで目立つ圧縮ノイズも出ません。
- どこでも開ける： あらゆるブラウザ、OS、画像編集ソフトが対応しています。
- 深い色数に対応： 8ビット（256色）、24ビット（約1677万色）に加え、業務用途向けの48ビットまで扱えます。
PNGの弱点
- 写真では重くなる： 写真に関しては、可逆圧縮はJPGの非可逆圧縮ほど効率的ではありません。見た目が同等でも、PNGの写真はJPGの5〜10倍の容量になることがあります。
- アニメーションに対応しない： PNGは静止画専用です。透過付きで動かしたい場合はWebPやAPNG（アニメーションPNG）という手もありますが、対応環境は限られます。
- サイト上の写真には不向き： 写真をPNGで載せると、ページの読み込みが目に見えて重くなります。写真であればJPGかWebPが正解です。
💡 目安： 背景を透明にしたい画像、ロゴ、アイコン、スクリーンショット、文字や直線を含む図版にはPNGを使ってください。サイトに載せる写真であればJPGかWebPのほうが、見た目を損なわずにずっと軽く済みます。
PNG-8とPNG-24の違い
| 項目 | PNG-8 | PNG-24 |
|---|---|---|
| 扱える色数 | 最大256色 | 最大約1677万色 |
| 透過 | ピクセル単位で有無のみ | アルファチャンネル対応（256段階） |
| ファイルサイズ | 小さい | 大きい |
| 向いている用途 | 単純なアイコン、色数の少ない図版 | ロゴ、半透明を含む画像 |
いまの用途のほとんど、とくにロゴや輪郭をなめらかに見せたい画像では、 PNG-24 が適しています。どの不透明度でもきちんと透過が効くためです。
PNGを使うべき場面
次のような場面ではPNGを選んでください。
- ロゴやブランドの素材： さまざまな色の背景の上に、白い四角を出さずにロゴを置きたいとき。
- スクリーンショット： 画面、ダッシュボード、システムの表示は、PNGなら文字が鮮明に残ります。
- アイコンやUI部品： 輪郭をきれいに出したいボタン、イラスト、画面部品。
- 編集を重ねる画像： 何度も開いて直して保存する画像なら、JPGのように劣化が積み重なることがありません。
- 文字入りの図解： 文字と図を組み合わせた画像は、PNGのほうがはるかに読みやすくなります。
PNG・JPG・WebPの比較
| 項目 | PNG | JPG | WebP |
|---|---|---|---|
| 圧縮方式 | 可逆 | 非可逆 | 両対応 |
| 透過 | 対応（アルファチャンネル） | 非対応 | 対応 |
| 写真向き | 非対応 | 対応 | 対応 |
| ロゴ・アイコン向き | 対応 | 非対応 | 対応 |
| 写真でのサイズ | とても大きい | 小さい | とても小さい |
| ロゴでのサイズ | 小〜中 | 中（ノイズが出る） | 小さい |
| ほぼすべての環境 | 対応 | 対応 | 最近のブラウザ |
PNGのファイルサイズを減らすには
可逆形式であっても、PNGはかなり小さくできます。色数の少ない画像なら色深度を落とす（PNG-24からPNG-8へ）、不要なメタデータを削除する、より効率の高い圧縮アルゴリズムをかける、といった方法があります。最後の点は 圧縮で試せます。多くの場合、見た目をまったく変えずに30〜50%の削減が可能です。