画像最適化でWEBサイト表示高速化

現在、光回線がかなり普及してきており、少々重たい画像でもサクッと表示されるようになりました。
その為、制作サイドとしても昔のように画像サイズをあまり意識しなくても良くなってきたのですが…
しかし、多種多様のスマートフォンやタブレットPCなどが右肩上がりに普及してきたおかげで、またまた画像サイズを意識しなければならなくなってきました。
常にWi-Fi環境があればいいのですが、3G回線で利用するシーンが多々あります。なかなか表示されないWEBサイトは直帰されますよね。というか、LPすら表示されず離脱してしまうことも少なくありません。

そこで、画像最適化のためのアプリをご紹介。

 最近は透過pngの使用率がかなり高くなってきています。photoshopで色数の多い画像をpng-24で書き出したら結構なサイズになります。
そこでImageAlphaの出番です。

 

pngを最適化できるImageAlpha

ImageAlphaを立ちあげ、png画像をドラッグ&ドロップ。左下の設定を指定することで最適化されます。品質に拘らなければMedian Cutでいいでしょう。Postarizarだとあまりサイズが落ちません。

ちなみに、上の画像をMedian Cut + 256 +Ditheredで最適化すると、

603kbから150kbとなり76%のサイズ削減できました。
見た目もほとんど違いがないので、かなりイケてますね。

さらに、Command+Shift+S で保存すると以下の画像のように “Optimize with ImageOptim” というチェックボックスが表示されます。

ImageOptimと連動できるので効率的

チェックを入れて保存すると自動的にImageOptimで最適化されます。

不要なメタデータなどを削除しさらにスリム化

これで、150kbからさらに144kbへ最適化されました。

603kbの画像が最終的には144kbとなり、かなり軽量化されました。
見た目はほとんど変わらず、これだけスリムになるのでかなり使えますね。

ちなみに、jpg画像であればJPEGminiを使うほうがいいかも。

This entry was posted in Technique. Bookmark the permalink.

Leave a reply