現在のサイトに利用されている画像ファイルはRetina対応などで高解像度の画像ファイルが多数ありコンテンツのダウンロードに時間がかかります。今回はこれらを最適化する方法を記事にしました。

画像ファイルが重いとなぜダメなのか？

画像ファイルが重いとコンテンツの表示速度が極端に遅くなります。検索結果などからクリックされ訪問されてもコンテンツの表示に数秒かかっただけで離脱されてしまいます。また、SEO的にもあまり良くありません。

画像のファイルやHTML、CSS、JSファイルを最適化することでコンテンツの表示速度をより速くすることができます。

画像最適化用のアプリ

画像を最適化（圧縮）するアプリやWebアプリは多数ありますが今回はMacで利用可能な「ImageOptim」を利用します。

ImageOptimの設定

ImageOptimの圧縮率の設定です。
クオリティーは90%程度に設定しています。このパーセンテージを下げることでより圧縮率をあげることができますが、色味に変化が生じたりします。

画像を圧縮する

では実際に圧縮してみます。
圧縮の際の動作は動画を参考にしてみてください。

90%のクオリティーの場合

90%のクオリティーの場合は、33.6％削減されています。

圧縮の結果はImageOptimのウインドウ下に表示されます。

70%のクオリティーの場合

70%のクオリティーの場合は、52.9％削減されています。

圧縮した画像を比べてみる

圧縮した結果は

• 元画像：127KB
• 90%圧縮は22.1%の削減：99KB
• 70%圧縮は59.5%の削減：53KB
• 50%圧縮は71.3%の削減：37KB

となりました。

元画像（未圧縮）127KB

90％圧縮：99KB

70％圧縮：52KB

50％圧縮：37KB

画像の最適化・圧縮は行うべき

厳密に色味を再現する必要があれば難しいかもしれませんが、イメージ画像や説明用の画像であれば、色味や多少あらさがあっても、画像ファイルをより軽くしコンテンツの表示を軽くした方がアクセスが伸びると思います。

オプティマイジングWebサイト SEO・サーバ・クライアントの最適化技術 [ アンドリュー・B．キング ]

created by Rinker

Webサイト最適化技術を総合的に解説した手引書。検索にヒットしやすく操作性がシンプルで潜在顧客を購入者へと変える魅力的なWebサイトの作成方法を「SEO的なオンラインマーケティング」と「Webサイトのパフォーマンスチューニング(バックエンド/フロントエンド)」という2つの側面から解説します。

• Amazon
• 楽天市場
• Yahooショッピング