# PNGを圧縮する方法｜透明度・画質を保って軽くする

- 正規URL: https://oka-project.com/blog/compress-png-images
- 公開: 2026-10-06
- 著者: oka（https://oka-project.com/about）
- 要約: PNGの容量を小さくする方法を、可逆圧縮・減色・リサイズ・形式変更で比較。透明度や文字の輪郭を保つ判断と、Karukuの実装に基づく可逆／量子化の分岐まで説明します。
- 分類: guide ／ タグ: PNG, 画像圧縮, 減色, 画像最適化, Karuku

---
PNG画像が重いとき、「画質を落とさずに圧縮したい」「透明背景は残したい」「スクリーンショットの文字はぼかしたくない」といった条件によって、選ぶ処理が変わります。

**PNGの可逆圧縮と、色数を減らす処理（減色・量子化）は別物です。** PNGというファイル形式自体は可逆でも、保存する前に画像を減色・リサイズすれば元のピクセル情報は変わります。透明度が残る場合でも、半透明の輪郭まで元と完全に同じとは限りません。

> [!NOTE]
> **最初に試す順番**：原本を残す → 可逆最適化を試す → 用途に必要な縦横だけ残す → それでも重ければ減色・形式変更を比較 → 保存後に見た目とバイト数を確認。  
> **確認日**：2026年10月1日。W3C PNG Third Editionとoka-projectのKaruku公開ソースコードを確認。本文中のKarukuの処理説明は実装に基づきますが、具体的な圧縮率は同一画像の実測が揃うまで掲載しません。

## まず画像の種類で方法を決める

| 元のPNG | 最初に試すこと | まだ重い場合の判断 |
|---|---|---|
| ロゴ・アイコン・透明素材 | 元ピクセルを保持する可逆最適化 | 半透明の輪郭を比較しつつ減色 |
| UI・スクリーンショット | 可逆最適化と利用先の必要画素数を確認 | 小さな文字を実サイズで確認してから減色 |
| 単色の図・イラスト | 可逆最適化 | 色数を減らすと効果が出る場合がある |
| 写真をPNGで保存している | 透明度と納品先の形式を確認 | JPEG・WebPも同じ寸法で比較 |
| すでに最適化されたPNG | 元と保存後の容量を比較 | 効果が小さいなら再圧縮しない |

容量を小さくすること自体を目的にせず、**その画像で維持すべきものは何か**を先に決めてください。

## PNGの可逆圧縮では、何が変わらない？

W3CのPNG仕様では、PNGは画像データを可逆的に符号化する形式として定義されています。**同じピクセルを維持したままPNG内部の圧縮方式などを最適化する処理**なら、画像を再び展開した際の画素情報は変わりません。

ただし「画素が同じ」と「ファイルのバイト列・メタデータ・内部チャンクも元と同一」は別です。最適化ツールがPNGを作り直せば、元ファイルにあった付随情報や内部構造が変化する場合があります。

可逆最適化の結果が小さくならない場合も、処理が失敗したとは限りません。元ファイルがすでによく最適化されていたり、細かな色の変化が多かったりする可能性があります。

