PNGのファイルサイズが8MBもある理由と、それを解決する3つの方法

PNGのファイルサイズが8MBもあるのは、PNGがすべてのピクセルを正確に保存するためであり、Retina解像度のフルスクリーンショットには実際にそれだけの情報量が含まれているからです。 このフォーマットはデータを一切破棄しません。これがPNGの最大のメリットであり、同時に最大の課題でもあります。

この問題を解決するには3つの方法があり、それぞれ異なるトレードオフがあります。画像サイズ（解像度）を縮小すると、おそらく不要なレベルの超高解像度が失われます。色深度を下げると、写真の色の正確性が失われます。フォーマットを変更すると、ブラウザ以外での互換性が失われます。画像の用途に合わせて最適な方法を選択してください。

3つの選択肢

• 画像サイズを縮小する。 無料で、通常は最も効果的です。5000ピクセルもの解像度を持つスクリーンショットは、ほとんどの場合必要ありません。
• 色深度を下げる。 フラットなグラフィックには効果的ですが、写真には向きません。
• フォーマットを変更する。 WebPは透明度を維持したまま、通常25〜35%ファイルサイズを削減できます。

PNGファイルが急激に肥大化する理由

PNGのファイルサイズはピクセル数に比例して大きくなります。これは、すべてのピクセルを正確に記述する必要があるためです。 幅と高さを2倍にすると、ピクセル数は4倍になり、ファイルサイズもおおむね4倍になります。

高解像度モニターからの5120 x 2880のスクリーンショットには、1470万ピクセルが含まれています。圧縮前の1ピクセルあたり3バイトの計算では44 MBの生データになり、PNG圧縮を適用しても、画像に含まれる単色エリアの多さに応じて、通常4 MBから12 MB程度にしか縮小されません。したがって、8 MBという結果は異常ではなく、ごく一般的な数値です。

解決策1：画像サイズを縮小する

画像を実際に表示する最大サイズにリサイズします。これにより、他の処理を行う前にファイルサイズの大半を削減できます。 これは最も効果が高く、コスト（画質低下などのデメリット）が最も低い解決策です。

ページ上で画像が表示される最大の幅を測定し、高密度ディスプレイ（Retinaなど）用にその数値を2倍にして、そのサイズにリサイズします。幅800ピクセルで表示されるスクリーンショットであれば、1600ピクセルあれば十分です。

解決策2：色深度を下げる

24ビットカラーから8ビットパレットに変換することで、PNGのサイズを50〜70%削減できます。ただし、これは使用されている色が少ない画像にのみ有効です。 インターフェースのスクリーンショット、図、ロゴ、グラフなどが最適な例です。

この手法は、フルカラーの値をそのまま保存するのではなく、最大256色のパレットを保存し、ピクセルごとにそのパレットを参照します。ユーザーインターフェースのスクリーンショットに256色以上含まれることは稀であるため、この削減による画質の変化は目立ちません。しかし、写真には数万色が含まれているため、同じ削減を行うと、空や肌のグラデーションに目立つ縞模様（バンディング）が発生します。

解決策3：フォーマットを変更する

ウェブで使用する場合はWebPに変換します。透明度を維持したまま、通常PNGよりも25〜35%小さくなります。 画像が写真であり、透明度が必要ない場合にのみJPGに変換してください。

• WebP（ロスレス）：グラフィックやスクリーンショット向け。すべてのピクセルを完全に維持しながら、20〜30%削減できます。
• WebP（ロスジー/有損失）：写真を含むPNGファイル向け。削減率は70%以上に達することもあります。
• JPG：透明度のない写真向け。このような画像にPNGを使用すること自体が、そもそも不適切です。
• AVIF：大きな写真画像向け。100 KBを超えるファイルにおいて、さらに強力な圧縮が可能です。
• ベクターグラフィック（SVG）：ロゴやアイコン向け。SVGファイルは、ラスター形式のほんのわずかなファイルサイズで済みます。

最も一般的な原因：写真をPNGとして保存している

写真をPNGとして保存すると、同じ写真をJPEGとして保存した場合に比べて、見た目の違いがないにもかかわらずファイルサイズが3〜5倍大きくなります。 この1つの間違いが、肥大化したPNGファイルのほとんどの原因となっています。

PNG圧縮はパターンの繰り返しを探しますが、写真にはピクセルレベルでの繰り返しがほとんどありません。すべてのピクセルが隣のピクセルとわずかに異なるためです。結果として、PNG形式は数百万ものほぼユニークな値を正確に保存することになります。写真はJPEGまたはWebPとして保存し、PNGはフラットな色使いや透明度が必要な画像にのみ使用するようにしてください。

画質を落とさずにPNGを縮小する方法

