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

Question

[skuvaWeb]

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

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

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

Возможно ли это сделать средствами webpack, возможно придется писать свой плагин? Как автоматизировать работу с картинками согласно текущим best practice?

Comments

[Kovalsky]

Мне кажется проще всего будет создать компонент типа vue-picture который будет принимать адрес и внутри себя производить все нужные процессы с элементами. А самой конвертацией займётся либо шарп, либо модуль для гранта/ролапа

[Алекс Глебов]

Проще настроить сервак чтобы конвертил и подменял картинки на avif/webp если браузер их поддерживает. А в коде оставить img

[skuvaWeb]

Kovalsky, Я тоже так думал, но webpack не может так. Как пример

export default {
  props: {
    imgPath: {
      type: String,
      required: true,
    },
  },

  computed() {
    webpPath() {
      return require(this.imgPath + '.jpg') // Будет ошибка при попытке require
    },

    jpgPath() {
      return require(this.imgPath + '.webp') // Будет ошибка при попытке require
    }
  },
}

При том что картинки по такому пути точно существуют

Это связано с ограничениями require насколько я понял. Плюс я не совсем понимаю в какой момент при таком подходе генерировать сам webp формат. Ведь исходно есть только jpg, из которого генерится webp. То есть нужно сначала сгенерировать картинку (какой-то watcher на изменение файлов в папке картинок?), а потом попытаться получить её путь через require

[skuvaWeb]

Алекс Глебов, Чтобы дать браузеру выбор, нужно чтобы картинки были внутри элемента picture

Для хрома - afiv
Для ios > 14 - wepb
Для остального fallback в виде jpg

[Kovalsky]

skuvaWeb, "Это связано с ограничениями require насколько я понял", "попытаться получить её путь через require" - ну да, require вообще не для этого нужен, он там ни к чему. Просто укажите путь до директории куда вебпак будет складывать сконвертированные картинки и всё,

"в какой момент при таком подходе генерировать сам webp формат" - абсолютно в любой, ибо компонент будет только генерировать пути, сами файлы сделает вебпак

[Алекс Глебов]

skuvaWeb, браузер шлет заголовок Accept при запросе, там есть awif и webp. На основе этого можно выдавать формат картинки.

Никто не заморачивается с picture, достаточно посмотреть крупные сайты. да и webp редкость.

[skuvaWeb]

Kovalsky, возможно я чего-то не понимаю, но:

Когда я пишу <img src="@assets/images/logo.png" /> это равносильно <img :src="require('@assets/images/logo.png')" /> в рамках Vue шаблона

То есть вебпак видит что я запрашиваю картинку, обрабатывает её file-loader'ом, перемещает в нужную папку и подставляет новый сгенерированный путь. Require как раз возвращает этот новый путь.

ну да, require вообще не для этого нужен, он там ни к чему

а для чего от тогда вообще? Разве не для подключения модулей? В рамках вебпака - все модуль, и картинка тоже.

Теперь представьте, у меня есть исходная картинка, и компонент

Реализация

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
}
</script>

<template>
  <picture>
    <source :srcset="srcWebp" type="image/webp" />
    <source :srcset="srcJpg" type="image/jpg" />
    <img decoding="async" loading="lazy" />
  </picture>
</template>

Так вот, как мне получить srcWebp & srcJpg ? Чтобы получить путь, нужно чтобы вебпак обработал картинку loaderом, но webp ещё не существует, она не сгенерирована. По ощущениям нужен какой-то callback у file-loader'a, чтобы создать нужные картинки, а потом подставить пути

[Kovalsky]

skuvaWeb, а, ну да, с этой точки зрения всё правильно. Я просто подумал что индивидуальная обработка файлов не нужна. Но я сильно сомневаюсь что вебпак вам даст такое реализовать. То есть ничего невозможного я тут не вижу, но мне кажется он так не умеет. По крайней мере я вот читаю интернеты и не вижу нигде инфы о таком. Именно поэтому я предложил иметь фиксированный адрес папки с обработанными файлами и оттуда просто доставать их из компонента:

computed() {
    webpPath() {
      return 'directory-with-jpgs/' + this.imgPath + '.jpg'
    },

    jpgPath() {
      return 'directory-with-webps/' + this.imgPath + '.webp'
    }
  }

По теме:

