レスポンシブ対応のWebサイトでは、画面サイズに合わせてレイアウトを変更するだけでなく、画像も適切なサイズで配信することが重要です。

大きな画像をスマートフォンでもそのまま読み込むと、不要なデータ転送が発生し、表示速度の低下につながる可能性があります。

本記事では、レスポンシブ画像によって実際に表示速度がどの程度改善するのか、独自検証を行いました。

【独自検証】レスポンシブ画像で表示速度はどれだけ改善する？

レスポンシブ画像の対応の有無でページの表示速度がどれだけ改善するか検証してみました。

特に影響の出やすいスマホページでの検証動画を撮影したので、まずはこちらをご覧ください。

参考：レスポンシブ画像とは？

今回の検証環境

上記の条件でビフォーアフターを比較していきます。

HTMLの内容も下記のように変更を行いました。

今回設定したレスポンシブ画像の施策内容

画像20枚分のimgタグのHTMLだけ変更を行っています。

設定①：srcset属性で画面候補と幅を指定する

srcset属性で画像候補とその幅を指定してあげます。

その際にPC用サイズの画像とスマホ用サイズの画像を用意する必要があります。

今回はPC用で1600pxの幅のサイズで、スマホ用で600pxの幅のサイズで設定しています。

設定②：sizes属性で画像の表示幅を指定する

sizes属性で画面幅に応じて最適なサイズの画像を表示できるようブラウザに伝える設定をしています。

今回は、画面サイズに応じて読み込む画像を切り替えています。

例えば、画面幅375pxのスマートフォンでは、表示幅を約343pxとして600pxの画像を選択し、画面幅1,200px以上のPCでは最大1,060pxで表示するため、1,600pxの画像を使用します。

端末に合わない大きな画像を読み込む必要がなくなるため、画像のデータ転送量を抑え、表示速度の改善につなげられます。

実際のソースは下記のように変更し、20枚分の画像のHTMLを全てこの形式に変更しています。

ビフォー

<img
  src="images/image-01-1600.jpg"
  width="1600"
  height="900"
  alt="検証用画像1"
>

アフター

<img
  src="images/image-01-1600.jpg"
  srcset="
    images/image-01-600.jpg 600w,
    images/image-01-1600.jpg 1600w
  "
  sizes="(max-width: 600px) calc(100vw - 32px), (max-width: 1140px) calc(100vw - 40px), 1060px"
  width="1600"
  height="900"
  alt="検証用画像1"
>

※スマホ用の画像は、PCで使用している画像をそのまま600pxに変更したものになります。

【検証結果】レスポンシブ画像の有無での改善結果

レスポンシブ画像の対応有無のページで比較してみた結果、上記の通りとなりました。

明らかに転送量や画像の読み込み時間は削減できたという結果になりました。

1つ1つの画像の読み込み量が減った分、ページ全体の読み込み速度もかなり速くなったと言えます。

改善点①：LCP画像の転送量が約96％削減

レスポンシブ対応になったことで、LCP画像の読み込みの容量も3.6MBあったものが、124kBとなりました。

こちらの画像を見てもらえればわかるように、レスポンシブ対応の方のページは読み込む画像が切り替わっていることがわかります。

スマホページで1600pxの大きな画像を読み込む必要もなく、600pxの方の画像を読み込ませることでここまで転送量が下げられました。

改善点②：LCP画像の読み込み時間が約35秒短縮

こちらはLCP画像の読み込み時間を計測しているものですが、レスポンシブ画像なしで1600pxの画像を読み込むのに36秒かかっていましたが、レスポンシブ画像対応で600pxの画像を読み込むようになり1.14秒で読み込みが完了するようになりました。

これは単純にLCP画像だけがレスポンシブ画像の対応の影響を受けたわけではなく、ページ全体の画像の読み込みが速くなったことでLCP画像も更に速く読み込めるようになったと言えるでしょう。

改善点③：ページ全体の転送量と読み込み時間も削減

画像だけではありません。

ページ全体の転送量と全体の読み込み時間も大きく削減されました。

こちらは転送量のビフォーアフターですが、37MBあったページの転送量が2.1MBまで削減されていることがわかります。