出典：[W3C｜PNG Specification (Third Edition)](https://www.w3.org/TR/png-3/)

## 減色すると、PNGの「画質」は変わる？

減色は、元画像で使われている色を近い色へまとめ、扱う色数を少なくする操作です。たとえば数千色ある図版を最大256色のパレットで表す場合、元のすべての色が同じ値で残るわけではありません。

| 操作 | 元と同じピクセルか | 特に確認するもの |
|---|---|---|
| ピクセルを変えない可逆最適化 | 原則として維持 | メタデータの扱い、処理後の容量 |
| 減色・量子化 | 色・透明度の階調が変わり得る | グラデーション、影、小さな文字、半透明の縁 |
| リサイズ | 画素数とピクセル情報が変わる | 線・輪郭・文字の可読性 |
| JPEG等への形式変更 | 形式と圧縮方式に依存 | 透明背景を保持する必要があるか |

**透明背景が保たれることと、半透明の境界まで完全一致することは同じではありません。** 色だけでなくアルファ値も量子化する処理では、縁の見え方が変わる可能性があります。

### 文字・グラデーションで注意したいこと

細い文字や図の境界では、わずかな色の違いが読みやすさに影響することがあります。また、空・影・背景などの滑らかな変化を少ない色で表すと、段差や細かな粒状感が出ることがあります。

ファイルを開いたときの100％表示だけではなく、実際のブログ・資料・SNSなどに置くサイズでも見比べてください。透過素材は白背景と暗い背景の両方で確認すると、半透明の縁を比較しやすくなります。

## KarukuがPNGを処理するときの分岐を確認する

oka-projectで公開している[Karuku｜画像圧縮・リサイズ](https://oka-project.com/tools/image-resize)の現行ソースコードでは、PNGの処理は次のように分かれています。

1. **出力用に調整した画像**の色数を数え直す。
2. 色数が256以下なら、PNGとして可逆最適化する経路を使用する。
3. 256色を超える場合は、最大256色への量子化を行い、PNGとして最適化する。
4. 指定容量に収まらない場合は128色、64色、32色などの処理を試す。
5. それでも上限を超える場合は、設定された範囲内で寸法を調整することがある。

これは内部処理を透明化するための説明であり、**「Karukuを使えばすべてのPNGが元とピクセル単位で一致する」という意味ではありません**。色数の判定は出力側の画像に対して行われるため、先にリサイズされていればその時点で元画像の画素とは異なります。PNG出力であっても、必要に応じて減色される場合があります。

Karukuの量子化コードには、パレットを作るためのmedian cutやk-means refinement、誤差を抑えたFloyd–Steinberg型の誤差拡散が実装されています。これは見た目の差を抑える工夫ですが、すべての画像で元の見た目が保証されるという主張ではありません。

実装根拠：[KarukuのPNG処理分岐（pipeline.js）](https://github.com/gerupus/oka-project/blob/main/tools/src/image-resize/pipeline.js)／[減色処理（quantize.js）](https://github.com/gerupus/oka-project/blob/main/tools/src/image-resize/codecs/quantize.js)

## 可逆圧縮と減色を、自分の画像で比較する手順

「容量が減ったか」と「元の画素が保たれたか」は別の測定です。文字入りスクリーンショット、透明アイコン、グラデーションなど**異なる3種類の原本**を使うと、用途による違いが見えます。

1. 元PNGを複製し、元の幅×高さ、ファイルサイズ（バイト）、透明度の有無を記録する。
2. ピクセル数を変えない可逆最適化だけを行い、同じ条件で容量を測る。
3. コピーを使って減色も試す。指定色数・出力幅×高さ・ファイルサイズを記録する。
4. 原本と出力を同じ表示倍率で並べ、**文字／線／グラデーション／半透明の縁**を比較する。
5. 透明素材は白背景・暗背景の両方で見る。寸法を変更した場合は、可逆圧縮だけを行ったケースとは分けて記録する。

| 記録欄 | 元PNG | 可逆最適化 | 減色あり |
|---|---|---|---|
| 幅×高さ | 元の値 | 元の値を維持 | 設定した値 |
| 容量（バイト） | 実測 | 実測 | 実測 |
| 色数の制限 | 元の状態 | 新たな制限なし | 指定値を明記 |
| 小さな文字・透過縁 | 基準画像 | 差がないか | 差がないか |

この表は**テスト設計**であり、Karukuの実測結果や性能優位を示す数値ではありません。

## PNGの容量が減らないときに確認すること

- 元PNGがすでに最適化されていないか。
- 写真など、細かな色の違いを大量に含む画像ではないか。
- 実際の利用先より大きい寸法のまま保存していないか。
- 透明度を残す必要があるか。必要ならJPEGへ変換しない。
- 減色で文字や輪郭が変化していないか。
- 元ファイルと同じ寸法・形式で比べているか。

写真で透明背景が不要なら、JPEGやWebPも比較対象です。逆に、図版・スクリーンショットで小さな文字の鮮明さが重要なら、容量だけを理由に強い減色を行うのは適切でない場合があります。

形式に限定せず画像全体の容量を減らす手順は、[画像の容量を小さくする方法](https://oka-project.com/blog/reduce-image-file-size)で説明しています。


## 保存後に確認する5つの項目

1. 元のPNGは上書きされず、別に保管されているか。
2. 保存後のファイル容量が実際に小さくなったか、あるいは指定された容量上限を満たしたか。
3. 小さな文字・輪郭・グラデーションは実際の表示サイズで読めるか。
4. 透過素材では透明背景と半透明の縁が残っているか。
5. 利用先がそのPNGの寸法・形式・容量を受け付けるか。

**圧縮率だけで結果の良し悪しを判断しないこと**が重要です。原本と出力後の画像を同じ背景・同じ表示サイズで見比べると、用途を損なっていないか確認しやすくなります。


## よくある質問

### PNGは可逆形式なのに、圧縮後に色が変わるのはなぜ？

PNGとして保存する前に減色・量子化・リサイズなどを行っている可能性があります。可逆なPNGエンコードと、元画像の画素を変える前処理は区別してください。

### 透明背景を残したい場合、PNG以外でもよいですか？

透明度を扱えるWebP等も候補ですが、公開・納品先がその形式を受け付けるか確認してください。JPEGはアルファチャンネルによる透明背景を保持できません。

### PNGで保存し直したら、必ず容量が減りますか？

必ずではありません。元の最適化状態や画像の内容、保存方法によって、同程度になったり増えたりすることもあります。実ファイルを比較します。

### Karukuで出力したPNGはすべて完全可逆ですか？

いいえ。現行実装では出力画像の色数や容量上限に応じ、可逆最適化・量子化・必要に応じた寸法調整が行われます。元画像とピクセル単位での一致が必要なら、設定・出力条件と完成画像を別途確認してください。

## 参照資料

- [W3C PNG Specification (Third Edition)](https://www.w3.org/TR/png-3/)
- [Karuku：PNG処理の実装](https://github.com/gerupus/oka-project/blob/main/tools/src/image-resize/pipeline.js)
- [Karuku：量子化の実装](https://github.com/gerupus/oka-project/blob/main/tools/src/image-resize/codecs/quantize.js)

PNGを軽くするときは、まず原本を残し、可逆最適化だけで足りるか確認します。足りない場合に減色や寸法変更を検討し、**透明度・文字の読みやすさ・階調まで確認してから完成ファイルを採用する**のが基本です。