Как автоматизировать преобразование фоновых изображений, заключённых в теге в HTML с помощью GULP в формат WebP и самого HTML?

Question

[Shamhaner]

Задача состоит в следующем:

Имеется HTML в котором стили прописаны инлайново, точнее фон указан с помощью свойства "background-image" с форматом картинки отличным от WebP. Как сделать так, чтобы GULP после обработки вставлял в HTML соответствующие атрибуты, картинки исходного формата файла и в формате WebP, а также чтобы это было упаковано в тот самый тег

Answer 1

[Steppp]

Кусок моей сборки

const webp = require("gulp-webp");

  gulp.task("webp", function () {
    return gulp.src("source/img/**/*.{jpg,jpeg,svg}")
      .pipe(webp({quality: 50}))
      .pipe(gulp.dest("app/img"));
  });

Comments

[Shamhaner]

Спасибо, за кусочек кода) Про конвертацию-то понятно.

Задача чуть в другом состоит, чтобы GULP автоматически прописывал строки в HTML, как в случае с плагином gulp-webp-html, что-то в этом роде:

// Input
<img src="/img/tmp/catalogImage.jpg">
 
// Output
<picture>
    <source srcset="/img/tmp/catalogImage.webp" type="image/webp">
    <img src="/img/tmp/catalogImage.jpg">
</picture>

Но для свойства background-image) в самом HTML

[Steppp]

Shamhaner, Ааа! Это сложно! Там надо плагин подключать, который определит поддержку webp! Но я видел что в css делают префиксы, допустим для сафари прописывают jpg, для хрома webp! Но не знаю как поддержка!
Я не стал мучатся, и переделал background-image на тег img )))

Answer 2

[Антон Шаманов]

как вариант можно сделать на сервере "переадресацию": если сервер не находит файл /assets/images/img.webp, то он передает имя файла скрипту webp.php который берет исходный файл /assets/images/img.(jpg|png) создает из него /assets/images/img.webp и отображает пользователю. подобным образом еще миниатюры часто формируют.

Comments

[Shamhaner]

К сожалению данный вариант не подходит, так как планируется посадка страниц на CMS Jekyll, данная проверка осуществляется на клиенте с помощью JS, то есть к body добавляется дополнительный класс WebP или в случае, если устройством не поддерживается данный формат, то создаётся класс no-WebP. Нужно, чтобы GULP формировал HTML с содержанием исходных картинок и картинок в формате WebP в теле style со свойством background-image.

[Антон Шаманов]

Shamhaner, ну так подключи gulp плагин

[Shamhaner]

Антон Шаманов, это какой?, если не секрет, я весь Гугл перерыл) Чувствую придётся создавать собственный плагин) Такие плагины есть для тега IMG в файле HTML или для файла CSS и свойства, background-image, но для HTML и инлайнозаписанного свойства background-image к сожалению нет) Нужны костыли, пока не нашёл адекватного решения. Ладно бы, что это нужно было для одного десятка страниц, можно и в ручную прописать, но планируется обработать более 1000 страниц данным методом.

[Антон Шаманов]

Shamhaner, ты это серьезно? я же ссылку дал..

[Антон Шаманов]

Антон Шаманов, если есть какие-то проблемы, то переадресуй напрямую на конвертер https://github.com/imagemin/cwebp-bin/tree/master/...

[Shamhaner]

Антон Шаманов, кусочек кода моей сборки)

imagemin = require('gulp-imagemin');
webp = require('gulp-webp');
webphtml = require('gulp-webp-html');
webpcss = require('gulp-webpcss');

Эти плагины прекрасно обрабатывают CSS, картинки, теги в HTML IMG, но они не способны обработать вот эту строчку кода:

<div class="example" style="background-image: url(img/example.jpg);"></div>

Вот в этом и заключается моя проблема, которую я пытаюсь решить

[Антон Шаманов]

Shamhaner,

gulp.task("webp", function () {
    return gulp.src("source/img/**/*.{jpg,jpeg,svg}")
      .pipe(webp({quality: 50}))
      .pipe(gulp.dest("app/img"));
  });

плагин перебирает файлы в папке, ему по барабану как ты вставляешь эти картинки

[Антон Шаманов]

еще раз повторю, если ты хочешь конвертить картинки на лету, то это делается через переадресацию: пример на apache/php:

# Turn on URL rewriting
RewriteEngine On
RewriteBase /
# Protect hidden files from being viewed
<Files .*>Require all denied</Files>
RewriteCond %{REQUEST_FILENAME} !-f
# Rewrite all other URLs to index.php/URL
RewriteRule ^(.+)\.webp$ generate_webp.php?file=$1 [PT,QSA,L]

