Есть ли NPM пакет для замены img на picture?

Question

[Евгений Мягких]

Всем привет!

Передо мной стоит задача - нужно автоматизировать конвертацию изображений из jpeg в webp, замена тэгов img на picture в разметке, с последовательны подключением ссылок на изображения: сначала webp, потому jpeg. То же самое в CSS.

Подскажите, какими готовыми решениями можно воспользоваться?

Comments

[alex]

замена тэгов img на picture в разметке, с последовательны подключением ссылок на изображения: сначала webp, потому jpeg. То же самое в CSS.

зачем галп? ведь есть IDE/текстовый редактор

нужно автоматизировать конвертацию изображений из jpeg в webp

google.com/search?q=gulp+jpg+webp

[Евгений Мягких]

Ну, представьте, что мне по разметке нужно заменить условно 15-20 контентных изображений. Хочется автоматизировать такую работу, чем вручную переписывать img на picture + source + img. Вы ведь наверняка css минифицируете не вручную удаляя пробелы? :)

Answer 1

[Александр Баля]

Для создания копий изображений в формате webp можно использовать gulp-webp. Он делает дополнительный файл с тем же именем, что и у исходного изображения, но в формате webp - очень удобно.

Потом не обязательно оборачивать все изображения в <picture>, есть способ попроще с использованием .htaccess. Идея в том, чтобы подменять пути на уровне веб-сервера в зависимости от поддержки в браузере.

Я также иногда использую gulp-webpcss в связке с Modernizr.

Comments

[Евгений Мягких]

Александр, спасибо!