ブログやWebサイトに掲載する画像ファイルの最適化
2020年8月29日
2020年9月4日
現在のサイトに利用されている画像ファイルは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
![]()
100% ![]()
90%
![]()
70% ![]()
50%
画像の最適化・圧縮は行うべき
厳密に色味を再現する必要があれば難しいかもしれませんが、イメージ画像や説明用の画像であれば、色味や多少あらさがあっても、画像ファイルをより軽くしコンテンツの表示を軽くした方がアクセスが伸びると思います。
created by Rinker
Webサイト最適化技術を総合的に解説した手引書。検索にヒットしやすく操作性がシンプルで潜在顧客を購入者へと変える魅力的なWebサイトの作成方法を「SEO的なオンラインマーケティング」と「Webサイトのパフォーマンスチューニング(バックエンド/フロントエンド)」という2つの側面から解説します。
created by Rinker
検索エンジン対策の最新定番解説書!これだけは必ずおさえて、検索にガンガンヒットさせよう!本書は、SEO本初のベストセラーとなった『検索にガンガンヒットするホームページの作り方』の最新リニューアル書籍です。商用Webでは今や当たり前となったSEO対策に、はじめて取り組む方向けに、