и к слову вставлять webp нужно так

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg">
</picture>

[Shamhaner]

Антон Шаманов, посмотри, что ответил предыдущий комментатор, тот способ, который ты мне предлагаешь с настройками htaccess — мне совершенно не подходит, так же как и тот способ, что предложил предыдущий комментатор.

Попытаюсь объяснить:

Вариант первого комментатора не решает задачу, так как создание и генерация сайта происходит на локальной машине при помощи генератора статичных сайтов Jekyll. Указание свойств background-image в файле CSS, приведёт к тому, что будут сгенерированы множество таких файлов CSS с разными картинками в свойствах для каждой отдельной страницы сайта, что существенно повлияет на загрузку сайта клиентом, он каждый раз будет вынужден скачивать новый файл CSS при переходе между страницами сайта.

Твой вариант также не решает поставленную задачу, так как простой переадресацией не обойтись, а HTML переписывать для 1000 страниц в ручную с указанием различных атрибутов и тегов — такое себе занятие)

Почему я не могу использовать простые HTML-теги IMG вместо CSS-свойства BACKGROUND-IMAGE прописанного в HTML-теге STYLE. Я этого сделать не могу, так как интерфейс накладывающийся на фоновую картинку имеет несколько интерактивных слоёв, ссылки и кнопки. Мог бы конечно использовать IMG и прописать дополнительные строки кода каждой картинки в дизайне для создания шаблона для посадки на CMS, но в этом дизайне их на странице доходит до 50 штук, ты можешь сам себе представить сколько дополнительных килобайт прибавится к каждой странице)

[Антон Шаманов]

Shamhaner, хз чего ты там делаешь, у меня jekyll не генерирует css файлы для каждой страницы

[Shamhaner]

Антон Шаманов, так в этом и смысл, что шаблон страницы один, а страниц много, если указать в CSS background-image, то придётся генерировать этот CSS для каждой отдельной страницы с путями до нужной картинки, а не использовать один файл CSS для всех основных страниц сайта, поэтому пришлось записывать этот background-image инлайново в HTML, чтобы генерировался только HTML по шаблону с путями до этих картинок)

[Антон Шаманов]

Shamhaner, так не указывай относительные ссылки, хотя и в этом случае путь вычисляется относительно css файла, а не документа в котором он подключен

[Shamhaner]

Антон Шаманов, к сожалению в Jekyll так нельзя сделать, так как за счёт этих относительных путей как раз и происходит генерация сайта)

Для примера:

<img src="{{ page.linkadd }}pic/tutorials/site/OneMangaDay-site-comipo.png" alt="Website in Comipo" class="imgshad">

[Антон Шаманов]

Shamhaner, ты же говорил что в css файле фоновую картинку прописать не можешь,
по поводу по последнего примера, см https://jekyllrb.com/docs/step-by-step/07-assets/ и https://jekyllrb.com/docs/static-files/

[Shamhaner]

Антон Шаманов, я такого не говорил, что нельзя, а наоборот сказал, что можно), но всё это приведёт к появлению дополнительных файлов CSS для каждой страницы в случае использования background-image в CSS, что совсем не нужно. Те примеры, что я привёл выше, показывают примерную структуру которая необходима для натяжки шаблонов страниц на Jekyll. Моя вопрос был в другом, как автоматизировать написание HTML с помощью GULP под использование WebP в теге style со свойством background-image. Пути для посадки на Jekyll в шаблонах, по которым будет генерироваться сайт, для дальнейшей работы будут изменены вручную)

[Антон Шаманов]

Shamhaner, плагин jekyll-webp делает тоже самое что я описал выше о генерации на лету и обрабатывает любые ссылки хоть в тексте, хоть в теге style

[Shamhaner]

Антон Шаманов, что-то даже и не подумал об этом плагине, а копался в репозиториях npm и различных тематических ресурсах) надо будет посмотреть)

[Shamhaner]

Антон Шаманов, к сожалению он тоже не походит, так как он создан для тега IMG, а мне нужен background-image в инлайновом куске HTML) Чувствую придётся создавать собственный костыль) Логика примерно такая же, как при использовании lazy-load, но чтобы не грузится плейсхолдер и картинка следом, а был выбор между тем, что загружать при поддержке устройством формата WebP)

[Антон Шаманов]

Shamhaner, он не создан для какого-то конретного тега

[Shamhaner]

Антон Шаманов, нужно получить примерно такую структуру

<div style="background-image: url('/images/image.webp')" data-bg="/images/image.jpg" data-bg-webp="/images/image.webp"></div>

но чуть короче)