Как структурировать на практике зоопарк IMG, Pictures, SVG + lazy-load + polyfill?

Question

[Василий]

Как правильно применяются в коммерческой разработке зоопарк IMG, Pictures, SVG + lazy-load + polyfill?

что с чем использовать, а что лучше не использовать?
Практическая ситуация, например, есть макет. Нужно верстать так чтобы картинки загружались отложенной загрузкой

(тут вопрос какой тег использовать, тег pictures вроде бы даёт на больше всего универсальности в применении разных форматов и для разных устройств и для ретины)

+ картинки нужно для ретины дисплеев
+ картинки оптимизированные для мобильных устройств
+ кроссбраузерно

Comments

[Rustam Bainazarov]

Тег picture + Lazysizes JS.

SVG в каком плане? Полифил для чего? SVG#use из внешнего файла?

[Василий]

Рустам Байназаров, а с ретиной как быть? этот плагин ничего не пишет про ретину

[Rustam Bainazarov]

Василий, а она тут причем, если это элемент внутренней структуры тега picture? Элемент source с нужными вами параметрами.

[Rustam Bainazarov]

Ну и ясен пень, что эти ваши «ретины» вы должны заранее подготовить самостоятельно, если говорить о файлах.