Изображения

Через gulp создаются копии всех изображений для разных размеров и плотностей экранов. Lazyload - для загрузки изображений только при приближении к объявлению на странице, для его подключения загружаем скрипт - lazyload.min.js.

img class="lazyload" data-src="/img/hello.jpg" data-was-processed="true" alt="Hello!" /> 

Далее через gulp автоматически добавляются новые параметры - webp (как формат меньше чем jpg), 2\3x качество картинок для разной плотности экранов и различные ограничения по размеру экранов. Все это оборачивается в тэг picture с добавлением фолбэк в виде img в самом конце.

2. Для background-image в случае использования lazyload. Далее через gulp автоматически добавляются новые параметры - webp (как формат меньше чем jpg), 2\3x качество картинок для разной плотности экранов и различные ограничения по размеру экранов для. Все это заменяется в data-bgset и загружается в файл стилей при объявлении на странице через ls.bgset.min.js.