PNGファイルサイズを縮小する方法（可逆 vs 非可逆）

PNGはウェブ上で最も信頼されている画像形式の一つです。すべてのピクセルを保持し、透過をサポートし、ロゴやスクリーンショット、グラフィックを鮮明に表示します。しかし、その品質にはコストが伴います。PNGファイルは非常に大きくなることがあります。高解像度のスクリーンショット1枚で5 MB以上になることも珍しくなく、透過背景付きの商品画像をまとめると数十メガバイトに達することもあります。

大きなPNGはウェブサイトの表示速度を低下させ、メール添付ファイルを肥大化させ、ストレージを消費し、低速回線のユーザーにストレスを与えます。幸いなことに、フォーマットを変更したり、PNGを選んだ理由となる品質を犠牲にしたりすることなく、PNGファイルサイズを大幅に削減できます。重要なのは、どのテクニックをどの順番で適用するかを知ることです。

このガイドでは、すべてのピクセルを保持する可逆最適化から、わずかな画質低下と引き換えに大幅なサイズ削減を実現する非可逆圧縮まで、PNGを縮小するためのすべての実践的な方法をご紹介します。読み終わる頃には、どの状況でどのアプローチを使うべきか、正確に判断できるようになります。

なぜPNGファイルは大きくなるのか？

PNGが大きくなる理由を理解すると、適切な削減戦略を選べるようになります。いくつかの要因がこの問題に影響しています。

可逆圧縮には限界があります。 PNGはDEFLATEアルゴリズムを使用し、ピクセルデータの繰り返しパターンを見つけて効率的にエンコードします。しかし、写真やスムーズなグラデーションを含む画像は、あまりにも多くの固有の色値を含んでいるため、圧縮器が冗長性を見つけにくくなります。写真をPNGとして保存すると、同じ画像をJPGとして保存した場合の5倍から10倍のサイズになることがあります。DEFLATEは単純に、非可逆アルゴリズムほど積極的に写真データを圧縮できないためです。

画像サイズは想像以上に重要です。 4000 x 3000ピクセルの画像には1200万個のピクセルが含まれます。透過付きの32ビットPNGでは、各ピクセルに圧縮前で4バイトの生データが必要となるため、非圧縮のペイロードは約48 MBになります。DEFLATEを使っても、結果のファイルは数メガバイトになります。サイズを半分にすると、ピクセル数は75パーセント減少し、圧縮後のファイルサイズもほぼ比例して小さくなります。

色深度がサイズを増加させます。 24ビットPNGは1ピクセルあたり1600万色以上を格納します。32ビットPNGは透過用のアルファチャンネルを追加し、ピクセルあたりのデータ量が3分の1増加します。多くの画像、特にアイコン、図表、イラストは実際にはわずかな色しか使用していないのに、必要以上の色情報を持っています。

メタデータがファイルを密かに膨張させます。 EXIFデータ、ICCカラープロファイル、テキストチャンク、タイムスタンプは、PNGファイルに数十キロバイトを追加することがあります。アイコンやサムネイルのような小さな画像では、メタデータが総ファイルサイズのかなりの割合を占めることがあります。画像のメタデータについて詳しくは、画像メタデータの削除ガイドをご覧ください。

PNGファイルを可逆で縮小する方法

可逆テクニックは、画像をピクセルパーフェクトに保ちながらファイルサイズを縮小します。すべての色、すべてのエッジ、すべての透過領域がまったく同じまま維持されます。これらの方法を常に最初に試すべきです。

DEFLATE圧縮を最適化する。 すべてのPNGエンコーダーが同じように圧縮できるわけではありません。グラフィックエディターから素早くエクスポートされたPNGは、高速だが最適でないDEFLATE設定を使用していることがよくあります。より徹底した圧縮器で同じ画像を再エンコードすると、ピクセルを一切変更せずにファイルサイズを10～30パーセント削減できます。pic2PNGは@jsquash/png WASMライブラリを使用して、画像の変換や再エクスポート時に最適化された可逆圧縮を適用し、DEFLATEアルゴリズムが節約できるすべてのバイトを絞り出します。

不要なメタデータを削除する。 可視画像に寄与しないEXIFデータ、ICCカラープロファイル、テキストコメント、タイムスタンプを削除します。カメラやスマートフォンで撮影された画像は、GPS座標、デバイス情報、カメラ設定が埋め込まれているため、この処理が特に重要です。pic2PNGは変換中に自動的にメタデータを削除し、出力ファイルが軽量でプライバシーに配慮されたものになるようにします。

サイズを縮小する。 画像を実際に表示されるサイズにリサイズしてください。コンテナの幅が1200ピクセルしかないのに、幅4000ピクセルのPNGを配信する意味はありません。pic2PNGを使ってエクスポート前に画像を一括リサイズすれば、表示サイズでの画質低下なしにファイルサイズの劇的な削減が実現できます。

コンテンツ領域に切り抜く。 画像の端に大きな空白や均一な領域がある場合、実際のコンテンツ領域に切り抜くことで、ファイルサイズを増やすだけで視覚的な価値がないピクセルを削除できます。pic2PNGには、必要な正確なサイズに画像をトリミングできる切り抜きツールが含まれています。

非可逆PNG圧縮：いつ、どのように使うか

可逆最適化だけでは十分でないこともあります。目標ファイルサイズに到達する必要がある場合や、PNGが可逆ではうまく圧縮できない写真の場合、非可逆PNG圧縮が強力な選択肢となります。

