@skuvaWeb

Webpack: как автоматически трансформировать img -> picture?

В проекте используется vue-cli. Я пытаюсь автоматизировать работу с картинками согласно best practice

Есть пример кода от гугла в репозитории eleventy-high-performance-blog

Задача сводится к тому чтобы на этапе компиляции шаблона vue, заменить тег img на picture, конвертируя картинку в webp & avif, и уменьшая размеры для мобилок.

Возможно ли это сделать средствами webpack, возможно придется писать свой плагин? Как автоматизировать работу с картинками согласно текущим best practice?
  • Вопрос задан
  • 353 просмотра
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08
Не надо мучать ни себя, ни других. Ты упоришься писать в html media запросы для загрузки этих картинок для разных экранов, для разных браузеров, для разных систем, под разные типы картинок. Вместо того, чтоб поддерживать одну строчку кода и одну картинку, будешь поддерживать в 10 раз больше. А профит от всего этого будет никчемный. Используй картинку x2 и спи спокойно.
Ответ написан
@hello_my_name_is_dany
Backend Developer (Node.js, PHP, C#)
Вот, что нашёл по конвертации картинок.
https://stackoverflow.com/questions/58827843/webpa...
А вот замену тега надо ручками, например, в WebStorm можно через Ctrl+Shift+R (замена во всех файлах по пути)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы