imgタグsrcset属性で指定した画像が読み込まれるタイミング

srcset属性は画面の大きさ（ウィンドウの大きさ）に応じて読み込む画像を切り替えることができる機能をimgタグに持たせることができます。今回はWebページ高速化をしていると気になるどのタイミングで読み込まれるかということを検証してみました。

ウィンドウサイズが変更されたタイミングで読み込まれる

srcsetには複数の画像を指定しますがページを読み込んだ際には1枚のみ読み込まれます。

そしてPCやタブレットなどでウィンドウサイズを変えた場合にも再評価が走り追加で画像が読み込まれるという動きになります。高速化を意識していると複数画像指定してそれらが全て読み込まれると無駄になったり、キャッシュを考えて２回目以降のアクセスを想定したりする際に気になると思いますが、srcset属性は読み込みリソースに無駄のないように調整してくれるので適正なサイズ、解像度を設定することで高速化が可能になります。

注意点

srcset属性を指定する際もsrc属性は必須なので省くことはできません。これは古いブラウザ環境のユーザーがアクセスできなくなるのをフォローしています。ですからsrc属性に指定する画像はそういったユーザーを想定して指定するとよいでしょう。srcset属性に対応したブラウザ環境でsrc属性、srcset属性両方が指定されていたらsrc属性で指定した画像はダウンロードされません。