Есть картинка image.jpg достаточно большим размером 4000*5000 px, конфиг необходимых размеров по breakpoint'ам
{1200: 900px, 768: 700px, 1: 500px} и конфиг dpr
{1, 2, 3}.
Необходимо получить пачку картинок по указанным размерам:
image-900@1.jpg
image-700@1.jpg
image-500@1.jpg
image-900@2.jpg
image-700@2.jpg
image-500@2.jpg
image-900@3.jpg
image-700@3.jpg
image-500@3.jpg
и HTML-разметку (просто выводом в консоль)
<picture>
<source media="(min-width: 1200px)" srcset="image-900@1.jpg 1x, image-900@2.jpg 2x, image-900@3.jpg 3x">
<source media="(min-width: 768px)" srcset="image-700@.jpg 1x, image-700@2.jpg 2x, image-700@3.jpg 3x">
<img srcset="image-500@1.jpg 1x, image-500@2.jpg 2x, image-500@3.jpg 3x">
</picture>
Подобная задача легко решается в CMS, но изредко нужно "ручное", консольное решение, предпочтительно на node.js.
В интернетах находятся интересные варианты
https://github.com/felixrieseberg/responsive-image... https://github.com/TrigenSoftware/gulp-srcset, https://github.com/mahnunchik/gulp-responsive только для ресайза, но хочется комплексного решения для максимальной автоматизации и без велосипедостроения.
Порекомендуйте, если встречали что-то подобное?
Средний
Простой