https://webpack.js.org/guides/asset-management/
https://stackoverflow.com/questions/42118296/dynam...
https://stackoverflow.com/questions/42797313/webpa...
https://stackoverflow.com/questions/38042569/webpa...

[skuvaWeb]

Алекс Глебов, рекомендации lighthouse. То есть на данный момент задача требует слишком много усилий, и проще просто забить на это?

[Денис Юрьев]

Алекс Глебов, мне чисто любопытно, а вы точно пытались в реалтайме конвертить в avif?)

[skuvaWeb]

Kovalsky, чтобы сгенерировать webp, нужно обработать картинку (модуль)
Если я не обращусь к картинке через require, то я не смогу её обработать ( и сгенерировать webp )

[Kovalsky]

skuvaWeb, вы по каким-то религиозным причинам игнорируете то что я пишу? Я прекрасно понял что вы хотите динамический require, а поскольку я не нашел инфы что он поддерживается (кроме require.context), то я вам написал уже третий раз: "Именно поэтому я предложил иметь фиксированный адрес папки с обработанными файлами и оттуда просто доставать их из компонента". При сборке приложения конвертируете все нужные изображения в нужные форматы, кладёте их по папкам, в компоненте хардкодите адреса папок. Это в любом случае рабочее решение, так что вопрос только в том насколько оно уместно в вашем проекте

И еще раз: "чтобы сгенерировать webp, нужно обработать картинку" - да, например массово при сборке приложения, без require, а напрямую из вебпака

Апдейт: кажется нашел как раз ваш случай

[skuvaWeb]

Kovalsky, в целом сработать может, но это костыль сильный
1) Если я захочу добавить изображениям хэш например, то внутри компонента полное имя картинки я не получу
2) Мелочь, но все же. В таком случае придется написать скрипт который будет require.context подключать все картинки из папки assets
3) Хардкод путей звучит не очень

В любом случае спасибо большое что уделили время, я подумаю над тем что вы предложили

[Kovalsky]

skuvaWeb, согласен, ограничений и минусов достаточно. Попробуйте поискать по похожим решениям, там точно должно быть что-то похожее

[Алекс Глебов]

Денис Юрьев, загенерьте заранее

[Kovalsky]

skuvaWeb, если доведёте решение до конца, то скиньте пожалуйста сюда в ответ. Это может быть интересно

Answer 1

[profesor08]

Не надо мучать ни себя, ни других. Ты упоришься писать в html media запросы для загрузки этих картинок для разных экранов, для разных браузеров, для разных систем, под разные типы картинок. Вместо того, чтоб поддерживать одну строчку кода и одну картинку, будешь поддерживать в 10 раз больше. А профит от всего этого будет никчемный. Используй картинку x2 и спи спокойно.

Comments

[skuvaWeb]

В вопросе есть ссылка на пример кода, там это уже реализовано. Как и что грузить будет решать браузер, моя задача дать ему выбор генерируя picture. Вопрос в том как это реализовать с помощью вебпак (в примере это генератор статических сайтов)

[profesor08]

skuvaWeb, мде, ctrl+c, ctrl+v не вникая...

Answer 2

[Daniil Vasilyev]

Вот, что нашёл по конвертации картинок.
https://stackoverflow.com/questions/58827843/webpa...
А вот замену тега надо ручками, например, в WebStorm можно через Ctrl+Shift+R (замена во всех файлах по пути)

Comments

[skuvaWeb]

Замена должна быть на этапе сборки проекта. То есть в коде я пишу img, а в итоговом файле html должно быть
<picture></picture>

Суть: упростить и автоматизировать процесс работы с картинками следуя best practice

[Daniil Vasilyev]

skuvaWeb, можете попробовать сделать глобальный компонент с именем img
https://vuejs.org/v2/guide/components-registration...
Но, скорее всего, это не получиться и тогда форкайте Vue и делайте там, чтоб при компиляции заменялось на picture, но к чему такой гемор? webp - это не best practice, это рекомендация гугля для Chrome, но не более. Lighthouse за использование jpg/png не ругает.

[Kovalsky]

skuvaWeb, не надо ничего заменять, просто используйте компоненты, они именно для этого существуют. Если нужно модифицировать уже существующие проекты, то просто в текстовом редакторе или IDE меняете все нужные тэги на тэг вашего компонента. Глобальная замена img > picture это очень плохая идея, поверьте) С компонентами всё будет гораздо проще