Photoshop で Web サイトのデザインを作成し、すべての画像を 24 ビット PNG 画像としてエクスポートしました。その後、 Web サイトでPageSpeedテストを実行すると、ロスレス圧縮を使用して画像のサイズを最大 50% までさらに縮小できることが示されました。どうすればいいの?Photoshop は画像をできるだけ圧縮しませんか? Google PageSpeed が内部で使用している画像圧縮プログラムは何か、試してみたいと思うかもしれません。
7 に答える
pngcrushを見てみましょう。これは、さまざまな方法で PNG ファイルを最適化できるコマンドライン ツールです。GUI が必要な場合は、ImageOptim for Mac に pngcrush が組み込まれていますが、さらに多くのことができます。
PNG 画像の後処理には次のツールを使用します。
Google PageSpeed はおそらく、上記の (または同様のオープンソースの) ツールのいずれかを舞台裏で使用しています。これらのツールは、次のようなさまざまな手法を使用してファイル サイズを縮小します。
減色: トゥルーカラー PNG 画像が 256 色以下を使用する場合、インデックス付き画像に変換することで画像サイズが縮小されます。
メタデータの削除: PNG 画像には、ブラウザーによって無視されることが多いメタデータが含まれている場合があります (たとえば、Photoshop はガンマ情報とソフトウェア名を PNG 画像に保存します)。このデータを削除すると、数バイトまたは数キロバイト節約できます。
事前圧縮: PNG データは 2 段階で圧縮されます。最初の段階はフィルタリングと呼ばれます。これには、より圧縮可能な形式への可逆変換データが含まれます。一部のソフトウェア (たとえば、Photoshop の古いバージョン) はこれを苦手としています。ツールはデータを再分析し、ヒューリスティックまたはブルート フォースを使用して、最も圧縮可能な出力を生成するフィルターを決定します。
DEFLATE : フィルタリングされたデータは、DEFLATEを使用して圧縮されます。このアルゴリズム自体は、さまざまなレベルの圧縮を可能にします (たとえば、高速圧縮と高圧縮)。
再圧縮 (上記の項目 3 と 4) により、元の圧縮の程度にもよりますが、ファイル サイズを 5 ~ 50% 縮小できます。
最新のバージョンでは圧縮アルゴリズムが大幅に改善されているため、Photoshop で「Web 用に保存」を検討することをお勧めします。
ところで、PageSpeed のすべてのものを実際に実装する必要はありません。多かれ少なかれ同じ色の背景画像には css スプライトを使用することをお勧めします。Web サイトの背景が白の場合は、jpg 比較を使用してスプライトのサイズをさらに縮小できます。
幸運を
ドキュメントから読みました:
PNG - 8 ビット以下である必要があります (24 ビットの PNG はパスしません)。