視覚的な品質を損なうことなく、PNGファイルのデータ容量を軽量化する無料ツールです。
PNGフォーマットは可逆圧縮（ロスレス）方式を採用しています。ピクセルデータの冗長性をDEFLATEアルゴリズムで削除するため、元画像の情報は1ビットも失われません。この特性が透過を含む画像に適している反面、写真のようなグラデーション豊かな画像ではファイルサイズがJPGの3〜5倍になることもあります。
具体的にどの部分がサイズを圧迫しているかを理解しておくと、圧縮時の判断がしやすくなります。
カラーパレットの冗長性—PNG-24は1677万色を扱えますが、アイコンやロゴのように実際には20〜50色しか使っていない画像では、不要な色情報が大量に残ります。この場合、PNG-8（最大256色）に変換するだけで劇的なサイズ削減が可能です。
メタデータの蓄積—PhotoshopやFigmaから書き出したPNGには、作成ソフトのバージョン、編集履歴、ICCプロファイルなどがチャンク情報として埋め込まれています。這些は表示には不要ですが、数KB〜数十KBを占めます。
フィルターの選択各行のピクセルデータに適用する予測フィルター（None/Sub/Up/Average/Paeth）の選び方次第で、DEFLATE圧縮後のサイズが大きく変動します。最適なフィルターは画像の内容によって異なるため、自動選択機能の有無が圧縮率を左右します。
「オンラインで無料」と銘打たれた圧縮ツールの多くは、ユーザーがアップロードした画像を一時的にクラウドサーバーに送信し、圧縮処理を行った後にダウンロードリンクを返すという仕組みです。
この過程で気になるのが以下の点です。
一方、ブラウザ上で処理が完結するツールは、画像データがデバイスの外に一切送信されません。JavaScriptでピクセルデータを直接操作し、圧縮後のファイルをローカルで生成するため、通信ログにも画像データは残りません。
Pixes.appのPNG圧縮ツールはこの方式を採用しており、アップロードした画像はすべてブラウザ内のメモリ上で処理され、外部サーバーへの送信は発生しません。個人情報が含まれる画面キャプチャや、公開前のデザインデータを安心して圧縮できます。
PNG圧縮において「何%削減できた」という数字だけを見ると、画質への影響を見落とす危険があります。特に透過PNGでは、アルファチャンネルの劣化がデザインの意図を崩すことがあります。
実際のケースで見てみましょう。
ケース1：UIアイコンセット（PNG-24、透過あり）
元サイズ842KBのアイコンスプライトシートを圧縮した場合、単純な量子化（色数削減）だけで約60%のサイズ削減が可能です。アイコンはもともと限られた色数で構成されているため、視覚的な差はほぼ見られません。
ケース2：スクリーンショット（1920×1080）
テキストとUI要素を含むデスクトップキャプチャでは、フィルター最適化とメタデータ除去で30〜40%の削減が現実的なラインです。これ以上圧縮すると、テキストのエッジにノイズが生じやすくなります。
ケース3：写真を含むPNG（透明背景付きバナー）
写真部分のグラデーションが豊かだと、可逆圧縮の限界からファイルサイズの削減率は10〜20%にとどまります。この場合は、透過が必要な部分だけをPNGで保持し、写真部分をWebPに分離するハイブリッドアプローチも検討すべきです。WebP形式での圧縮では、写真データをさらに効率的に扱えます。
PNG圧縮で失敗する原因の多くは、ツールの使い方ではなく、圧縮前の準備にあります。
1. 不要なレイヤーを統合していない
PhotoshopやIllustratorから直接PNGを書き出すと、非表示レイヤーの情報がチャンクに残っていることがあります。書き出し前にすべてのレイヤーを統合するか、「Web用に書き出し」機能を使うと、この問題を回避できます。
2. 透過領域にゴミが残っている
切り抜きの際に消しゴムツールで「透明」にした領域でも、RGB値はゼロではないピクセルが残っていることがあります。這些は人間の目には見えませんが、圧縮アルゴリズムにとっては有効なデータとして処理され、サイズ増加の原因になります。事前に透過部分を完全にクリーンアップしておくことで、圧縮率が向上します。
3. 解像度と実サイズの不一致
200×200pxで表示するアイコンに1000×1000pxのPNGを使っている場合、表示サイズにリサイズしてから圧縮した方が、ファイルサイズは桁違いに小さくなります。圧縮とリサイズは別工程ですが、セットで行うことで最大の効果が得られます。
4. メタデータの削除を見落としている
前述の通り、tEXtやiTXtチャンクに埋め込まれたテキスト情報は、表示に一切影響を与えません。ツール側でメタデータ除去オプションを選択してください。
5. 1枚ずつ圧縮している
複数のPNGを扱う場合は、バッチ処理に対応したツールを使うことで作業時間が大幅に短縮されます。
PNGを圧縮する前に、そもそもPNGが最適なフォーマットかどうかを確認する価値があります。
PNGを選ぶべき場面：
別のフォーマットを検討すべき場面：
フォーマット選びを間違えると、どれだけ圧縮しても期待したサイズには到達しません。用途に応じて最適な形式を選ぶことが、ファイルサイズ削減の第一歩です。
開発やデザインの現場でPNG圧縮を定着させるには、手動で1枚ずつ圧縮する以外の方法も知っておく必要があります。
ビルドプロセスへの統入
WebpackやViteのプラグイン（imagemin-webpack-pluginなど）を使えば、ビルド時にPNGが自動的に圧縮されます。CI/CDパイプラインに組み込むことで、チーム全員が最適化された画像を使うことが保証されます。
デザイナーの書き出し設定
FigmaやSketchでは、書き出しプリセットに圧縮レベルを設定できます。デザイナーが書き出した時点で最適化済みのPNGが生成されるため、後工程での手作業を削減できます。
スポット的な圧縮ニーズ
Slackで受け取ったスクリーンショットを社内Wikiに載せる前に軽くしたい、メール添付用にファイルサイズを抑えたい—这样的な一時的なニーズには、ブラウザで開いてすぐに使えるオンラインツールが最も効率的です。Pixes.appはインストール不要で、ブラウザを閉じれば処理データはメモリから消滅するため、こうしたスポット的な利用にも適しています。