画質を完全に維持（ロスレス）したままPNGを縮小するには、以下の5つのステップを順番に実行します。

1. 不要な領域を切り取ります（クロップ）。余白部分であってもファイルサイズを消費します。
2. 画像が必要とする最大の表示サイズにリサイズします（高密度ディスプレイ用に2倍のサイズにします）。
3. 画像に本当に透明度が必要かどうかを確認します。背景を不透明に平坦化した方が圧縮率が高くなります。
4. 画像が写真ではなくグラフィックである場合は、カラーパレットを削減します。
5. WebP（ロスレス）に変換します。画質は完全に維持されたまま、通常20〜30%小さくなります。

通常はステップ1と2だけで問題は解決します。残りのステップは、ドキュメント内のフルページスクリーンショットなど、画像を非常に大きいまま維持しなければならない場合に重要になります。

現代の画面でスクリーンショットがこれほど大きくなる理由

高密度ディスプレイは論理解像度の2倍または3倍でキャプチャするため、幅1200ピクセルのウィンドウのスクリーンショットは2400ピクセルまたは3600ピクセルで保存されます。 そのため、画面上で見えているサイズよりもファイルサイズがはるかに大きくなります。

その余分な解像度は、別の高密度ディスプレイで表示される場合には有用ですが、それ以外の場合は無駄になります。ドキュメントやサポート記事の場合、論理サイズにリサイズし直すことで、ほとんどの読者にとって見た目は同じまま、画像サイズを半分に、ファイルサイズを約75%削減できます。

PNGを大きいまま維持すべきケース

画像がマスターファイル、印刷用アセット、または後で編集するソースファイルである場合は、フルサイズのPNGを維持してください。 圧縮の判断は、オリジナルではなく、配信用のコピーに対して行うべきです。

デザインファイル、ロゴのマスター、印刷用のアートワーク、スキャンされたドキュメントなどは、そのサイズに見合う価値があります。これらはフル解像度で保存し、用途に応じて小さなコピーを生成します。よくある間違いは、マスターファイルをそのまま公開してしまうことです。マスターの保存に必要なディスク容量は一度きりですが、公開されたマスターはアクセスされるたびに帯域幅を消費し続けます。

透明度（アルファチャンネル）の隠れたコスト

透明チャンネルはすべてのピクセルに4つ目の値を加えるため、圧縮前の生データが約33%増加します。 多くのPNGファイルは、使用していないにもかかわらずこのチャンネルを保持しています。

スクリーンショット、エクスポートされたグラフ、白い背景に平坦化された画像などは、完全に不透明なアルファチャンネルを保持していることがよくあります。これを除去しても見た目の変化はなく、ファイルサイズを確実に削減できます。白いページに配置されるほとんどの画像には透明な背景は必要ないため、本当に透明度が必要かどうかを確認してください。

PNGを圧縮すると画質は低下するか

ロスレス（無劣化）のPNG最適化では画質は一切低下しませんが、色数や画像サイズを削減すると画像は永久に変更されます。 これら3つの手法はよく一緒に説明されますが、同じものではありません。

ロスレス最適化は、ファイルがデータを保存する方法を再構成するもので、ピクセル単位で完全に同一の出力を維持しながら、通常5〜20%を削減します。パレットの削減やリサイズは画像そのものを変更するため、配信用コピーには適していますが、マスターファイルには適していません。削減処理が元に戻せない場合は、必ずオリジナルを保管しておいてください。

フォルダ内の大量の肥大化したPNGファイルを一括で修正する

肥大化したPNGファイルは通常、同じソースからまとめて発生するため、フォルダごと一括で処理するのが効率的です。 ドキュメントのセット、スクリーンショットのライブラリ、デザインツールからのエクスポートなどは、全体で同じ問題を共有している傾向があります。

最大500個のファイルを一度にドロップするか、ZIPアーカイブを直接ドラッグ＆ドロップして、セット全体に対してサイズとフォーマットを一度に設定します。すべての処理はお使いのブラウザ内（ローカルのプロセッサ上）で実行されるため、社内のスクリーンショット、製品デザイン、クライアントのドキュメントなどがサーバーに送信されることはありません。アップロードは行われないため、データ保持ポリシーを気にする必要もなく、処理後にデータが残ることもありません。

ファイルだけでなく、問題の根本原因も修正しましょう。画面キャプチャツールがRetina解像度のPNGで保存するように設定されていると、今後も8 MBのファイルが生成され続けます。ほとんどのキャプチャツールでは、デフォルトのフォーマットとスケールファクターを設定できます。これらを一度変更しておけば、サポート記事を書くたびにスクリーンショットを処理し直す必要はなくなります。