PNGの仕組みを図にした。文字と透過に強くて写真に弱い理由

• PNGは可逆。何も捨てないので元に戻せる
• 文字・線がにじまず、背景を透過できる
• そのぶん写真では容量が膨らむ

JPEGが「捨てて小さくする」形式なら、PNGは「捨てずに詰める」形式になる。何が違って、何に向くのかを図にした。

捨てないとはどういうことか

MDNの分類で、PNGは可逆（lossless）圧縮にあたる。圧縮して小さくするが、開けば元のデータがそのまま戻る。

何回開いて保存し直しても、内容は変わらない。編集を繰り返す作業に向くのはこのためだ。

透過を扱える

PNGの大きな特徴がこれになる。MDNの一覧では、PNGの透過はアルファチャンネルによる完全対応と記載されている。

完全対応というのは、半分だけ透ける表現ができるという意味だ。影や、縁のなめらかな部分が自然に抜ける。

「1色だけ透過」との違い

古い形式では、特定の1色を透明として扱う方式が使われていた。この方式だと透けるか透けないかの2択しかないので、縁がギザギザになる。

PNGは段階を持てるので、どんな背景色に重ねても縁が不自然にならない。

何に向くのか

MDNは用途ごとに推奨を挙げており、PNGが候補に入るのは次の場面だ。

• アイコン … 可逆なので細部が失われない
• 画面の写し … テキストを含むので可逆圧縮が推奨される
• 図・イラスト・グラフ … ベクター形式にできない場合の代替として

共通しているのは境目がはっきりしているものという点になる。

何に向かないのか

写真だ。捨てる処理が無いので、同じ写真でもJPEGよりかなり大きくなる。

写真はもともと細かい色の変化が大量にあり、それを一つも省かずに持つことになる。表示される見た目はほとんど変わらないのに、容量だけが増える。

もうひとつ、アニメーションを扱えない。動くものを置きたい場合は別の形式になる。

色数の指定で小さくできる

PNGには色の持ち方がいくつかある。MDNの記載では、グレースケール、トゥルーカラー、インデックスカラーがあり、それぞれビット数を選べる。

実務で効くのはインデックスカラーで、使う色を256色までに絞って番号で持つ方式だ。図やアイコンのように実際に使っている色が少ない画像なら、見た目を変えずに容量を落とせる。

逆に写真をこれにすると、色が足りずに縞が出る。

捨てないのに、なぜ小さくなるのか

可逆と聞くと「圧縮していない」と思いがちだが、そうではない。同じ情報を短く書き直しているだけで、捨ててはいない。

たとえば白い背景が横に500画素続く場合、「白、白、白……」と500回書く代わりに「白が500個」と書けば短くなる。読むときに展開すれば、元と1ビットも違わないものが戻る。

だから同じ色が広く続く画像ほどよく縮む。図、アイコン、画面の写しが小さくなるのはこのためだ。逆に写真は隣の画素と色が少しずつ違うので、まとめられる箇所がほとんど無い。

「縮まない画像」の見分け方

PNGで保存して容量が想定より大きいとき、原因はたいていこのどちらかになる。

• 写真が含まれている — 図の背景に写真を敷いている場合など
• 微妙なグラデーションがある — 見た目は単色でも、わずかに変化していると、まとめられない

図を作るときに背景を単色にしておくと、それだけで容量が変わる。

図を自分で作る場合

このサイトの図は、画像生成ではなくHTMLで組んで書き出す方法で作っている。文字が確実に読め、作り直しが効くためだ。理由は画像を生成ではなく、プログラムで作るようにした理由に書いた。

書き出す形式はPNGにしている。図は文字と線の塊なので、捨てる形式を選ぶ理由が無い。

代替テキストは忘れない

図を置くときは、画像に何が描いてあるかではなくその図の役割を代替テキストに書く。装飾なら空にする。判断の仕方は画像の代替テキストを、AIに書かせるときの注意にまとめた。

まとめ

• PNGは可逆。何も捨てないので、開き直しても劣化しない
• アルファチャンネルで半透明まで扱える
• 向くのは、文字・線・アイコン・画面の写し・図
• 向かないのは写真。容量が膨らむ
• アニメーションは扱えない
• 色数が少ない画像は、インデックスカラーでさらに小さくできる

出典

• MDN「ウェブで使用される画像ファイルの種類と形式」（圧縮方式、透過、色深度、用途別の推奨）

図は本記事のために作成したもの。本記事は2026年10月13日時点の内容に基づく。