PNG

PNG（Portable Network Graphics）は、ピクセルデータを正確に保つ可逆画像形式です。文字の鮮明さと色の正確さが重要なスクリーンショットで、標準的に使われます。

PNG圧縮の仕組み

PNGは2つの段階で圧縮します。最初に画像データをフィルターへ通し、ピクセルの各行をパターンとして圧縮しやすい形へ変換します。周囲のピクセルから各値を予測し、実際の値との差を保存します。色が均一な領域では、0が長く続くデータになります。

次に、フィルター処理したデータを、ZIPファイルと同じDEFLATEアルゴリズムで圧縮します。DEFLATEは繰り返すバイト列を見つけ、短い参照へ置き換えます。単色背景、平らなUI面、均一な境界など、同じ色の大きな領域は効率よく圧縮できます。複雑な質感や写真のノイズは圧縮しにくい内容です。

この2段階の処理が、PNGとスクリーンショットの相性がよい理由です。多くのスクリーンショットには、広い単色領域、鋭い文字の輪郭、正確な幾何学図形があり、フィルター後のデータを小さくしやすくなります。1,920×1,080の一般的なUIスクリーンショットは、無圧縮のビットマップなら6 MBを超える一方、PNGでは200〜500 KBになる場合があります。

PNGはアルファチャンネルによる透過、24ビットカラー（1,670万色）、ガンマ補正やカラープロファイル情報を保存する任意のメタデータチャンクにも対応します。

PNG、JPG、WebPの違い

各形式の用途は異なります。

• PNG： 可逆形式でピクセルを正確に再現し、透過にも対応します。スクリーンショット、UI要素、図、文字を鮮明に保つ画像に適しています。非可逆形式よりファイルは大きくなります
• JPG： 非可逆形式で視覚的な細部を捨て、ファイルを小さくします。ピクセル単位の正確さを求めない写真や、滑らかなグラデーションを持つ画像に向きます。透過には対応せず、鋭い輪郭や文字の周りには圧縮ノイズが見えます
• WebP： 非可逆と可逆の両方、透過に対応します。同等の画質なら、一般に可逆WebPはPNG、非可逆WebPはJPGより小さくなります。現在のブラウザで広く対応していますが、すべての画像編集ソフトや書類形式で使えるわけではありません

文字入りのスクリーンショットには、PNGが安全な標準です。JPG圧縮では文字の輪郭がぼやけ、小さい文字を読みにくくするノイズが生じます。ファイルサイズが重要で、出力先がWebPへ対応するなら、可逆WebPも選べます。

PNGが適している場面

• 文字入りのスクリーンショット： UIラベル、コード、ターミナル出力、読む必要のある内容を含む画像です。PNGなら文字の輪郭へぼやけを加えません
• 透過を持つ画像： ロゴ、アイコン、オーバーレイなど、別の内容の上へ重ねる図に使います
• ピクセル精度が必要なドキュメント： 技術図、ワイヤーフレーム、注釈付き画像など、各ピクセルを元と同じに保つ必要がある場合です
• 元画像とアーカイブ： あとで編集、切り抜き、再書き出しする可能性がある画像です。可逆形式から始めれば、編集を重ねても圧縮による画質低下が積み重なりません
• 一括撮影の出力： 数百枚の画像を作る自動撮影でも、PNGなら形式による画質低下がないため、撮影後に1枚ずつ圧縮ノイズを確認する必要がありません

よくある失敗

• 大きな写真にPNGを使う： フル解像度の写真をPNGで保存すると、10 MBを簡単に超える場合があります。JPGまたはWebPなら、画面上で見分けにくい画質を保ちながら何分の1かに小さくできます。ピクセルの正確さが必要な内容にPNGを使ってください
• PNGを最適化しない： 多くの撮影ツールが出力する標準PNGは、圧縮率をさらに改善できる場合があります。最適化ツールを通すと、ピクセルを変えずに20〜50%小さくできることがあります
• JPGをPNGへ変換すれば画質が上がると思う： 非可逆JPGをPNGにしても、失われた画質は戻りません。JPGに焼き付いた圧縮ノイズが、大きいPNGへそのまま残ります。形式を変える場合は必ず元画像から始めます
• Webでファイルサイズを無視する： 最適化せず、表示寸法にも合わないPNGをWebページへ埋め込むと、読み込みを遅くします。表示寸法へリサイズして最適化するか、より小さい可逆WebPを検討します