PNG画像の圧縮率が高すぎる可逆圧縮、そして非可逆圧縮との違いについて

今まで画像の圧縮にはmacの「ImageOptim」という圧縮ソフトを利用していました。
「ImageOptim」は、png,jpg,gif等の画像を一気に圧縮してくれるソフトです。

そして、先日ホシナカズキさんが運営する「mbdb」というサイトの「ここまで小さくなるの!? PNGを非可逆圧縮する｢TinyPNG｣がスゲェ!!」でpngを圧縮出来るサイトを紹介していたので試したところ
12.4mb(277ファイル)あったファイルサイズが3.1mbまで圧縮する事が出来ました。

なぜ、画像を圧縮するかというとホームページの表示速度に関わる部分だからです。
表示速度の遅いホームページは離脱率が高くなるので、出来るだけページ内の画像等の容量を抑える事で高速表示が可能となり離脱率を下げる事が可能となります。

可逆圧縮と非可逆圧縮

この「可逆圧縮」と「不可逆圧縮」は圧縮方式に違いがあります。

可逆圧縮

非可逆圧縮

jpgで圧縮を掛けて劣化している画像をみた事をあるのではないでしょうか?
web制作でも、ページの画像容量を抑える為に圧縮を掛けますが、掛け過ぎると画像が劣化して汚くなってしまいます。
その為、ギリギリのところで調整する事も多いです。

ImageOptimでpng画像を圧縮した場合

macの専用ソフト「ImageOptim」でpngを圧縮した場合
12.4mb(277ファイル)あった画像データが、5.6mbまで圧縮する事が可能でした。
容量は半分以下にまで抑える事が可能でした。

メリット

デメリット

TinyPNGで圧縮した場合

TinyPNGは優秀でした。(※TinyPNG本サイトでは非可逆圧縮となってます)
12.4mb(277ファイル)から3.1mbまで圧縮できました。なんと4分の1まで圧縮可能でした。

メリット

デメリット

使い方は、「mbdb」というサイトの「ここまで小さくなるの!? PNGを非可逆圧縮する｢TinyPNG｣がスゲェ!!」でみる事が出来ます。

結論

この圧縮した画像をtrevo-web.comでアップすると若干表示がスムーズになった気がしました。
試しに、12.4mbの画像をアップしてみたのですが表示速度は少し体感できるぐらい遅くなりました。
画像以外にも、CSSやjavascript,html等も圧縮可能です。
では、どうやって圧縮出来る部分を調べるかは別の記事でご紹介致します。