仕組み。 非可逆PNG圧縮は、画像内の異なる色の数を減らし、ピクセル値を近似することで、DEFLATE圧縮器が利用できる冗長性を増やします。画像は透過を完全にサポートする有効なPNGファイルのままですが、微妙な色の違いが平滑化または統合されます。結果は、可逆オリジナルより50～80パーセント小さくなりながら、人間の目にはほぼ同一に見えます。

品質レベル。 ほとんどの非可逆PNGツールでは、通常0～100のスケールで品質レベルを設定できます。80～90では、ほとんどの画像でオリジナルとの違いは知覚できません。60～80では、訓練された目でグラデーションのわずかなバンディングやテクスチャの細部の減少に気づくかもしれません。60以下では、アーティファクトがより目立つようになり、サムネイルやプレビュー画像に限定するのが最善です。pic2PNGは、browser-image-compressionを利用したオプションの非可逆圧縮ステップを提供し、ニーズに合わせて正確な品質レベルを調整できます。

非可逆圧縮を使うべき場面。 非可逆PNG圧縮は、ページ速度が重要なウェブ画像、多くの色や写真的な内容を含む画像、PNG透過が必要だが数メガバイトのファイルを許容できない場合に威力を発揮します。大量の画像をバッチ処理する場合にも有用で、ファイルあたり40パーセントの削減でも、帯域幅とストレージの大きな節約につながります。

非可逆圧縮を避けるべき場面。 ピクセルアート、精密な色分けの技術図面、さらに編集や合成される予定の画像には非可逆圧縮を適用しないでください。非可逆圧縮を繰り返すたびに、劣化が蓄積されます。追加の編集を予定している場合は、可逆のマスターコピーを保持し、最終エクスポートにのみ非可逆圧縮を適用してください。

PNGを使うべきでない場合もあります

PNGファイルサイズを縮小する最善の方法は、PNGの使用自体をやめることである場合もあります。このフォーマットは特定の種類の画像に優れていますが、他の種類には不向きです。

写真にはJPGが適しています。 透過領域のない写真であれば、JPGは違いが目に見えない品質レベルで、同等のPNGより60～90パーセント小さいファイルを生成します。PNGは写真コンテンツ向けに設計されたことはなく、その可逆圧縮は、この種の画像に特化したJPGの非可逆アルゴリズムとは競合できません。

WebPは両方の長所を兼ね備えています。 ターゲットユーザーがモダンブラウザを使用している場合、WebPはPNGとJPGの両方より小さなファイルを提供しつつ、透過と可逆・非可逆の両モードをサポートします。可逆WebPは通常、可逆PNGより25パーセント小さくなります。詳しい比較は、PNG vs JPG vs WebPガイドをお読みください。

PNGが最も得意とする場面で使い続けましょう。 PNGは、ロゴ、アイコン、スクリーンショット、テキスト入りのグラフィック、そしてピクセルパーフェクトな透過が必要なすべての画像に最適な選択肢であり続けます。透過が不可欠で、画像の色数が比較的少ない場合や均一な色の大きな領域がある場合、PNG圧縮は効率的に動作し、ファイルサイズも妥当な範囲に収まります。

重要な質問は、「この画像に透過または可逆品質が必要か？」です。答えが「はい」なら、上記のテクニックでPNGを最適化してください。「いいえ」なら、JPGやWebPの方が適しているか検討してください。フォーマットの詳細については、PNGとは何か、どのように機能するかの記事をご覧ください。

最適なPNG縮小ワークフロー

すべてをまとめると、PNGファイルサイズを効率的に縮小するための推奨ステップは次の通りです：

1. まずリサイズする。 画像を実際に必要なサイズにスケーリングします。これはファイルサイズ削減に最も効果的な手段です。pic2PNGを使って一括リサイズしましょう。
2. コンテンツ領域に切り抜く。 画像の端にある不要な空白スペースを削除します。
3. 可逆最適化を適用する。 最適化されたDEFLATE圧縮でPNGを再エンコードします。pic2PNGは@jsquash/png WASMライブラリを使用して自動的にこの処理を行います。
4. メタデータを削除する。 EXIFデータ、ICCプロファイル、テキストチャンクを削除します。pic2PNGは変換時にデフォルトでメタデータを削除します。
5. 許容できる場合は非可逆圧縮を適用する。 ファイルがまだ大きすぎ、わずかな品質低下が許容範囲なら、非可逆圧縮を有効にして品質レベルを80以上に設定してください（ほとんどのケースに適しています）。
6. フォーマット変更を検討する。 画像が透過のない写真なら、JPGとしてエクスポートしてください。モダンブラウザをターゲットにしている場合は、さらに小さなファイルのためにWebPを検討してください。

この順序が重要です。最適化の前にリサイズすることで、圧縮器がより少ないピクセルで作業できます。非可逆圧縮の前にメタデータを削除することで、目に見えないデータに品質予算を浪費することを避けられます。そしてフォーマットの代替を最後に評価することは、変更を行う前にPNGフォーマット内でできることをすべて行ったことを意味します。

pic2PNGを使えば、このワークフローのすべてのステップを1回のセッションで処理できます。リサイズ、切り抜き、最適化、メタデータ削除、エクスポートのすべてを、ブラウザ上で直接、アップロード不要、登録不要、完全なプライバシーで行えます。次のPNGバッチでお試しいただき、その違いをご自身で確認してください。