WebP – это альтернативный формат изображений, разработанный Google. Изображения WebP значительно меньше, чем форматы файлов JPG и PNG – обычно достижимы сокращения размера до 80%.
В этой статье мы сосредоточимся на том, как вы можете использовать формат изображений webp с Optimus.
Бесплатная версия Optimus не поддерживает конвертацию в WebP, однако обе версии HQ и HQ Pro. Существует два способа включить доставку изображений WebP, следующие объяснят оба способа.
WebP в WordPress
Рекомендуемый метод доставки изображений WebP в WordPress – использование Optimus в сочетании с плагином Cache Enabler. В Cache Enabler у вас есть возможность «Создать дополнительную кэшированную версию для поддержки изображений WebP».
Как только опция выбрана, Cache Enabler будет анализировать изображения jpeg и png в каталоге wp-content/uploads . Если существует эквивалентное изображение .webp (созданное Optimus), оно будет включено в статический файл HTML с кэшированием WebP и будет доставлено с расширением .webp.
Тип MIME
Если у вас возникли проблемы с отображением WebP, убедитесь, что на вашем сервере включен тип MIME, image/webp. На Apache вы можете добавить следующий код в ваш файл .htaccess.
AddType image/webp .webp
Если вы используете Nginx, вы можете добавить следующий код в свой файл mime.types.
image/webp webp;
WebP в Joomla
Бесплатное расширение WebP Joomla от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательским агентом (чтобы браузеры Chrome сразу же сопоставлялись) и дополнительного обнаружения JavaScript (так что другие браузеры WebP также совпадают). Если обнаружен WebP, расширение проанализирует вывод HTML, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены изображениями WebP. Для установки вам нужно будет сделать следующее:
WebP в Magento
Бесплатное расширение WebP Magento от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательского агента (браузер Chrome) и дополнительного обнаружения JavaScript. Если обнаружен WebP, расширение проанализирует HTML-вывод корневого блока Magento, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены на изображения WebP. Для установки вам нужно будет сделать следующее:
- Настройте двоичные файлы WebP на вашем сервере
- Установите модуль Magento
WebP на других платформах
В качестве альтернативы, если вы не используете плагин Cache Enabler, вам нужно добавить следующий фрагмент конфигурации в файл конфигурации .htaccess или nginx. Этот метод НЕ работает с CDN. Этот фрагмент разбит на следующие части:
- RewriteEngine On просто активирует и перепишет двигатель.
- Следующая строка – это первое условие, которое проверяет, сделан ли запрос с HTTP-заголовком, который включает image/webp. Это определит, поддерживает ли браузер WebP.
- Следующая строка – это второе условие, которое проверяет, присутствует ли файл WebP на локальном сервере.
- Если оба эти условия выполнены, сниппет отправляется и заменяет содержимое .jpeg и .png на .webp.
Конфигурация WebP на Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
Конфигурация WebP на Nginx
# блок конфигурации http
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# блок конфигурации сервера
location ~* ^(/wp-content/.+)\.(png|jpg)$ {
add_header Vary Accept;
try_files $1$webp_ext $uri =404;
}
После добавления фрагмента, файлы конфигурации PNG и JPEG теперь будут перезаписываться как WebP. Однако само расширение файла не меняется. Файл PNG по-прежнему будет отображаться в формате .png, а файл JPEG будет отображаться как .jpeg в URL-адресе изображения. Чтобы проверить, что ваше изображение в формате WebP, вы можете перейти к URL-адресу изображения, открыть Инструменты разработчика Chrome и перейти на вкладку Сеть. Нажатие на файл изображения откроет заголовки ответа для этого файла, которые показывают, что Content-Type – это image/webp.
Используйте этот метод, чтобы проверить, правильно ли вы настроили установку Optimus для доставки изображений Webp. Использование этой функции не только уменьшит размер вашего изображения, но также сократит время загрузки страницы, и поможет улучшить SEO.