Есть ли плагин для галпа для добавления тега picture?

Question

[Kipsi]

Подскажите есть ли плагин для галпа что бы при сборке проекта там где у меня просто тег img он оборачивал его в picture и добавлял бы еще туда формат webp для картинок которые в img?

Comments

[Ankhena]

gulp-wepb-html
либо gulp-replace для замены

Answer 1

[Максим Морев]

А лучше бы сразу плагин, который с единственным методом "сделать хорошо" :)
Плагинов таких нет, а если и найдётся, то не советую. Picture - это же не изображение, не shadow-dom магия, это обёртка над изображением, физическая обёртка, реальная. По сути вы хотите обернуть изображение в .
И его, и картинку внутри неё стилизовать надо по-разному. А в случае автоматического оборачивания откуда вы узнаете, что и как стилизовать? А как будете помечать изображения, чтобы не оборачивалось, если не надо? А вы уверены, что всегда надо?

Есть плагины, которые сделают вам дубли ваших картинок в webp и положат рядом или в отдельную папочку.
А picture - пишите сами.
Если лень набирать - используйте сниппеты, если используйте компонентный подход - заведите какой-нибудь компонент `base-picture`, в который передавайте URL основного изображения, и проп по типу `webp`, заданный в `true` по умолчанию, что в контексте логики компонента будет означать, что webp-версию нужно дописать автоматически путём замены расширения в переданном основном изображении (ну или через любую логику, которая вам нужна). Только так.

Comments

[Ankhena]

Какая разница каким способом добавлять webp в picture, ручками или автоматом (и каким именно "автоматом")? И сами же пишете про компоненты. Это никак не влияет на конечную разметку и стили. Да и какие отдельные стили нужны для webp?

[Максим Морев]

Ankhena, как лишний source в picture добавить - разницы нет почти никакой (почти), но автор не об этом спрашивает. Автор хочет img в picture превратить. Один тег в другой.

Это не всегда нужно, не всегда пройдёт бесследно (можно кучу кейсов придумать, от легаси и стилизации по типу "> img" до глобально заданных для picture стилей. Да-да, у вас в проектах такого, конечно, никогда не бывает), и даже когда нужно - иногда требуется кастомизация (класс добавить обёртке, атрибут, ещё чего-нибудь, а тут вообще не трогай), и чего делать будем? img.parentNode - ой. В сборке что-то сломалось и оно не завелось - ой. Ещё трудозатраты.

Но это даже неважно всё, в 99% случаев никаких проблем не возникнет. Хотя популярность решения
gulp-wepb-html и его удалённая репа как бы намекают.

Основная проблема в том, что разработчик теряет контроль над ситуацией и связность увеличивается.
Вот пришёл я на проект, я пишу img и ожидаю получить img, а оно становится picture. Wtf? Ах, это автор сборки решил, что так лучше...
И получаем штуку, которая совершенно очевидна для автора поделки и совершенно неочевидна для всех остальных. А сколько там ещё таких приколов? Я буду бояться буквы писать, потому что чтобы понять, как оно всё трансформируется, мне надо перелопатить всю сборку и прочие middleware. А я хочу этого, мне за это платят?

Я о чём глобально. Хочешь picture, но не хочешь писать лишние буквы - сделай это очевидным образом.

<!-- Пример для Vue, но аналогичным образом может быть где угодно, хоть в pug через миксины -->
<base-picture :src="/path/to/image.jpg" :webp="true" />

Пишешь picture - получаешь picture.
Любому разработчику на проекте очевидно, что это такое и как с этим работать. И никакой магии. И это хорошо.

Ну понятно, что всё это словоблудие применимо к разработке чего-то большего, чем обычный лендинг, и для большей команды, чем один человек. Пилишь лендос в одно лицо - да хоть на Tailwind пиши, кому это интересно. Допустим, тут именно такой случай, но я всё равно читаю вопрос как "А как отстрелить себе ногу?" и отвечаю, что стрелять себе в ногу - плохая идея. :)

[Ankhena]

Максим Морев, вы не о том спорите. И все ваши пассажи верные.
Только и через галп можно очевидным образом помечать img, которые нужно обернуть в пикчи. И несомненно именно так и нужно поступать. (Не в смысле галпом, а в смысле очевидности происходящего). А уж выбранный инструмент зависит от целей проекта и что там еще уже используется. Конечно, если там уже есть вью или твиг или еще что-нибудь приятное, то делать это галпом странно.

Популярность плагина, понятно, что низкая. Потому что обычно пикча людям нужна не только ради webp. А вот replace сделает как душе угодно.

[Максим Морев]

Ankhena, "если у вас есть проблема и вы решили использовать регулярные выражения, то теперь у вас две проблемы".
Моя идея в том, что "разметить очевидным образом" - это физически завернуть, вроде:

[picture-webp]
<img src="..." alt="" />
[/picture-webp]

(я уже опущу кейсы вроде того, что в пикче не всегда ровно одна картинка, могут быть разные размеры, условия и так далее).
Вот это - очевидно. И если уж решили раздувать исходник таким образом (я против, но это хотя бы выглядит предсказуемо), то лучше и выбрать наиболее подходящее решение, которое к тому же покроет не только этот кейс, но и многие другие. Можно ведь replace'ами вообще почти любой функционал современных шаблонизаторов прикрутить к своим костылям, кому оно надо только.

И нет,

<img src="..." alt="" data-transform-to-picture-webp />

- это неочевидно, да и поглядел бы я на регулярку, которая будет заменять все эти вхождения и работать корректно в edge cases (не нравится мне русское звучание), учитывать человеческий фактор (когда например взяли и скопипастили как есть в существующий, руками созданный picture, опечатались и всё в этом духе).
Я к тому, что вопрос "когда эта штука сломается" - просто вопрос времени. И зачем её делать тогда.
Можно ли микроскопом гвозди забивать - ну, наверное, можно. Стал бы я советовать так делать - точно нет.