Lazysizesで画像遅延読み込みかつRetinaディスプレイ対応にする

画像の遅延読み込みには[Lazy load]を利用していましたが、こちらはsrcset属性に対応していないようでLazysizesに乗り換えることにしました。

こちらはjQueryに依存することなく単体で動作するようです。

利用方法

ファイルを読み込む

<script src="lazysizes.min.js" async=""></script>

HTML

以下のように記述することで、Retinaディスプレイのときには 2xのほうが読み込まれます。

<img data-sizes="auto" data-src="sample.png" 
data-srcset="sample.png 1x, sample@2x.png 2x" 
class="lazyload" alt="" />

参考：lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本