Photoshop：Webで使用するためにPNGのサイズを縮小する方法

2042 x 1250、6.1 MBのPNGファイルがあります。Photoshopで開いて[名前を付けて保存> PNG 24]を実行し、2つのオプションの圧縮ファイルサイズを選択すると（もう1つは圧縮なし）、まだ数MB程度の画像が表示されます。 Webアセットになるので、MBではなくKBに参加したいと思います。この画像を数千KBの範囲にインテリジェントに圧縮するにはどうすればよいですか？

マニアックな詳細（あなたが求めなかった）

JPGなどの一部の画像形式は、不可逆圧縮をサポートしています。非可逆圧縮画像を保存してからレンダリングすると、画像は設計どおりの100％ではなく、スケッチに「近い」だけです。元のディテールの一部が失われています。正確さは期待できないため、Lossy Compressed画像には元のデザインに関する情報をほとんど保存できないという贅沢があり、ファイルが小さくなります。結果の精度を指定することもできます。結果の精度が低いほど、ファイルは小さくなります。

一方、PNG形式は、設計上、可逆圧縮をサポートしています。これは、画像がファイルに保存された後、レンダリングされると、詳細を失うことなく、設計どおりにすべてのピクセルがレンダリングされることを意味します。これはすばらしいことですが、残念なことに、画像を完全にレンダリングするには大量の情報を保存する必要があり、大きなファイルが生成されます。

PNGは、ファイルに保存する前に必要な情報を最適化するインテリジェントな機能を備えていますが、JPGの場合のように、ファイルをどの程度圧縮または正確にするかを指定することはできません。結果は現状のままであり、ファイルの大きさを制御することはできません。

いくつかの提案

そうは言っても、小さいファイルを取得するためにできることはいくつかあります。

• フラットカラーの大きな領域は、複雑なパターン領域よりも圧縮率が高くなります。画像を簡略化できるかどうか確認してください。
• 画像の周囲にネガティブなスペースがたくさんありますか？それを最小限に減らすようにしてください。
• 透明度を使用していますか？そうでない場合は、画像をJPGとして保存することを検討してください。
• 何らかの理由でJPGとして保存できないが、透明度を使用していない場合は、保存オプションから「透明度」のチェックを外してください。これにより、最終結果から少し削られます。
• ある種のパズルのように、画像を部分的に切り取り、最終的なHTMLで構成することを検討してください。透明度が必要な部分をPNGとして保存し、その他の部分を高度に圧縮されたJPGとして保存できます。全体の結果はそれほど重くないはずです。
• PNG圧縮ツール（https://tinypng.com/など）を使用します。これらのツールは非可逆アルゴリズムを使用しています。小さなファイルとして保存できるように、画像を単純化しようとします。それらはファイルのサイズを劇的に減らしますが、最終結果はあまりにも多くの詳細を失うかもしれません。あなたはいつでもそれらを試して、アプリケーションに応じて結果を判断することができます。

画像を共有していただければ、いくつか提案させていただきます。

画像にポスタリゼーション調整レイヤーを追加して、色の数を減らしてみてください。この方法を使用しても、高品質を維持し、ファイルサイズを減らすことができます。

6.1MBのPNGはKBの範囲からは程遠いので、Cokypupの提案が最善でしょう。

作成する可能性のある他のPNGについては、「名前を付けて保存」ではなく「Web用に保存」を使用してPhotoshopで保存するためにWeb用に保存するための最良の方法。Photoshopの「Web用に保存」は、ファイルサイズを大幅に削減する最適化を行います。

次に、Tiny PNGなどのPNG用の圧縮ツールを使用することをフォローアップします。TinyPNG
は、JPGを保存するときと同様に不可逆圧縮を使用します。これによりファイルサイズが大幅に縮小され、サイトの例を見るとわかるように、実行される不可逆圧縮はほとんど目立ちません。

おそらく言うまでもありませんが、多くの人はWebアセットの解像度を72ピクセル/インチに設定するのを忘れています。

画像>画像サイズ>解像度を72 ppiに設定します。