【誰でもできるサイト改善】画像最適化から考えるページ表示スピード改善

今回は、WEBサイトのページ表示スピードに関わる「画像の最適化」について、ご紹介します。
WEBサイトがなかなか表示されず、ストレスに感じたことは誰しも経験があることかと思いますが、皆さんの運営するサイトは大丈夫でしょうか？

WEBサイトの表示が遅いことは、ユーザーにこのような行動・思考をさせてしまっているかもしれません。
・表示されるまで待てないから、他のサイトを見よう（離脱してしまう）
・あのサイトは全然表示されないから、もう見なくていいや（再び訪れてもらえない）
など、機会損失につながっている懸念があります。

ユーザーのネットワーク環境が影響していることもありますが、WEBサイト側でも改善の余地はあります。そこで着目すべきなのが、ページ表示スピードです。
ページ表示スピードはGoogleのウェブパフォーマンスツール「PageSpeed Insights」に対象のサイトURLを入力するだけで、表示速度に影響する課題点を確認することができますが、今回はその項目の中でも、まず対処しておきたい「画像最適化」について、ご説明します。

■参考：PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

画像の最適化とは

そもそも、画像の最適化とは何を指すのでしょうか。
画像ファイルは、テキストファイルに比べるとファイルサイズが大きく、表示速度への影響も大きくなります。
そのため、画像の大きさや形式を適切なものに設定し、ユーザーがストレスなく閲覧できるようにすることが最適化だと考えられています。

では、具体的にGoogleの「PageSpeed Insights」の結果で、WEBサイトの画像改善が必要と出た場合、どのような対策が行えるのでしょうか。
目的により手法はいくつかありますが、大きく分けると下記の２つに分けられます。
・画像のサイズを圧縮する
・画像の総数を削減する

本記事では画像の圧縮について、どういった利点があるか、お話ししていきます。

画像の圧縮

気づかぬうちにやってしまいがちなのが、撮影した画像をそのままサイトに使用してしまうことです。一眼レフカメラはもちろん、最近では高性能カメラを搭載したスマートフォンも増えているので、撮影した画像は必ずファイルサイズを確認しましょう。
推奨される画質と解像度は、画質が85、解像度は72dpiとされています。あくまでも推奨ですので、実際の画像の見え方、WEB上のどこに使用するかも踏まえて、考える必要があります。

また、サイズについては、500KB(キロバイト)程度でも最適化対象になることがあります。そのため、1MB(メガバイト)もある高品質な画像はWEBサイトでの使用を極力避け、下記ツールなどを使用してサイズを圧縮することをおすすめします。

画像圧縮におすすめの無料ツール

・TinyPNG

（https://tinypng.com/）

パンダでおなじみの無料オンラインツールです。
写真や画像をサイトにドラッグ＆ドロップするだけで、画質を落とさずにサイズ容量を圧縮してくれます。
圧縮可能なファイル形式は.pngと.jpgです。
無料版では20ファイルまでまとめて圧縮が可能。有料版もあります。

・Optimizilla

（https://imagecompressor.com/ja/）

こちらは恐竜がアイコンの無料オンラインツール。
上記のTinyPNG同様、写真や画像をサイトにドラッグ＆ドロップするだけで、サイズ容量を圧縮できます。
画像の圧縮率や、画質を調整できるのがOptimizillaの特徴です。
圧縮可能なファイル形式はこちらも同様.pngと.jpg、20ファイルまでまとめて圧縮が可能です。

他にもツールを使用せず、PNGやJPEG より圧縮性能が高い次世代フォーマット（JPEG 2000、JPEG XR、WebP など）を使用し、ダウンロード時間やデータ使用量を抑えることも可能ですが、2021年6月現在、Google Chromeでは表示されるが、Microsoft Edgeなどでは画像が表示されないなど、対応ブラウザの課題があるため、WEB制作においてはあまり推奨されません。

まとめ

サイトデザインを華やかにしたり、リッチなデザインにしたりしようとすると、どうしても画像を多用してしまいがちです。
しかし、こだわって制作したWEBサイトがそもそもユーザーの目に触れていないとなれば、ユーザーの反応も確認できず、今後の改善に活かすこともできません。

また、モバイルでの評価がSEOでの上位表示の基準であることを踏まえると、PCで問題なく表示されているかよりも、モバイルユーザーがストレスなくサイトを閲覧できているかが重要となってきます。
そのため、Google PageSpeed Insightsの「モバイル」タブの情報は必ず確認し、そこに記載された課題を基に、スマートフォン等のデバイスで読み込み時間の短縮を行っていきましょう。

しかし、Google PageSpeed Insightsの点数を上げることだけが目的にならないように注意も必要です。
WEBサイトのパフォーマンスに対する万能ツールではないため、100点を取得することが必ずしも重要ではありません。
PageSpeed Insightsのスコアで90～100点を獲得していないサイトでも、平均読み込み時間が速いサイトもあります。本当に重要なのは、実際にユーザー目線で自社のWEBサイトを閲覧した際に、すぐに表示されるか、ストレスを感じる読み込み速度ではないかです。

今回は画像最適化の中でも「圧縮」についてご紹介しましたが、その他にも「画像数の見直し（テキスト化）」や「SEOとデザイン性どちらを重視するか」といった観点もあります。そちらについては次回以降、ご紹介していきます。

いかがでしたでしょうか？まずはユーザーにサイトを閲覧してもらい、サイト内を回遊してもらうことがスタートラインです。そのことを踏まえ、このコンテンツが皆さんにとって有用なものとなっていれば嬉しいです

またセンタードは、WEBディレクター×WEBコンサルタントが連携し、『貴社のビジネスを成功に導く』サポートをします。
WEBの売上の作り方に関してお困りのことがございましたら、お気軽にご相談くださいませ。