画像を最適化して速いサイトを作る方法【読み込み時間を短縮してユーザの負担を軽く】

ウェブサイトで画像が果たす役割は非常に大きく、うまく使えばコンバージョンやエンゲージメントの向上をもたらしてくれます。実際、ウェブサイト上にある要素のうち3分の2は画像だと言われています。しかし大きな画像の処理にはパワーが必要で、帯域幅を消費してしまうなど欠点も存在します。

今回は帯域幅と読み込み時間を削減した画像の扱い方を解説します。

画像形式を選ぶ

最適化の最初のステップは、画像形式の選択です。もし可能であればできるだけSVGを使用してください。ベクター画像であるSVGはリサイズしても画質が保たれ、圧縮することも可能です。現在ストックフォトを配置している部分も、ベクター画像に置き換えられる場合があるのです。

とは言え、ウェブではビットマップ画像も必ず必要になります。ファイルサイズと画質のバランスが優れたJPGが定番ですが、最近ではWebPも少しずつ普及してきています。ChromeやOperaなどサポートするブラウザはまだ限られますが、<picture>と<source>要素を使えば対応していないブラウザではJPGを読み込ませることも可能です。それ以外では、透過している画像にはPNGを、アニメーションにはGIFを使いましょう。

画像の遅延読み込み

遅延読み込みとは、ユーザーがページをスクロールして画像が必要になるまで読み込みを遅らせることです。CTAがページ上部にある場合には多くの帯域幅を削減できます。JavaScriptを使用して画像がビューポート内にあるかを確認し、そうなった場合にのみ画像を読み込むようにします。ただしスクロールのたびにこうしたチェックが入るので、多少パフォーマンスに影響してしまいます。

プログレッシブ画像

プログレッシブ画像は、はじめは低解像度で読み込まれ、だんだんと元の解像度に復元される画像です。画像をプログレッシブ形式に変換してもいいですし、プレースホルダーを利用することもできます。

プレースホルダー

プレースホルダーは読み込みを高速化してはくれませんが、ユーザーにちょっとだけ辛抱強くなってもらうことができます。空白を置いたり、代替のアイコンを表示したり、低解像度の代替画像で置き換えたりすることで、ユーザーに画像がこれから読み込まれることを教えてあげるのです。

ネットワークの帯域にはコストがかかります。まずは本当に写真を使わなければならないのか検討しましょう。もし写真が必要なら、正しい形式の画像を選び、できるだけ最適化しましょう。それからJavaScriptなどを利用して表示を工夫しましょう。うまく最適化できれば、あなたのサイトがずっと速く感じられるはずです。

※本記事は、An Introduction to Progressive Image Renderingを翻訳・再構成したものです。