ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE)
WebP — это альтернативный формат изображений, разработанный Google. Изображения WebP значительно меньше, чем форматы файлов JPG и PNG — обычно достижимы сокращения размера до 80%.
В этой статье мы сосредоточимся на том, как вы можете использовать формат изображений webp с Optimus.
Бесплатная версия Optimus не поддерживает конвертацию в WebP, однако обе версии HQ и HQ Pro. Существует два способа включить доставку изображений WebP, следующие объяснят оба способа.
Рекомендуемый метод доставки изображений WebP в WordPress — использование Optimus в сочетании с плагином Cache Enabler. В Cache Enabler у вас есть возможность «Создать дополнительную кэшированную версию для поддержки изображений WebP».
Как только опция выбрана, Cache Enabler будет анализировать изображения jpeg и png в каталоге wp-content/uploads . Если существует эквивалентное изображение .webp (созданное Optimus), оно будет включено в статический файл HTML с кэшированием WebP и будет доставлено с расширением .webp.
Если у вас возникли проблемы с отображением WebP, убедитесь, что на вашем сервере включен тип MIME, image/webp. На Apache вы можете добавить следующий код в ваш файл .htaccess.
AddType image/webp .webp
Если вы используете Nginx, вы можете добавить следующий код в свой файл mime.types.
image/webp webp;
Бесплатное расширение WebP Joomla от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательским агентом (чтобы браузеры Chrome сразу же сопоставлялись) и дополнительного обнаружения JavaScript (так что другие браузеры WebP также совпадают). Если обнаружен WebP, расширение проанализирует вывод HTML, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены изображениями WebP. Для установки вам нужно будет сделать следующее:
Бесплатное расширение WebP Magento от Yireo позволяет включить поддержку WebP, если браузер ее поддерживает. Поддержка браузера для WebP определяется на основе простой проверки пользовательского агента (браузер Chrome) и дополнительного обнаружения JavaScript. Если обнаружен WebP, расширение проанализирует HTML-вывод корневого блока Magento, чтобы убедиться, что ссылки на поддерживаемые изображения (png, jpg, jpeg) фактически заменены на изображения WebP. Для установки вам нужно будет сделать следующее:
В качестве альтернативы, если вы не используете плагин Cache Enabler, вам нужно добавить следующий фрагмент конфигурации в файл конфигурации .htaccess или nginx. Этот метод НЕ работает с CDN. Этот фрагмент разбит на следующие части:
<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
# блок конфигурации 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.
Тэги: , webp, изображения, форматы изображений Категории: Разработка сайтов, Статьи
Бесплатное расширение WebP Joomla от Yireo ?
Что-то не припомню такого для Joomla. Вы случаем ничего не напутали?
🙂
https://www.yireo.com/forum/webp-joomla
У WebP есть такой нюанс — не все браузеры его поддерживают.
К примеру, некоторые версии iOS Safari, обычный Safari, IE — не поддерживают WebP.
https://caniuse.com/#feat=webp
Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
И отдавать нужную версию в зависимости от браузера.
А исходную картинку надо при этом еще и оптимизировать/сжимать — чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) — это еще третья! версия файла.
У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку.
https://optipic.io/ru/webp/wordpress/
Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
Получается совсем все просто и красиво, да и недорого))