サイト全体の画像サイズを30%削減に成功！！あるサイトの画像サイズを一斉に圧縮した話

このブログでは度々WEBサイト高速化の重要性を紹介しています。

【関連記事】Webページの表示速度を改善すべき理由

WEBページにおいて、その読込速度というのは非常に重要です。

今日のSEOにおいて読込速度が遅いと、サイト全体の評価が下がってしまう恐れがあり、何よりユーザビリティーを損ないます。ラドウェアという会社が調査した結果によると、サイト表示が2秒遅いだけで、離脱率が50%以上も増加するそうです。

いつまでも読み込みが終わらないサイトというのは、ユーザーに非常にストレスを感じさせます。

今回はそのサイト表示高速化と深い関係がある画像の圧縮について、最近私が実践した施策と結果を紹介します。

ある中規模サイトで圧縮を試してみた

今回圧縮実行に使用したサイトは次のものです。使用している画像全部を対象に、画像圧縮を行ってみました。

ページ数：約150ページ
画像ファイル数：2485
サイズ：129,051KB

さて、このサイトの画像をキュキュッと圧縮してしまおうと思います。

画像圧縮アプリを導入

まず私のPC環境はwindows。そのためwindowsでインストール可能なアプリケーションの紹介となります。

Caesium

使い方が簡単で高機能な、画像圧縮ソフト。画像を綺麗に保ったまま圧縮することができると評判です。

ダウンロード先はこちら
http://caesium.sourceforge.net/#download

インストールしてアプリを立ち上げたら、ドラッグ＆ドロップでファイルを入れて、圧縮するだけ。

品質やファイルの形式を指定することができます。

シンプルでわかりやすい。jpgもpngいけますが、品質を指定できるのはjpgで出力する場合のみです。

今回はjpg画像を、品質「80」ですべて圧縮してみました。

PNGGauntlet

こちらはpng画像を圧縮してくれるアプリPNGGauntlet。これも画像品質をほとんど落とすことなく圧縮してくれると評判のWindowsアプリ。

下記からダウンロード＆インストール

PNGGauntlet公式サイト
http://pnggauntlet.com/

名前からもわかるようにpng専用です。出力はpngしかできませんが、入力はjpgなど他の形式も対応しています。

PNGGauntletの圧縮率は非常に優秀。画像本来の画質の部分を調整してくれる他、画像ファイルに埋め込まれたコメント等の見た目に関係のないデータを取り除いてくれることもでき、結果ほとんどの画像で半分以上のサイズを削り取ることができるのです。

圧縮スピードも早く、サクサクおこなうことができます。そのためpngはこちらのアプリを使用しました。

どれほど画像サイズは圧縮できるのか

もう一度紹介すると、今回圧縮を試みたサイトは以下の規模のサイト。

ページ数：約150ページ
画像ファイル数：2485
サイズ：129,051KB

それがCaesiumとPNGGauntletを使って圧縮した結果、

サイズ129,051KB→96,019KBとなりました！

約30%のファイルサイズ圧縮に成功です。

圧縮レベルを調整することで、更にサイズを小さくすることはできます。半分以下にすることも可能です。ただ見た目に劣化が表れない程度であれば、これぐらいがちょうど良いかなと思います。

画像圧縮は、WEBサイト表示高速化でもっとも簡単で即効性がある方法なので、非常にオススメです。

Windowsユーザーであれば、jpgは「Caesium」、pngは「PNGGauntlet」。このアプリは鉄板です。