Как правильно реализовать Lazy-loading для <picture />

Использую тэг <picture /> для реализации fallback-механизма для WebP-изображений:

<picture>
    <source srcset="//pics.avs.io/210/50/SU@2x.webp" type="image/webp" />
    <img src="//pics.avs.io/210/50/SU@2x.png" alt="Aeroflot" title="Aeroflot" />
</picture>

Браузер в первую очередь пытается загрузить то, что находится в <source /> и если встречает неподдерживаемый формат image/webp, то загружает то, что находится в атрибуте src тэга <img />

Теперь я хочу сделать Lazyload таких изображений с помощью Intersection Observer API. Когда я заменяю атрибут src на data-src в тэге <img /> то загружается изображение из тэга <source />. Как мне правильно реализовать Lazyload изображений не сломав при этом разметку? Хочу, чтобы это работало правильно и не вызывало вопросов у HTML-валидаторов (страница должна проходить тесты на The W3C Markup Validation Service)