Велико лишь то, что долговечно; долговечно лишь то, что справедливо (Д. Феррари).

Конфигурация для доставки WebP

3 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
12 декабря 2018
Конфигурация для доставки WebP
WebP – это альтернативный формат изображений, разработанный Google. Изображения WebP значительно меньше, чем форматы файлов JPG и PNG – обычно достижимы сокращения размера до 80%.

В этой статье мы сосредоточимся на том, как вы можете использовать формат изображений webp с Optimus.

Бесплатная версия Optimus не поддерживает конвертацию в WebP, однако обе версии HQ и HQ Pro. Существует два способа включить доставку изображений WebP, следующие объяснят оба способа.

WebP в WordPress

Рекомендуемый метод доставки изображений WebP в WordPress – использование Optimus в сочетании с плагином Cache Enabler. В Cache Enabler у вас есть возможность «Создать дополнительную кэшированную версию для поддержки изображений WebP». Кэш-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. Для установки вам нужно будет сделать следующее:

  1. Запустите WebP на вашем хостинге
  2. Установите плагин в диспетчере расширений
  3. Включите плагин в диспетчере плагинов

WebP в Magento

Бесплатное расширение WebP Magento от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательского агента (браузер Chrome) и дополнительного обнаружения JavaScript. Если обнаружен WebP, расширение проанализирует HTML-вывод корневого блока Magento, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены на изображения WebP. Для установки вам нужно будет сделать следующее:

  1. Настройте двоичные файлы WebP на вашем сервере
  2. Установите модуль Magento

WebP на других платформах

В качестве альтернативы, если вы не используете плагин Cache Enabler, вам нужно добавить следующий фрагмент конфигурации в файл конфигурации .htaccess или nginx. Этот метод НЕ работает с CDN. Этот фрагмент разбит на следующие части:

  • RewriteEngine On просто активирует и перепишет двигатель.
  • Следующая строка – это первое условие, которое проверяет, сделан ли запрос с HTTP-заголовком, который включает image/webp. Это определит, поддерживает ли браузер 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;
}

 

ПРИМЕЧАНИЕ
Эти примеры оптимизированы для WordPress. Вам необходимо соответствующим образом скорректировать путь в разных установках.
Оба метода настройки Apache и Nginx выше не рекомендуются, так как они не будут работать ни с CDN, ни с другими обратными прокси.

После добавления фрагмента, файлы конфигурации PNG и JPEG теперь будут перезаписываться как WebP. Однако само расширение файла не меняется. Файл PNG по-прежнему будет отображаться в формате .png, а файл JPEG будет отображаться как .jpeg в URL-адресе изображения. Чтобы проверить, что ваше изображение в формате WebP, вы можете перейти к URL-адресу изображения, открыть Инструменты разработчика Chrome и перейти на вкладку Сеть. Нажатие на файл изображения откроет заголовки ответа для этого файла, которые показывают, что Content-Type – это image/webp.

Формат Webp

Используйте этот метод, чтобы проверить, правильно ли вы настроили установку Optimus для доставки изображений Webp. Использование этой функции не только уменьшит размер вашего изображения, но также сократит время загрузки страницы, и поможет улучшить SEO.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 22

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

пятнадцать + четырнадцать =

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close