PNG画像の圧縮率が高すぎる可逆圧縮、そして非可逆圧縮との違いについて
今まで画像の圧縮にはmacの「ImageOptim」という圧縮ソフトを利用していました。
「ImageOptim」は、png,jpg,gif等の画像を一気に圧縮してくれるソフトです。
そして、先日ホシナカズキさんが運営する「mbdb」というサイトの「ここまで小さくなるの!? PNGを非可逆圧縮する｢TinyPNG｣がスゲェ!!」でpngを圧縮出来るサイトを紹介していたので試したところ
12.4mb(277ファイル)あったファイルサイズが3.1mbまで圧縮する事が出来ました。
なぜ、画像を圧縮するかというとホームページの表示速度に関わる部分だからです。
表示速度の遅いホームページは離脱率が高くなるので、出来るだけページ内の画像等の容量を抑える事で高速表示が可能となり離脱率を下げる事が可能となります。
可逆圧縮と非可逆圧縮
この「可逆圧縮」と「不可逆圧縮」は圧縮方式に違いがあります。
可逆圧縮
「可逆圧縮（かぎゃくあっしゅく）とは、圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法のこと。ロスレス圧縮とも呼ばれる。」
wikipedia参照
PNG,GIF,TIFF,PSD,TGAの画像が対象となっています。
非可逆圧縮
「非可逆圧縮（ひかぎゃくあっしゅく）とは、圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方法のこと。不可逆圧縮（ふかぎゃくあっしゅく）とも呼ばれる。」
wikipedia参照
JPEG画像が対象
jpgで圧縮を掛けて劣化している画像をみた事をあるのではないでしょうか?
web制作でも、ページの画像容量を抑える為に圧縮を掛けますが、掛け過ぎると画像が劣化して汚くなってしまいます。
その為、ギリギリのところで調整する事も多いです。
ImageOptimでpng画像を圧縮した場合
macの専用ソフト「ImageOptim」でpngを圧縮した場合
12.4mb(277ファイル)あった画像データが、5.6mbまで圧縮する事が可能でした。
容量は半分以下にまで抑える事が可能でした。
メリット
- ・ソフトに画像を放り込むと一気に圧縮してくれる
- ・png,jpg,gif等の画像に対応している。
- ・変換後上書きしてくれるので便利
デメリット
- ・mac専用のソフト
- ・圧縮率がTinyPNGより悪い
TinyPNGで圧縮した場合
TinyPNGは優秀でした。(※TinyPNG本サイトでは非可逆圧縮となってます)
12.4mb(277ファイル)から3.1mbまで圧縮できました。なんと4分の1まで圧縮可能でした。
メリット
- ・ImageOptimよりも圧縮率が高い
- ・windowsでも基本的には変換可能
デメリット
- ・ファイルが20枚までしか受け付けない
- ・変換後はダウンロードする必要がある
使い方は、「mbdb」というサイトの「ここまで小さくなるの!? PNGを非可逆圧縮する｢TinyPNG｣がスゲェ!!」でみる事が出来ます。
結論
この圧縮した画像をtrevo-web.comでアップすると若干表示がスムーズになった気がしました。
試しに、12.4mbの画像をアップしてみたのですが表示速度は少し体感できるぐらい遅くなりました。
画像以外にも、CSSやjavascript,html等も圧縮可能です。
では、どうやって圧縮出来る部分を調べるかは別の記事でご紹介致します。
-
前の記事
SEOでこの数値を見ていますか?・キーワード数・観覧ページ・参照サイト 2012.10.22
-
次の記事
google中の人が教えてくれる、SEO対策に効果のある良質なサイト作りのアドバイス 2012.10.26