Немного предыстории:
Надоело руками использовать онлайн-сервисы для оптимизации фото, решил как-то оптимизировать этот процесс. Выбор пал на генератор статических сайтов Astro.js, с которым ранее немного работал. У них есть компонент , который позволяет задать различные настройки (формат, размеры, качество, дескриптор плотности и ширины) и на выходе получить оптимизированные фото и сгенерированную разметку:
<Picture
src={images[icon.src]()}
formats={['avif', 'webp']}
width={icon.width}
densities={[1.5, 2]}
quality="high"
alt=""
/>
Все было отлично до того момента, пока я не попытался создать оптимизированные изображения для фона в image-set(). Как оказалось, там нет простой возможности передать параметры (ссылки на фото) в стили. Только через css-переменные, при этом он эту переменную навешивает на каждый тег в пределах компонента, увеличивая размер html в десятки раз.
Вопрос в следующем - какие еще инструменты можете посоветовать, которые позволяют автоматизировать работу с фото и удовлетворяют следующим требованиям:
- возможность выбора разных форматов фото
- возможность указать доп. плотность пикселей для ретины
- возможность указывать ширину/высоту фото (crop)
- чистый html, так если бы верстка делалась руками. То есть никаких доп. хеш-классов, которые обычно добавляют всякие фреймворки и генераторы статики для изоляции стилей в пределах компонента.
Обычно для верстки используют gulp, с которым я не знаком. Там есть возможности такой гибкой работы с фото?
Средний
Средний
