PNG画像を圧縮

PNGが得意なこと

PNG（Portable Network Graphics）は、特許の制約がないGIFの代替として1996年に作られた形式です。可逆形式なので、デコードしたピクセルは保存したピクセルとまったく同じです。フルカラー、グレースケール、パレットを使うインデックスカラー、そして完全なアルファチャンネルに対応しており、輪郭をどんな背景にもなめらかに溶け込ませることができます。そのため、スクリーンショット、ロゴ、アイコン、UIのグラフィック、グラフなど、くっきりした文字を含むものには一般にPNGが選ばれます。

可逆であることの代償はサイズです。写真をPNGで保存すると、同じ写真のJPEGの数倍になることもよくあります。写真のノイズや細かい質感は、圧縮できるほどうまく予測できないからです。

それでもPNGが小さくなる理由

PNGは2段階で圧縮します。まず、ピクセルの各行にフィルター（None、Sub、Up、Average、Paeth）をかけ、ピクセルの値を隣のピクセルとの差に置き換えます。平坦な部分はゼロが長く続くデータになります。次に、フィルター後のデータをZIPと同じアルゴリズムであるDEFLATEで圧縮します。多くのソフトはフィルターやDEFLATEの設定を、最適さより速さを優先して選ぶため、同じピクセルをより少ないバイト数で保存できることがよくあります。

そこで、PNGを小さくする方法は2つあります。

• 可逆の最適化。ツールはOxiPNGを実行し、さまざまなフィルター戦略と圧縮設定を試して、最も小さい結果を採用します。画像はピクセル単位で同一のままです。効果は保存方法に大きく左右され、手軽なスクリーンショットツールで書き出したファイルは目に見えて小さくなることが多い一方、すでに最適化済みのファイルはほとんど変わりません。
• パレットの削減（非可逆）。透過付きのフルカラーPNGは1ピクセルあたり4バイトを使います。最大256色のパレットに変換すれば、DEFLATEの前の段階で1ピクセル1バイトになるため、このモードのほうが通常ははるかに大きく削減できます。ベタ塗りのグラフィックやスクリーンショットは問題なく変換できますが、なめらかなグラデーションや写真には縞模様が出ることがあります。

初期設定はパレットの削減（「スマート」モード、256色、ディザリングあり）です。すべてのピクセルを正確に保つ必要がある場合は、「PNG圧縮」を「可逆」に切り替えてください。「色数」の設定でパレットの大きさが決まり、色数を減らすほどファイルは小さくなりますが、グラデーションに段差が見えるおそれも大きくなります。

よくある用途別の設定

巨大なPNGの原因としてよくあるのがRetinaディスプレイのスクリーンショットです。2880 × 1800のノートパソコンの画面全体をキャプチャすると500万ピクセルを超えます。長辺を1600pxにリサイズすれば3分の1未満になり、たいていはどんな圧縮設定よりも効果があります。

参考までに、私たちのテストでは、Wikipedia、MDN、GitHubのページを撮ったPNGスクリーンショット4枚が、初期設定の「スマート」モードで58〜60％小さくなり、「可逆」モードでは中央値で約3分の1小さくなりました。お手持ちのファイルでは、これより縮小幅が大きいことも小さいこともあります。

よくある問題

• 「スマート」モードの後、グラデーションに縞模様が出る。色数を増やすか、可逆に戻してください。
• 透過ロゴの周りにギザギザのふちが出る。アンチエイリアスのかかった輪郭には何段階もの透明度が必要です。こうした画像では128色以上を残してください。
• 可逆モードでほとんど小さくならない。ファイルはすでに効率よく圧縮されていました。大きな違いを出せるのはパレットの削減か縦横サイズの縮小だけで、より小さくできない場合、ツールは元のファイルをお返しします。
• そのPNGが写真である。JPEGかWebPのほうが内容に合っていて、はるかに小さくなります。

PNGに関する質問

そのほかの画像ツール

画像圧縮ツールなら、種類の混ざったファイルをまとめて処理できます。アニメーションにはGIF圧縮ツールをお使いください。可逆と非可逆の意味については仕組みのページで詳しく説明しています。