Формат WebP становится все более популярным благодаря высокому уровню сжатия и сохранению качества изображений. Поддержка WebP в теме WordPress позволяет значительно ускорить загрузку сайта, что положительно влияет на поведенческие факторы и SEO. В этой статье разберем, как добавить поддержку WebP в тему WordPress, рассмотрим варианты решения с помощью кода и полезных плагинов.
Почему WebP важен для темы WordPress
WebP — это формат изображений от Google, который обеспечивает меньший размер файла по сравнению с JPEG и PNG, сохраняя высокое качество. Поддержка WebP позволяет:
- Уменьшить вес страниц и ускорить загрузку;
- Снизить нагрузку на сервер и трафик;
- Улучшить позиции сайта в поисковой выдаче за счет скорости;
- Поддерживать современные браузеры и одновременно обеспечивать fallback для старых.
Для темы WordPress важно не только выводить WebP изображения, но и корректно обрабатывать их загрузку и генерацию.
Как тема WordPress обрабатывает изображения
По умолчанию WordPress не генерирует WebP версии изображений при загрузке в медиабиблиотеку (начиная с версии 5.8 поддержка WebP появилась, но не всегда WebP генерируются автоматически). В результате, если вы просто загрузите WebP, то они будут работать, но конвертация и fallback не настроены.
Чтобы обеспечить правильную поддержку WebP в теме, нужно решить три задачи:
- Генерация WebP версий для загружаемых изображений;
- Вывод WebP в разметке с fallback на JPEG/PNG;
- Обработка кэширования и оптимизации загрузки.
Добавление генерации WebP при загрузке через functions.php
Один из способов — использовать PHP-библиотеки для конвертации изображений на лету. Пример ниже использует Imagick, если он доступен на сервере:
add_filter('wp_generate_attachment_metadata', 'wp_theme_generate_webp_versions', 10, 2); function wp_theme_generate_webp_versions($metadata, $attachment_id) { $upload_dir = wp_upload_dir(); $fullsize_path = $upload_dir['basedir'] . '/' . $metadata['file']; // Проверяем наличие Imagick и формат файла if (class_exists('Imagick')) { $image = new Imagick($fullsize_path); if ($image->getImageFormat() === 'JPEG' || $image->getImageFormat() === 'PNG') { $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $fullsize_path); $image->setImageFormat('webp'); $image->writeImage($webp_path); $image->clear(); $image->destroy(); // Добавим webp в метаданные для дальнейшего вывода $metadata['webp'] = str_replace($upload_dir['basedir'] . '/', '', $webp_path); } } return $metadata; }Этот фильтр создает WebP версию для каждого загруженного JPEG или PNG и сохраняет путь в метаданные. Далее нужно использовать эти данные для вывода.
Вывод WebP с fallback в теме
Чтобы использовать WebP и при этом обеспечить поддержку старых браузеров, можно применить тег <picture>. Пример функции для вывода изображения с WebP fallback:
function wp_theme_picture_webp($attachment_id, $size = 'full', $alt = '') { $metadata = wp_get_attachment_metadata($attachment_id); $upload_dir = wp_upload_dir(); $image_url = wp_get_attachment_image_url($attachment_id, $size); $webp_url = ''; if (!empty($metadata['webp'])) { $webp_url = $upload_dir['baseurl'] . '/' . $metadata['webp']; } if ($webp_url) { echo '<picture>'; echo '<source srcset="' . esc_url($webp_url) . '" type="image/webp">'; echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" loading="lazy">'; echo '</picture>'; } else { echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" loading="lazy">'; }}Такой подход гарантирует, что браузеры, поддерживающие WebP, загрузят оптимальный формат, остальные — стандартный JPEG/PNG.
Использование плагинов для поддержки WebP
Если хочется минимизировать ручную работу, можно воспользоваться плагинами с поддержкой WebP:
- WebP Express — конвертирует изображения в WebP и выводит их с fallback, поддерживает разные методы конвертации;
- ShortPixel Image Optimizer — платный сервис с бесплатным лимитом, конвертирует изображения и оптимизирует их, включая WebP;
- Imagify — аналогично, с поддержкой WebP и автоматической оптимизацией;
- Clearfy Pro — в составе функционала оптимизации есть поддержка WebP, можно интегрировать с темой.
Плагины значительно упрощают процесс, но иногда требуют настройки, чтобы корректно работать с вашей темой.
Оптимизация вывода и кэширование WebP в теме
После добавления WebP важно позаботиться о кэшировании и CDN, чтобы ускорить загрузку. Рекомендуется:
- Использовать кэширование на уровне сервера и браузера;
- Подключить CDN с поддержкой WebP (например, Cloudflare, BunnyCDN);
- Минимизировать количество запросов и контролировать lazy loading;
- Включить HTTP/2 или HTTP/3 для быстрой параллельной загрузки;
- Проверять работоспособность через инструменты Google PageSpeed Insights и другие.
Иногда требуется дополнительно настроить файл .htaccess или серверные правила для правильной отдачи WebP.
Советы по отладке и проверке поддержки WebP
Чтобы проверить, что WebP действительно работает в вашей теме, сделайте следующее:
- Загрузите изображение JPEG или PNG и проверьте, сгенерировался ли WebP файл;
- Откройте страницу в браузере с поддержкой WebP и убедитесь, что в исходном коде используется тег
<picture>с WebP; - Используйте инструменты разработчика браузера, чтобы проверить, какой формат изображения загружается;
- Протестируйте сайт в браузерах без поддержки WebP, чтобы убедиться в наличии fallback;
- Проверьте скорость загрузки страниц до и после добавления WebP.
Итог
Поддержка WebP — важный этап оптимизации любой темы WordPress. Используя приведенный код и плагины, вы можете существенно улучшить скорость сайта и качество изображений. При этом помните о кэшировании и тестировании на разных браузерах. Если хотите простое решение — выбирайте плагин, если же нужна гибкая кастомизация — пишите свою логику обработки WebP, как показано выше.
Для удобства и расширения функционала рекомендуем ознакомиться с плагинами и темами на WPSHOP.ru.