PNG画像を圧縮しサイトを作成して比較してみた

CSS on ,

今回はPNG画像の圧縮について書きたいと思います。

サイト作成を長年していますが、昔はテーブルレイアウトで、画像はJPEGとGIFこの2種類だけで製作したものです。
テーブルレイアウトの性質上、画像をちょっとずらして重ねたような表現をするときは一枚の画像にして使用していました。

しかしPNG画像の出現、CSSのでレイアウトをするようになってから、画像を二枚重ねた表現なども凄く楽になり、背景透過といえばPNGが当たり前にようになりました。
GIF画像は1色透過のに対してPNGはアルファチャンネルの為、半透明の表現ができるようになったり、PNGはフルカラーな為、256色しかないGIFより細かな色の表現ができます。

最近ではCSSのposisionを使い、画像の上に画像を重ねた表現も簡単にできるようになりました。
と言う訳で、今回はテスト的にサイトを作成し、PNG画像を圧縮したものと、そうでないものを比較してみたいと思います。

まずは、Photoshopで作成したデザインにスライスをいれ、PNGで出力し、そのまま使用します。
今回は背景の画像以外は、全て背景透過PNGとして出力しました。

そして、コーディングします。
さすがにサイト全部作るのは、あれで、あれなので、今回はメインビジュアルまでの上段部分だけコーディングしました。

■サンプルサイト【非圧縮】
http://tecblo.com/png_test01/

うむ、思ったより重くない・・
アクセスしても気にならないので、このままでも良い気が・・・と、つい思ってしまうところですが、
ここから、先程PhotoShopで出力したPNG画像を圧縮していきます!

今回、圧縮に使用させて頂いたのは、こちらのサイト

TinyPNG : https://tinypng.com/

ファイルをドロップアンドドラッグで放り込むだけ、簡単に使用できます。
では、さっそく放りんでみます。

左が圧縮前のファイルサイズ、右が圧縮後のファイルサイズ、一目瞭然ですね。
このパンダ、なかなか良い仕事をするじゃねえか・・

ということで、圧縮したファイルに差し替えたバージョンがこちら

■サンプルサイト【圧縮済】
http://tecblo.com/png_test02/

■サンプルサイト【非圧縮】
http://tecblo.com/png_test01/

先程の、非圧縮と見比べてみてどうでしょう?
見た目で違いはわかりますでしょうか?正直僕には分かりません。

だが実際は、画像ファイルサイズが、780KB も違うのです!
誰もが知っている神ゲー、スーパーマリオの容量が40KBなので、780KBというと、スーパーマリオ19.5本分です!
ステージにして156ステージ分です!これは凄い!

「えっ、たったそんだけ?」と思う方もいるかもしれませんが、サイトを作成するうえでこの差はかなりでかいです。
メインビジュアル部分だけで、この差なので、他のページやサイト規模によってはかなり変わってくると思います。

PNGの圧縮方法はPhotoShopの出力でも、ニアレストネイバー法、バイリニア法、バイキュービック法など色々ありますので、それぞれの特徴を把握し、適した出力方法を試し、比較してみても良いかと思います。