Формат изображений WebP стал стандартом для быстрой загрузки сайтов благодаря своему эффективному сжатию без потери качества. WordPress по умолчанию поддерживает WebP с версии 5.8, однако не все хостинги и темы корректно работают с этим форматом, а также есть нюансы с конвертацией и загрузкой изображений в WebP. В этой статье подробно рассмотрим, как добавить и улучшить поддержку WebP в WordPress, чтобы ускорить сайт и снизить нагрузку на сервер.
Почему важно использовать WebP в WordPress
WebP позволяет значительно уменьшить размер изображений по сравнению с JPEG и PNG, что сокращает время загрузки страниц и улучшает пользовательский опыт. Особенно это важно для мобильных устройств и SEO. Большинство современных браузеров поддерживают WebP, но важно корректно настраивать fallback для старых версий.
Однако просто загружать WebP в медиа библиотеку недостаточно. Нужно обеспечить:
- Конвертацию существующих изображений в WebP;
- Автоматическую генерацию WebP при загрузке новых файлов;
- Корректное отображение WebP в разных браузерах;
- Fallback на JPEG/PNG для браузеров без поддержки WebP.
Рассмотрим, как решить эти задачи на примере плагинов и кастомных решений с примерами кода.
Плагины для поддержки WebP в WordPress
1. WebP Express
Это один из самых популярных бесплатных плагинов, который конвертирует загруженные изображения в WebP и обеспечивает fallback. Он поддерживает разные методы конвертации (cwebp, GD, Imagick) и умеет генерировать правила для .htaccess.
Преимущества:
- Автоматическая конвертация;
- Гибкая настройка;
- Минимальное влияние на производительность сайта.
Недостатки: требует корректной настройки сервера, иногда сложен в конфигурации для новичков.
2. EWWW Image Optimizer
Этот плагин не только оптимизирует изображения, но и может конвертировать их в WebP. Важно активировать опцию "WebP conversion" в настройках.
Плюсы:
- Широкие возможности оптимизации;
- Автоматизация;
- Поддержка CDN.
Минусы: некоторые функции доступны только в премиум версии.
3. ShortPixel Image Optimizer
Плагин с бесплатным тарифом и платными пакетами, который умеет конвертировать изображения в WebP и предоставляет fallback через JavaScript или HTML.
Преимущества:
- Простота использования;
- Интеграция с CDN;
- Качественная компрессия.
Кастомное решение для автоматической генерации WebP при загрузке изображений
Если вы хотите минимизировать использование плагинов, можно добавить поддержку WebP с помощью собственного кода. Ниже пример функции, которая конвертирует загруженные JPEG и PNG в WebP с помощью библиотеки Imagick:
function premiumwp_generate_webp_on_upload($metadata, $attachment_id) {
$upload_dir = wp_upload_dir();
$file_path = path_join($upload_dir['basedir'], $metadata['file']);
$image = new Imagick($file_path);
$image->setImageFormat('webp');
$webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
if ($image->writeImage($webp_path)) {
// Можно добавить запись метаданных, чтобы знать, что WebP создан
}
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'premiumwp_generate_webp_on_upload', 10, 2);Этот код срабатывает после загрузки изображения и создает версию в WebP в той же папке. Затем нужно реализовать вывод WebP в шаблонах.
Вывод WebP с fallback
Чтобы показывать WebP там, где поддерживается, и PNG/JPEG для остальных, используйте тег <picture>:
<picture>
<source srcset="<?php echo esc_url( $webp_url ); ?>" type="image/webp">
<img src="<?php echo esc_url( $fallback_url ); ?>" alt="Описание">
</picture>Для автоматизации можно расширить функции темы или написать фильтр для wp_get_attachment_image.
Использование плагина PremiumWP Clearfy Pro для оптимизации загрузки WebP
Плагин Clearfy Pro помогает управлять оптимизацией сайта и может включать улучшения для работы с изображениями, в том числе WebP. В сочетании с кастомным кодом или плагинами для конвертации, Clearfy Pro позволит отключать ненужные скрипты и стили, ускоряя загрузку страниц.
Настройка Clearfy Pro для оптимизации WebP:
- Включите функции отключения неиспользуемых CSS и JS;
- Активируйте кэширование;
- Используйте lazy load для изображений;
- Проверьте, что WebP загружается корректно в мобильной версии.
Советы по хостингу и настройке сервера для поддержки WebP
Для корректной работы WebP важно, чтобы сервер поддерживал отдачу этого формата с правильными заголовками. Вот что нужно учесть:
- Добавьте MIME-тип для WebP в конфигурацию сервера:
# Для Apache
AddType image/webp .webp
# Для Nginx
location ~* \.(webp)$ {
add_header Content-Type image/webp;
}- Убедитесь, что ваш CDN поддерживает WebP и правильно кеширует изображения;
- Проверьте разрешения на файлы WebP;
- Настройте правила .htaccess или nginx для fallback при отсутствии поддержки WebP в браузере.
Резюме и рекомендации
Добавление поддержки WebP в WordPress — важный шаг для ускорения сайта. Используйте проверенные плагины, такие как WebP Express, EWWW Image Optimizer или ShortPixel, чтобы минимизировать ручную работу. Если хотите гибкости — реализуйте кастомную конвертацию с помощью Imagick и шаблоны с тегом <picture>.
Для комплексной оптимизации загрузки изображений и сайта в целом рекомендуем использовать Clearfy Pro. Настройте сервер и CDN для корректной поддержки WebP, и вы получите значительное улучшение скорости и SEO вашего сайта.