小さくなってしまい見にくいですが、下記の画像はページ全体の読み込み時間の変化です。

通常だと37秒ほどかかっていた読み込み時間が、4.6秒まで削減されました。

1600pxの20枚の画像が600pxになることでここまで影響が出ることがわかります。

レスポンシブ画像を実装する際の注意点

CSSで画像を縮小するだけでは転送量は減らない

CSSでwidth: 100%などを指定して画像を小さく表示しても、サーバーから読み込む画像ファイル自体のサイズは変わりません。

例えば、スマートフォンで300px幅に表示していても、1,600px幅・500KBの画像を読み込めば、500KB分のデータを転送することになります。

表示サイズだけでなく、srcsetやpictureなどを利用して、端末に適したサイズの画像を配信・準備することが重要です。

画像の表示サイズと配信サイズを適切に設定する

画像は、実際に表示するサイズに近い画像を配信することが基本です。

例えば、スマートフォンで幅343px程度に表示する画像に1,600pxの画像を使用すると、必要以上に大きなデータを読み込むことになります。

srcsetとsizesを設定すれば、画面幅に応じて600pxや1,600pxなど複数の画像から適切なものをブラウザが選択できます。

表示サイズと配信サイズの差を小さくすることで、無駄な転送量を削減できます。

画像の画質とファイル容量のバランスを考える

画像を小さくすればするほど表示速度が改善するとは限りません。

圧縮しすぎると画像が粗くなり、Webサイトの品質やユーザー体験を損なう可能性があります。

例えば、同じ600px幅の画像でも、JPEGやWebP、AVIFなど形式によってファイル容量や画質が異なります。

用途に応じて適切な画像形式と圧縮率を選び、画質を維持しながら可能な限りファイル容量を抑えることが重要です。

LandingHubの導入で手間をかけずに速度改善が可能

レスポンシブ画像の対応と並行して、LandingHubを導入することで更にページの速度改善に貢献ができます。

元々のページでレスポンシブ画像を設定している場合、LandingHubの導入によって更に最適化がかけられます。

画像の圧縮・次世代フォーマット変換による最適化

LandingHubを導入すれば、レスポンシブでサイズ別に用意した画像それぞれ自動圧縮、次世代フォーマットに変換することが可能です。

こうすることで更に画像の最適化に加速がかかります。

画像配信の最適化（遅延読み込み）で表示速度改善

LandingHubの導入で、画像の遅延読み込みも自動で設定されます。

1つ1つのHTMLを手動で作成する必要がありません。

これ以外にもCDN機能やキャッシュ制御など表示速度を改善させるための機能がついているため導入メリットが高いツールです。

LandingHubの導入メリット

1. 手作業を減らせる

画像を公開するたびに圧縮や形式変換を行う作業を減らせるため、Web担当者はコンテンツ制作やサイト改善など、ほかの業務に時間を使いやすくなります。

2. 圧縮漏れを防ぎやすくなる

手作業では、画像の圧縮忘れや形式の統一漏れが発生することがあります。

最適化を仕組み化することで、個々の担当者の作業に依存しにくい運用を目指せます。

3. サイト全体の画像を継続的に最適化できる

サイトに画像が追加されるたびに個別対応するのではなく、画像の最適化と配信を運用に組み込むことで、サイト全体のパフォーマンスを維持・改善しやすくなります。

特に、広告用のランディングページやSEOメディア、商品画像を多く扱うサイトでは、画像の最適化を継続できる仕組みが重要です。

レスポンシブ画像で不要なデータ通信を減らし表示速度を改善しよう

レスポンシブ画像は、ユーザーが利用している端末や画面サイズに合わせて、適切なサイズの画像を配信することで不要なデータ通信を減らす方法です。

例えば、スマートフォンに1,600pxの大きな画像をそのまま配信するのではなく、600px程度の画像を配信することで、画像の転送量を削減できます。

srcsetやsizesを活用すれば、ブラウザが状況に応じて適切な画像を選択できます。

ただし、LCP画像の読み込みや画質とのバランスにも注意が必要です。

画像の表示サイズだけでなく、実際に配信するファイルサイズまで最適化することが、表示速度改善につながります。