WebサイトのPNG画像ですが、未加工のままWebサイトへ掲載してしまうとWebページ表示速度の低下につながります。画像の読み込みに時間がかかってしまうためです。
本日はWebサイト用に使用するPNG画像を圧縮してデータを軽量化する最適な方法について紹介します。

こちらのモチーフで検証いたしました。↓

PNG画像をサイト上で圧縮する

オンラインサイトで画像を圧縮する3サイトを検証しました。

Optimizilla

Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。

URL	https://imagecompressor.com/ja/
圧縮率	-61％（4.2KB→1.65KB）

compresspng

アップロードをクリックして、圧縮したいPNGイメージを最大20個選択できます。

URL	https://compresspng.com/ja/
圧縮率	-61％（4.2KB→1.65KB）

tinypng.

スマート WebP、PNG、JPEG 圧縮による Web サイトの高速化されます。

URL	https://tinypng.com/
圧縮率	-65％（4.2KB→1.48KB）

PNG画像をAdobeのソフトで圧縮する

PhotoshopのWeb用に保存（PNG-24）

操作	Photoshopを起動 → ファイル → 書き出し → Web用に保存
圧縮率	-1％（4.2KB→1.48KB）

PhotoshopのWeb用に保存（8-bit）

操作	Photoshopを起動 → ファイル → 書き出し → 書き出し形式 → ファイル設定をファイルサイズ小（8-bit）に変更
圧縮率	-50％（4.2KB→2.12KB）

XDのPNG書き出し

操作	XDを起動 → ファイル → 書き出し
圧縮率	+25％（4.2KB→5.29KB）

検証した結果、オンラインサイト上での圧縮は60%ほど画像を圧縮できる上に、質もそこそこ担保されていて優秀でした。