Изображения WEBP для Shop-Script

Теперь поддерживается работа с iPhone на iOS 14 и планируется поддержка Safari в MacOS и iPad.

Проверьте страницы вашего сайта на сервисе Google Pagespeed. Если увидите замечание: Используйте современные форматы изображений, то плагин поможет решить его:

На данный момент плагин отлично работает и в облаке, и на сторонних хостингах и VDS/VPS. При работе никакие ваши файлы изображений не изменяются, всё остается на месте. При желании всегда можно удалить все созданные плагином эскизы нажатием на соответствующую кнопку.

Почти четыре из пяти мобильных пользователей используют браузер, способный отображать изображения в формате webp. Но по-прежнему на большинстве сайтов отдаются изображения jpeg, которые обычно в два раза больше размером при том же качестве. Этот плагин создан, чтобы решить данную задачу, без особых усилий администраторы магазинов настроят Shop-Script отдавать автоматически создаваемые изображения товаров и другие в формате webp для браузеров, которые его поддерживают, в то же время по-прежнему предоставлять обычные jpeg и png для остальных браузеров.

Плагин изменяет HTML-код страницы, подменяя URL изображений на эскиз в webp для тех браузеров, которые поддерживают формат. Эскиз будет создан автоматически на лету при запросе, используя тот же механизм, что и Shop-Script. Работает как с изображениями товаров, так и с остальными: иконки, логотипы, баннеры.

Преимущества:

• Более быстрая загрузка изображений для браузеров, поддерживающих webp. Конвертированные изображения обычно в два раза меньше оригиналов в случае jpeg, сохраняя при этом прежнее качество. Стоит понимать, что в большинстве случаев именно изображения ответственны за общее время ожидания страницы, посетители заметят разницу
• Повышаются рейтинги в поиске Google, использование современных форматов для изображений является частью требования PageSpeed и Lighthouse и учитывается при индексировании.
• Меньший объем трафика, очень заметно, например, при медленном или дорогом соединении с интернетом у клиента.
• На данный момент около 90% мобильных и настольных клиентов уже поддерживают webp: https://caniuse.com/#feat=webp . Теперь Firefox, Edge и Safari тоже присоединились к поддержке.

Использование:

Сразу после установки плагин автоматически применяет доступные способы конвертации, отметьте только Включить плагин и сохраните настройки. Этого будет достаточно, больше никаких изменений не потребуется. Зайдите с помощью Firefox или Chrome на страницы сайта, чтобы убедиться, что изображения теперь с расширением .webp

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

Конвертированные эскизы хранятся на сервере рядом с обычными, стоит понимать, что занятое установкой место на хостинге тоже будет расти.

Плагин меняет именно HTML-код страниц, но некоторые изображения могут загружаться, например, скриптами или CSS, такие файлы будут пропущены.

На любом современном хостинге и в облаке не будет проблем, найдется подходящее локальное или удаленное решение автоматически.

Режим rewrite

Если у вас есть задача сохранить те же имена файлов изображений и ссылки, но только сменить формат, то теперь есть такая возможность в режиме rewrite. В нем по cron дублируются все изображения установки в отдельную папку плагина в webp формате, а затем с помощью конфигурации веб-сервера мы отдаем webp изображения браузеры, которые их поддерживают. Ниже представлены варианты конфигураций при работе в режиме Nginx + FastCGI и при использовании Apache и .htaccess.

Для применения на вашем сайте стоит проконсультироваться с системным администратором или обратиться в поддержку хостинга - может быть много вариантов и деталей, которые нужно будет указать в вашем конкретном случае в конфигурации. Поддержка разработчиком плагина в данном случае с настройкой правильного rewrite будет только в крайне ограниченном размере. Если появляются трудности, рекомендуем использовать любой другой режим.

Не забудьте добавить задание cron, рекомендуется на позднюю ночь, чтобы нагрузка не мешала. Каждый раз будет запускаться поиск новых неконвертированных изображений и работа будет только с ними. Такое задание cron сработает, только если включены способы конвертации помимо wpc.

Nginx + FastCGI

Если ваша конфигурация совпадает со стандартной из руководства, то достаточно будет только добавить первый блок в секцию http и второй перед всеми location.

nginx.conf: (строки 1-7 и 16-37)

Apache

Такой вариант сработает в случае, если вы используете только apache, без Nginx. В данном случае понадобится добавить блок в конце корневого .htaccess и блоки в начале в папках эскизов.

.htaccess в корне: (строки 29-31)

wa-data/public/shop/products/.htaccess: (строки 1-3)

wa-data/public/shop/promos/.htaccess: (строки 1-3)