Меню

Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)

RSS
Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)
 
Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)

WebP это современный формат сжатия изображений, который позволяет, при правильных настройках и уровнях сжатий, уменьшить размер файлов изображений. Развивается при поддержке Google.
В этой заметке, расскажу как применить данный формат на сайте, под управлением Битрикс.
 
Кому интересно использовать webp, на macOS
Например, оптимизация сайта (разрабатываемого локально) до запуска
Инструкция по установке
http://macappstore.org/webp/
 
это всё очень круто. но ios остается в пролете
 
Цитата
Сергей Стефанович написал:
это всё очень круто. но ios остается в пролете
Можно попробовать webpjs подрубить. Но как по мне, шкурка выделки не стоит- больше запросов лишних, чем резону от экономии на картинках.
Пусть Яблоки смотрят на простые jpeg-и  :)
Главное Google Page Speed доволен, остальное суета сует)
 
вот такие ошибки выдало при выполнении скрипта http://prntscr.com/ngsijg
не подскажите, что за ошибки на 5 и 13 строчке?
 
Цитата
Максим Иванов пишет:
вот такие ошибки выдало при выполнении скрипта http://prntscr.com/ngsijg
не подскажите, что за ошибки на 5 и 13 строчке?
Проблему решил утилитой dos2unix  
 
Добрый день!
А как же быть с WebM ведь gif в этом случае не конвертятся
 
Можно использовать тег picture
я вот так намутил
https://gist.github.com/SeRGei93/2525f375acbf5ec8ec48d441611012a6#file-picture-bitrix-centos-7
 
Цитата
Максим Иванов написал:
Цитата
Максим Иванов пишет:
вот такие ошибки выдало при выполнении скрипта  http://prntscr.com/ngsijg  
не подскажите, что за ошибки на 5 и 13 строчке?
Проблему решил утилитой dos2unix  
У меня аналогичная проблема, но с помощью утилиты не решилась...
 
может кому будет полезно, использую облачный хостинг в Беларуси, и техподдержка вот как настроила выдачу webp:

Ввиду наличия связки apache + nginx, настроили отдачу изображений *.webp через конфигурационный файл .htaccess. Акцент делали на настройку под bitrix и папку upload.  Код ниже добавили в файл .htaccess в корне битрикс сайта:
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
    RewriteCond %{DOCUMENT_ROOT}/%1\.webp -f
    RewriteRule .* %1\.webp [L,T=image/webp]
</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>
 
Михаил подскажите, а как бороться с уже не актуальными файлами .webp - в нашем интернет магазине очень часто меняется ассортимент, удаляются товары. .Jpeg файлы удаляются средствами битрикс, а вот копии в формате WebP созданные скриптом webpconverter.sh остаются. Как автоматизировать их удаление например запуском раз в сутки всех, либо только не актуальных, файлов webp?
 
Цитата
i92hqvpz2j08@mail.ru написал:
Михаил подскажите, а как бороться с уже не актуальными файлами .webp - в нашем интернет магазине очень часто меняется ассортимент, удаляются товары. .Jpeg файлы удаляются средствами битрикс, а вот копии в формате WebP созданные скриптом webpconverter.sh остаются. Как автоматизировать их удаление например запуском раз в сутки всех, либо только не актуальных, файлов webp?
Можно, просто проходиться рекурсивно по всем под директориям upload у удалять файлы с расширение .webp
Почитайте про find в unix, сходу не помню точный синтаксис

Примерно (сразу не пробуйте, могу ошибаться)
Код
find /home/ПУТЬ_ДО_UPLOAD -name '*.webp' -type f -delete
 
Подскажите, сделал всё как у Вас в инструкции, сделал файл webpconverter.sh, вставил туда код, сделал файл исполнительным.

Но при запуске ошибка No such file or directory

Если сделать файл сделать не исполнительным то ошибка Permission denied
 
большое спасибо за статьи, слов нет выручили
начал со статьи по ускорению и параллельно подключил наконец page speed
если Вы не против, поделюсь моими находками по теме.

использовал аналогичный скрипт только с указанием пути в параметре:
Скрытый текст

команда в консоли приобретает в моем случае вид:
Код
./webp-convert.sh /home/www/shared/upload
по ошибкам - это ругань на перевод каретки, три способа по устранению:

Скрытый текст

И напоследок, если вы накосячили и нужно удалить все файлы по расширению:
для CentOS
Код
find . -type f -name '*.webp' -exec rm {} +
не знаю можно ли сослаться на материал по которому искал
поэтому разобью ссылку - Вы удалите если чтобы было правильно:
Скрытый текст

надеюсь в таком виде ссылки не посчитает за сквозняки
Изменено: Артем Молодов - 02.05.2020 12:52:23
 
Благодарю за полезную и необходимую информацию.


