PNG（Portable Network Graphics）とは？可逆圧縮・透過処理の仕組みとWebデザインでの使い方を解説

公開日：2026-08-05

Webサイトやバナー、SNS投稿の画像を選ぶとき、「.png」という拡張子を目にしたことがある方は多いのではないでしょうか。PNG（Portable Network Graphics）は、画質を保ったまま保存できる「可逆圧縮」と、背景を透明にできる「透過処理」を両立した画像ファイル形式です。この記事では、PNGの基本的な特徴から、可逆圧縮・透過処理の仕組み、PNG-8・PNG-24・PNG-32の違いと使い分け、JPEG・GIFとの比較、Webデザインでの具体的な活用方法までをやさしく解説します。

PNG（Portable Network Graphics）とは？

PNG（Portable Network Graphics、ポータブル・ネットワーク・グラフィックス）とは、コンピュータ上でビットマップ画像を扱うための画像ファイル形式のひとつです。拡張子には「.png」が使われ、読み方は「ピング」または「ピン」が一般的です。

PNGは、圧縮の過程で画像データを一切失わない「可逆圧縮（ロスレス圧縮）」を採用しており、圧縮アルゴリズムには「Deflate（デフレート）」という方式が使われています。1996年にW3C（World Wide Web Consortium）の勧告として仕様が策定され、その後ISO/IEC国際規格にもなった、Web上での利用を前提に設計されたオープンな画像形式です。仕様は現在も更新が続いており、2025年にはHDR（ハイダイナミックレンジ）や広色域表示に対応した最新版の仕様書が公開されるなど、時代のディスプレイ環境に合わせて拡張されています。

PNGが登場する以前、Web上でよく使われていた画像形式は「GIF」でした。しかしGIFが採用する圧縮技術に関するライセンス問題をきっかけに、特定の企業に依存せず自由に使える画像形式としてPNGの開発が始まりました。この経緯については後の章で詳しく紹介します。

PNGの2大特徴：可逆圧縮と透過処理

PNGが多くのWebデザイナー・グラフィックデザイナーに選ばれる理由は、大きく分けて「可逆圧縮」と「透過処理」という2つの特徴にあります。それぞれの仕組みとメリットを見ていきましょう。

可逆圧縮（ロスレス圧縮）の仕組みと画質が劣化しないメリット

PNGは「可逆圧縮（ロスレス圧縮）」という方式で画像データを圧縮します。可逆圧縮とは、圧縮したデータを展開（解凍）したときに、圧縮前とまったく同じ情報に復元できる圧縮方式のことです。これに対して、JPEGが採用する「非可逆圧縮」は、人の目にはわかりにくい情報を積極的に間引くことで高い圧縮率を実現する方式です。そのため、非可逆圧縮の画像は保存し直すたびにデータが少しずつ失われ、編集と保存を繰り返すほど画質が劣化していきます。

PNGは、保存を何度繰り返しても、拡大・縮小や別のフォーマットへの変換を行わない限り画質が劣化しません。Photoshopやillustratorなどで下書き・修正・書き出しを繰り返すデザイン制作物や、ロゴ・アイコンなど輪郭がくっきりしたシンプルな図形、スクリーンショットや図解など、文字のにじみやノイズを避けたい画像に向いています。

透過処理（アルファチャンネル）の仕組みとメリット

PNGのもうひとつの大きな特徴が「透過処理」です。PNGは画像の各ピクセルに「アルファチャンネル」と呼ばれる透明度情報を持たせることができ、これにより背景を透明にしたり、画像の一部だけを半透明にしたりすることが可能です。アルファチャンネルは一般的に8ビット（256段階）の情報量を持ち、「完全に透明」から「完全に不透明」までを滑らかに表現できます。

背景が透明なロゴ画像、Webページに自然に溶け込ませたいアイキャッチイラスト、半透明の装飾パーツを使ったUIデザインなど、Web担当者・デザイナーにとって透過処理は多くの場面で重宝します。

PNG-8・PNG-24・PNG-32の違いと使い分け

PNGと一口にいっても、実務では「PNG-8」「PNG-24」「PNG-32」という3種類の呼び方を目にすることがあります。これらはビット深度（色の情報量）による分類で、用途に応じて使い分けることで画質とファイルサイズのバランスを最適化できます。

PNG-8は、GIFと同じく最大256色（8ビット）までのインデックスカラーで色を表現する形式です。ファイルサイズを小さく抑えられる一方、写真やグラデーションでは色の再現性が落ちやすい点に注意が必要です。PNG-24は、JPEGと同じ約1,677万色のフルカラーを扱える形式で、豊かな色の階調を再現できますが、ファイルサイズは大きくなる傾向があります。PNG-32は、PNG-24のフルカラー表現に256段階のアルファチャンネルを組み合わせた形式で、高精細な透過表現に適していますが、3種類の中でもっともファイルサイズが大きくなりやすい点には注意が必要です。

PNGが誕生した背景

PNGは、1990年代半ばに登場した比較的新しい画像形式です。GIFが採用していた「LZW」という圧縮アルゴリズムの特許を保有する企業が、GIF形式を利用するソフトウェア開発者にライセンス料を求める方針を示したことをきっかけに、有志の技術者コミュニティによってPNGの開発が進められました。1996年にW3Cの勧告として正式に仕様が公開され、その後ISO/IEC規格としても標準化されています。

JPEG・GIFとの違いを徹底比較

画像形式選びで迷いやすいのが、PNG・JPEG・GIFの使い分けです。それぞれの違いを整理してみましょう。

比較項目	PNG	JPEG	GIF
圧縮方式	可逆圧縮	非可逆圧縮	可逆圧縮
色数	最大約1,677万色	約1,677万色	最大256色
透過機能	256段階の滑らかな透過	非対応	簡易的な透過のみ
向いている画像	ロゴ・アイコン・図解	写真・グラデーション	簡易アニメーション

可逆圧縮のPNGは、非可逆圧縮のJPEGと比べて、写真のような色数の多い画像ではファイルサイズが大きくなりやすい傾向があります。GIFは256色までという制約がある分、シンプルな画像であればファイルサイズを抑えやすく、複数のコマ画像をまとめて保存できるアニメーション機能という独自の強みも持っています。近年ではWebPやAVIFといった新しい画像形式も登場していますが、まずはPNG・JPEG・GIFという基本の3形式の違いを理解しておくことが土台になります。

Webデザイン・グラフィックデザインでの活用シーン

ここまで解説してきたPNGの特徴は、実際の制作現場でどのように活かされているのでしょうか。

PNG画像を書き出す・保存するときの注意点

よくある質問