gzip圧縮と画像減色で、サイトの速度を最適化する方法（2/2）

前回の記事では、gzip圧縮の導入方法について調べていきました。今回は、画像減色とPageSpeed Insightsでの最終的な改善結果についてまとめていこうと思います。

減色方法はいろいろ、その効果を比較してみる。

画像のサイズダウンにはいろいろと方法がありますが、一般的なPhotoshopなどの編集ソフトの書き出し時に行う、いわゆるWEB用保存のようなものではなく、書き出した画像データを、可能な限り見た目を損なうことなく、減色によってサイズダウンする方法について検証していきます。

類似減色サービスの使用法や特徴について。

メジャーな減色サービスと、PageSpeed Insightsからダウンロードできる圧縮画像、それぞれをオリジナル（Photoshop上で最高画質で書き出したjpg画像）と比較しました。

JPEGmini
→有名なオンラインツールですが、今回はインストール版を使用しました。
TinyPNG
→こちらも言わずと知れたオンラインツール。jpgにも対応しています。
OPTPiX® WebFree
→アプリ開発ではデファクトなOPTPiX。WEBで使えるfree版で試しました。
PageSpeed Insights
→分析結果画面よりダウンロードできる画像を使用しました。

JPEGmini

インストール版もWEB版と同じくドラッグ&ドロップでOK。
複数ファイルもまとめて処理できるので、簡単便利です。
初期設定のままだとオリジナルファイルが上書きされます。

ただし無料版は月20枚までの制限があります。

TinyPNG

Tiny”PNG”になっていますが、jpgにも対応しています。

こちらも同時に20ファイルまでドラッグ&ドロップで処理できます。
ダウンロードリンクが個別なのが、少しイケてないです。

OPTPiX® WebFree

サブスクリプション版なら35,000円/月もする優秀な高機能ソフトですが、WebFree版は少し残念な仕上がり。一日5枚までしか処理できず動きもモッサリ。途中で待機状態のまま固まってしまい動きませんでした。ブラウザを変えても同様なため実用には向かないと判断し断念しました。Betaとあるので開発中？今後に期待したいです。

PageSpeed Insights

こちらは前回ご紹介したとおり、分析画面上から圧縮した画像と、改行や空白が短縮されたCSS/JSファイルがパッケージでダウンロードできます。

各サービスで減色性能（画質・サイズ）を比較する。

ご紹介した各サービスの画像を拡大表示し比較しました。
それでは比較画像をご確認ください。

ファイルサイズではTinyPNGが最小です。品質での差はほとんど確認できません。

ここまで拡大してはじめて気づく程度のレベルで、ディティールが失われています（TinyPNG）。

ここからは、JPEGminiとTinyPNGを比較した画像です。

ファイルサイズでは1枚目をのぞき、TinyPNGのほうが小さくなっています。
減色品質では、通常の表示ではまず気づかない程度の差しかありません。

容量削減効果の高いTinyPNG、画質とのバランス重視ならJPEGmini。

ここまで見る限りでは、サイズダウンにおいてはTinyPNGのほうが優秀そうです。ただよーく見るとJPEGminiでは起きない劣化（ほんの僅かなレベルですが）が見受けられるので、よほど品質にこだわる場合はJPEGminiを使ったほうがいいかもしれません。

画像全体の容量削減結果（TinyPNG使用）はこちら。

少ない画像数（当社HPの画像）ですが、全体の80%（5.35MB）ほど削減できました。

MacでPNG減色ならImageAlphaがオススメ。

Mac版のみ、かつjpg非対応ですが、ダウンロードできる無料減色ソフトならImageAlphaがオススメです。英語版しかないですが、操作も簡単で分かりやすいです。

TinyPNGと同じ、pngquantという減色ライブラリを使用しているため、減色品質も高いです。

gzip圧縮と画像減色での、PageSpeed Insights改善結果は？

さて肝心の改善結果ですが、以下のようになりました。

・パソコン対応前

・パソコン対応後

・モバイル対応前

・モバイル対応後

PC側は大きく改善されましたが、モバイル側の点数がまだ低いです。
また”ルールに合格“部分で各対応が認識されていることが分かります。
同じ対応をしてもポイントの上がり方に差が出る結果になりました。

また、firebugで見た対応前後のHTML読み込み時間の差異は以下です。
（firebug上で、ネットタブ → HTMLタブで確認できます）

・gzip対応前

・gzip対応後

全体のまとめ。

ページ単体で見れば、体感速度で分かるほどの差ではありません。ですが画像圧縮と合わせてサイト全体の通信量で考えれば、一定の効果があるのではないかと思います。今回は対応を見送りましたが、mod_expiresによるキャッシュの設定も合わせて対応しておけば、なお効果が期待できそうです。
またSEOの観点からも、4月21日からランキング要素として使用されだしたスマホ対応の可否と合わせて、サイト速度の最適化も必須で対応していきたいところです。

おまけ

WorPressでの減色に役立つ、TinyPNGのプラグインがあったのでご紹介します。

アップロード→有効化し、減色対象サイズにチェック入れて（全部でいいと思います）

メールアドレスで取得できるAPIキーを入力します。

成功すればこのような表示に。

APIを利用して月間500枚までは無料で利用できます。

アップするだけで減色まで行ってくれるので便利ですよ！

gzip圧縮と画像減色で、サイトの速度を最適化する方法（1/2）
gzip圧縮と画像減色で、サイトの速度を最適化する方法（2/2）

クレジット・リンク不要／商用可／アプリOK！アイコンフリー素材まとめ【2015年4月版】

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