Есть ли возможность во Vue.js конвертировать изображения в webp сохраняя исходную картинку для кроссбраузерности?

Question

[vladimirir]

Есть задача на сайте, фронт которого написан на Vue.js, при билде конвертировать картинки из jpeg и png в webp (картинки, которые статично хранятся в assests). При этом нужно, чтобы сами картинки изначальных форматов оставались для отображения в IE. Пишут, что есть webp-loader у nuxt и nuxt-images, но не понятно, как поставить nuxt поверх Vue только для целей конвертации картинок.
Буду признателен, если кто-то поделится идеей, как можно реализовать данную задачу.

Comments

[Антон Антон]

При чем тут vue? вопрос скорее к тому, чем оно всё собирается - webpack, vite

[vladimirir]

Антон Антон, да, вроде, gulp-ом

[Антон Антон]

vladimirir, первая ссылка в поиске: https://www.npmjs.com/package/gulp-webp

[vladimirir]

Антон Антон, да уже видел и уже выяснил, что всё-таки не gulp у нас, и не webpack, а чем собирается, хз

[FKV]

vladimirir, ну так посмотрите package.json раздел scripts

[vladimirir]

FKV, там только vue-cli

[FKV]

vue-cli под капотом использует webpack https://cli.vuejs.org/guide/webpack.html. Так что смотрите гайды по webpack.
Тут может найдете что-то полезное.
Sharp как вариант https://webpack.js.org/plugins/image-minimizer-web...

[vladimirir]

FKV, спасибо)

Answer 1

[Александр]

Либо перекинуть на сборщик, либо на какой-нить image cdn если нужно трансформить в рантайме

Answer 2

[Альберт Ефремов]

Конвертация картинок это задача не для вью, а для сборщика проекта. Скорее всего есть какие то плагины, лоадеры для вебпак или для других сборщиков, в зависимости, что используется на проекте.

А на вью создается компонент для отрисовки картинок при нужном условии, например если ie берем такой формат или урл, в противном случае другой.