Pagespeed Insightsは表示速度を改善・診断するためのツールです。
診断を行った際に、改善項目として非常によく出現するのが”画像を最適化する”の項目です。
これが出る理由と改善施策についてご紹介します。
「画像を最適化する」の項目が出る理由
テキストファイルと比較すると、画像はどうしてもファイルサイズが大きくなってしまうため、ページ表示速度に影響を与えてしまいがちです。
まずは「画像を最適化する」の項目が出てしまう主な原因について以下に記載します。
不必要に大きな画像を使用している
こちらは最も多い原因の一つです。
ページ上で不必要に大きな画像を使用してしまうと、どうしても読み込みに時間がかかってしまい、表示速度は遅くなってしまいます。
画像を圧縮することでファイルサイズを減らす余地がある場合にも、この表示が出ることがあります。
結果として、画像が表示される前に、検索ユーザーが離脱してしまうリスクが高まります。
ファイルフォーマットが不適切
BMPやTIFFなど、Webサイトで使う画像としてはファイルフォーマットが不適切な場合に表示されます。
このような拡張子のファイルはより大きなファイル容量が必要とされるため、「画像を最適化する」が表示されるケースが多いです。
「画像を最適化する」の改善方法について
画像を適切なサイズに変更する
結論からお伝えすると、適切なサイズに変更して(最小限にして)使用することが改善に繋がります。
加えて、「基本的な最適化」と「高度な最適化」が必要です。
全ての画像に対して、不要なスペースの削除や色深度の最小許容レベルの低減、画像コメントの削除や、適切なフォーマットでの画像の保存といった「基本的な最適化」を行いましょう。
また、PEG や PNG ファイルの高度な（ロスレス）圧縮といった「高度な最適化」も同様に必要です。
画像圧縮やプラグインを使用する
JPEGやPNGに対して、最近では品質にほとんど影響を与えずに圧縮できるようなツールが多く提供されています。
(参考：https://tinypng.com/)
また、現在ではWordPressでのewww image optimizerのように、CMS上で使っている画像を一括で最適化してくれるプラグインもあります。
そういったツールを利用することで、品質を保ったまま圧縮を行い、画像の最適化を行いましょう。
適切な画像のファイル フォーマットを選択する
自社サイトの画像にはどのフォーマットが最適かをテストすることが必要です。
PNGは一部の旧バージョンのブラウザでは部分的にしかサポートしていない可能性はありますが、ほとんどの場合はGIFよりも優れていると言えます。
ただし、非常に小さな画像や、アニメーションを含む場合はGIFを用いましょう。
さらに、写真スタイルにはJPEGを用いることを推奨します。
画像の品質が気になる場合、BMPなど圧縮されていないそのままの画像を使いたいところですが、未圧縮の画像はどうしても読み込みが遅くなります。
BMPやTIFFは極力使用しないようにしましょう。
積極的にページの表示速度改善を
ページ表示速度はランキング要因にそこまで大きく関わっていないと言われていますが、大きくユーザビリティを損なう問題点を放置していると、みすみすユーザーを失いかねません。
結果的に見込み客を逃してしまわないためにも、細かいところをこつこつ積み重ねて、ユーザビリティの高いサイトを作っていきましょう。
