Lazyload для тега picture

Подскажите, пожалуйста, как правильно лениво загружать (желательно по скроллу) картинки, которые собираются через тег <picture>?

Предположим для такой конструкции:

<picture class="bl_games__image">
  <source media="(min-width: 2400px)" srcset="big_image.webp" type="image/webp">
  <source media="(min-width: 2400px)" srcset="big_image.jpg">
  <source media="(min-width:320px)" srcset="middle_image.jpg">
  <img src="middle_image.jpg" alt="#">
</picture>

Я пробовал воспользоваться плагином jQuery & Zepto, но не пойму: как правильно добавлять data-* атрибуты и на что цеплять класс .lazy, чтобы это работало адекватно и для медиа-запросов.