WebサイトのPNG画像ですが、未加工のままWebサイトへ掲載してしまうとWebページ表示速度の低下につながります。画像の読み込みに時間がかかってしまうためです。
本日はWebサイト用に使用するPNG画像を圧縮してデータを軽量化する最適な方法について紹介します。
こちらのモチーフで検証いたしました。↓
PNG画像をサイト上で圧縮する
オンラインサイトで画像を圧縮する3サイトを検証しました。
Optimizilla
Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。
compresspng
アップロードをクリックして、圧縮したいPNGイメージを最大20個選択できます。
tinypng.
スマート WebP、PNG、JPEG 圧縮による Web サイトの高速化されます。
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%ほど画像を圧縮できる上に、質もそこそこ担保されていて優秀でした。
KOHIMOTO LABO
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