Вопрос
Цитата
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой

В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте?
 
Цитата
Pechnikmsk написал:
Благодарю за полезную и необходимую информацию.


Вопрос
Цитата
Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой

В моем случае на сервере под VMBitrix - работает два сайта, два сайта расположены в директории ext_www. Как сконфигурировать хост для отдачи WebP - для нескольких сайтов, работающих на одном хосте?
Просто пропишите настройки для двух сайтов, у каждого из них свой nginx- хост
 
Сразу вижу  кучу мест где можно было сделать проще  и то чего нет.
1.  у вас в nginx  в локейшене нет /upload а картинки не только там  лежат, а у вас обжимаются они только в этом месте, притом самые основные лежат то в ресайз кеш, именно они всегда требуют переобжатия.
2. нет проверки на наличие этой картинки, то есть по идее вы должны вначале проверить нет ли там 404 а потом отдавать картинку, это опять же к nginx а нужно это по пункту 4.
3. оптимизировать код

Код
find /home/bitrix/ext_www/site.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(jpg\|jpeg\|JPG\|JPEG\)" 
и папки можно добавлять убавлять, и с расширением куда как проще,
4. регистронезависимость, мало того что jpeg  и jgp так и может быть Jpeg JGEG и тд.
так что вообще можно сделать вот так
Код
find  -type f -regex ".*\.\(j\|J\)\(p\|P\)\(e\|E\|\)\(g\|G\)"
да менее читабельно зато регистронезависимо ;)

Остальная часть тоже немного монструозна можно было бы хорошо оптимизировать.
И вот еще может быть полезно

Код
find /home/bitrix/ext_www/siteru.ru/ -regex ".*\.\(jpg\|jpeg\|gif\|png\|JPG\|JPEG\|GIF\|PNG\)" -print0 | xargs -0 cp --parents --target-
directory ./tmp/backup
скопирует все картинки сохраняя стуруктур каталогов, можно будет просто заливать поверх если  чо-то пойдет не так, ну и модернизировать для удаления webp картинок, поскольку естественно они могут быть и  в движке сайта и тд и тп, не только вами созданы.
 
нет регистрозависимости в Jpeg PNG
эти файлы не будут переводиться в webp
 
Михаил, а если на сервере Убунту и ХестияЦП, куда добавлять настройки для nginx?
 
Михаил, скрипт выдает ошибки:
webpconverter.sh: line 2: $'\r': command not found
find: paths must precede expression:
Usage: find [-H] [-L] [-P] [-Olevel] [-D help|tree|search|stat|rates|opt|exec] [path...] [expression]
webpconverter.sh: line 5: -exec: command not found
webpconverter.sh: line 10: $'\r': command not found
find: paths must precede expression:
Usage: find [-H] [-L] [-P] [-Olevel] [-D help|tree|search|stat|rates|opt|exec] [path...] [expression]
webpconverter.sh: line 13: -exec: command not found

Если есть возможность актуализируйте статью под реалии 2024 года. Спасибо!
 
Там в целом все актуально, точнее рабочее. У вас ошибка из-за вставки (как я понял) кода в каком-то редакторе, он лишний символ зацепил.
Попробуйте в vim или nano прямо на сервере.

А так да, выписал себе в планы, статья рабочая на старая, актуализирую в ближайшие сроки.
Читают тему
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
Загрузить файлы
 
Поблагодарить и поддержать:
Или подписаться на boosty канал: Видео на Bst
Сайт в режиме тех обслуживания

Сообщения форума и комментарии не сохраняются

Возвращайтесь после 12-го января

Блог-note: заметки разработчика

Старые шаблоны битрикс для простой верстки

Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии и выше), достаточно технологич...

AJAX корзина с отправкой количества из раздела каталога

Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При этом, у пользователя должна б...

Memcached на сайте под управлением битрикс, при использовании Веб Окружения Битрикс

Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования кеша на файлах. Можно кеширова...

Фильтрация разделов каталога с помощью умного фильтра

Задача: В каталоге выводится умный фильтр, нужно сделать так чтобы он применялся не только к товарам но и к компоненту &...

XML в формате Commerce ML-2, города России и Мира, для выгрузки в инфоблок Битрикс

Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и мира в виде элементов инфобло...

Fancybox в стандартном шаблоне детальной карточки товара, 1С-Битрикс, вместо всплывающего окна и лупы.

Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карточки (catalog.element)...

Отфильтровать элементы в Битрикс по свойству привязка к разделам

При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо обычной навигации каталогу со...

Бонус на внутренний счет пользователя по информации из 1С

Задача: 1С-Предприятие каждый день выгружает HL справочник на сайт с количеством бонусов контрагента в виде "XML-ID...

Увидеть файл заказов который передаст Битрикс в 1С

Для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей, нужно увидеть xml файл с зака...