Формат WebP становится всё более популярным благодаря своей способности значительно сокращать размер изображений без потери качества, что положительно сказывается на скорости загрузки сайта и SEO. К сожалению, штатная поддержка WebP в WordPress появилась относительно недавно и не во всех случаях работает идеально. В этой статье расскажем, как добавить полноценную поддержку WebP в WordPress — от простых плагинов до кастомных решений с примерами кода.
Почему важно использовать WebP в WordPress
WebP — это современный формат изображений, разработанный Google, который обеспечивает размер файлов на 25-35% меньше по сравнению с JPEG и PNG при сохранении качества. Это значит, что страницы сайта будут грузиться быстрее, что улучшит пользовательский опыт и повысит позиции в поисковой выдаче.
Однако не все браузеры поддерживают WebP одинаково, и WordPress по умолчанию не конвертирует загружаемые изображения в WebP. Также многие темы и плагины не умеют корректно работать с этим форматом. Поэтому важно грамотно организовать добавление поддержки WebP.
Бесплатные плагины для добавления WebP в WordPress
1. WebP Express
Один из самых популярных и функциональных бесплатных плагинов. Он автоматически конвертирует загружаемые изображения в WebP и на лету отдаёт их браузерам, которые поддерживают этот формат.
Плюсы:
- Поддержка конвертации через разные инструменты (cwebp, Imagick, Gd и др.).
- Возможность работать с уже загруженными изображениями.
- Настройка fallback для браузеров без поддержки WebP.
Чтобы установить и настроить:
- Установите и активируйте WebP Express из репозитория WordPress.
- Перейдите в
Настройки > WebP Express. - Выберите метод конвертации (рекомендуется
cwebpпри наличии на сервере). - Включите опцию автоматического создания WebP при загрузке.
- Сохраните настройки и протестируйте загрузку изображений.
2. EWWW Image Optimizer
Этот плагин сочетает оптимизацию изображений и поддержку WebP. Он умеет конвертировать изображения в WebP и корректно выводить их на сайте.
Для активации WebP в EWWW:
- Установите и активируйте плагин.
- Перейдите в
Настройки > EWWW Image Optimizer. - Включите опцию «WebP Conversion».
- Настройте автоматическую подмену изображений на WebP.
Коммерческие решения с расширенными возможностями
ShortPixel Image Optimizer
ShortPixel — популярный сервис оптимизации изображений с поддержкой WebP и AVIF. Есть бесплатный тариф с ограничением по количеству изображений, а также платные планы.
Особенности:
- Конвертация изображений и создание WebP на сервере ShortPixel.
- Поддержка CDN для быстрой отдачи картинок.
- Полная интеграция с WooCommerce, популярными плагинами и темами.
Для интеграции необходимо зарегистрироваться на официальном сайте ShortPixel, получить API-ключ и указать его в настройках плагина.
Реализация кастомного решения для показа WebP с fallback
Если вы предпочитаете минимизировать использование плагинов, можно реализовать поддержку WebP вручную с помощью фильтров WordPress и модификации вывода изображений. Рассмотрим пример функции, которая будет выводить тег <picture> с WebP и fallback на JPEG/PNG:
function wpconfigru_picture_webp_output($image_id, $size = 'full') {
$image_src = wp_get_attachment_image_src($image_id, $size);
if (!$image_src) {
return '';
}
$image_url = $image_src[0];
$image_webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_url);
$html = '<picture>';
$html .= '<source srcset="' . esc_url($image_webp_url) . '" type="image/webp">';
$html .= '<img src="' . esc_url($image_url) . '" alt="" loading="lazy">';
$html .= '</picture>';
return $html;
}Эту функцию можно использовать в шаблонах темы для вывода изображений с поддержкой WebP:
echo wpconfigru_picture_webp_output(get_post_thumbnail_id(), 'large');Данный подход требует, чтобы файлы WebP уже существовали на сервере. Их можно создавать с помощью сторонних утилит или плагинов оптимизации.
Автоматическое создание WebP при загрузке изображений
Чтобы автоматизировать создание WebP, можно подключить обработчик к загрузке файлов в WordPress. Вот пример функции, которая конвертирует JPEG/PNG в WebP при загрузке через GD:
function wpconfigru_convert_to_webp_on_upload($metadata, $attachment_id) {
$upload_dir = wp_upload_dir();
$file_path = path_join($upload_dir['basedir'], $metadata['file']);
$info = pathinfo($file_path);
$ext = strtolower($info['extension']);
if (!in_array($ext, array('jpg', 'jpeg', 'png'))) {
return $metadata;
}
$image = null;
if ($ext === 'jpg' || $ext === 'jpeg') {
$image = imagecreatefromjpeg($file_path);
} elseif ($ext === 'png') {
$image = imagecreatefrompng($file_path);
}
if (!$image) {
return $metadata;
}
$webp_path = $info['dirname'] . '/' . $info['filename'] . '.webp';
imagewebp($image, $webp_path, 80); // Качество 80
imagedestroy($image);
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpconfigru_convert_to_webp_on_upload', 10, 2);Эта функция создаст WebP-файл рядом с оригиналом с качеством 80. Важно, чтобы на сервере была поддержка PHP GD с функцией imagewebp.
Особенности и рекомендации по работе с WebP в WordPress
При добавлении поддержки WebP стоит учитывать:
- Кроссбраузерность: В настоящее время большинство популярных браузеров поддерживают WebP, но для старых Safari и некоторых версий IE необходимо предусмотреть fallback.
- SEO и sitemap: Рекомендуется не заменять URL изображений на WebP навсегда, а использовать
<picture>или серверные правила для подмены, чтобы поисковики индексировали оригиналы. - Кэширование и CDN: Если вы используете кэш или CDN, убедитесь, что они корректно обрабатывают WebP и не отдают оригиналы вместо WebP для поддерживаемых браузеров.
Заключение
Добавление поддержки WebP в WordPress — важный шаг для оптимизации сайта. Выбор между бесплатными плагинами, коммерческими сервисами и кастомными решениями зависит от ваших задач и ресурсов. Для быстрого старта подойдет WebP Express или EWWW Image Optimizer, для продвинутых проектов — ShortPixel с CDN. Если нужна максимальная гибкость — можно реализовать конвертацию и вывод WebP самостоятельно, как показано в примерах кода.
Подробности и плагины можно найти на WPSHOP.