Как добавить поддержку WebP в WordPress без плагинов

Формат WebP — инновационный формат изображений, который значительно снижает размер файлов при сохранении качества. Поддержка WebP на сайте WordPress позволяет ускорить загрузку страниц, улучшить SEO и повысить удобство пользователей. В этой статье рассмотрим, как добавить поддержку WebP в WordPress без установки плагинов, используя собственные функции и настройки сервера.

Почему WebP важен для WordPress и какие проблемы решает

Согласно исследованиям, изображения составляют до 50% веса страницы. Использование WebP сокращает размер изображений на 25-35% по сравнению с JPEG и PNG, что ускоряет загрузку сайта. Однако WordPress по умолчанию долго не поддерживал загрузку WebP, что приводило к необходимости обходных путей.

Проблемы, с которыми сталкиваются разработчики:

• Неподдержка формата WebP в медиабиблиотеке WordPress;
• Отсутствие автоматического создания WebP-версий из загружаемых изображений;
• Неправильная отдача формата, когда браузер не поддерживает WebP;
• Необходимость оптимизации без установки дополнительных плагинов.

Решение этих проблем с помощью минимального кода и настроек сервера — оптимальный путь для тех, кто хочет легкую, быструю и стабильную поддержку WebP.

Добавляем поддержку загрузки WebP в медиабиблиотеку WordPress

По умолчанию WordPress не разрешает загружать файлы WebP в медиабиблиотеку. Чтобы добавить поддержку, нужно расширить список допустимых MIME-типов через фильтр wp_mime_types. Добавим следующий код в functions.php вашей темы или в отдельный файл плагина:

function wpdigest_allow_webp_uploads($mimes) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}
add_filter('mime_types', 'wpdigest_allow_webp_uploads');

Этот простой фрагмент позволит загружать WebP-файлы через стандартный загрузчик WordPress.

Однако важно проверить, что сервер и PHP поддерживают обработку WebP: для генерации миниатюр WordPress использует GD или ImageMagick, и они должны работать с WebP.

Проверка поддержки WebP на сервере

Чтобы убедиться, что PHP поддерживает WebP, создайте файл phpinfo.php с содержимым <?php phpinfo(); ?> и найдите секцию GD или ImageMagick. В GD должна присутствовать строка WebP Support => enabled. Если нет, обратитесь к хостеру или настройте ImageMagick.

Автоматическая генерация WebP-миниатюр при загрузке изображений

WordPress генерирует миниатюры в формате исходных изображений, обычно JPEG или PNG. Чтобы создать WebP-версии миниатюр, можно использовать хук wp_generate_attachment_metadata. Ниже пример функции, которая создаст WebP из оригинального изображения при его загрузке:

function wpdigest_generate_webp_versions($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = path_join($upload_dir['basedir'], $metadata['file']);
    
    // Проверяем расширение файла
    $ext = pathinfo($file_path, PATHINFO_EXTENSION);
    if (!in_array(strtolower($ext), ['jpg', 'jpeg', 'png'])) {
        return $metadata; // только JPEG и PNG
    }
    
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    
    // Создаем WebP с помощью GD
    $image = null;
    if (in_array(strtolower($ext), ['jpg', 'jpeg'])) {
        $image = imagecreatefromjpeg($file_path);
    } elseif (strtolower($ext) === 'png') {
        $image = imagecreatefrompng($file_path);
    }
    if ($image) {
        imagewebp($image, $webp_path, 80); // качество 80
        imagedestroy($image);
    }
    
    // Аналогично можно создать WebP для миниатюр
    if (!empty($metadata['sizes'])) {
        foreach ($metadata['sizes'] as $size => $size_data) {
            $size_path = path_join($upload_dir['basedir'], dirname($metadata['file']) . '/' . $size_data['file']);
            $size_webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $size_path);
            
            $size_image = null;
            $size_ext = pathinfo($size_path, PATHINFO_EXTENSION);
            if (in_array(strtolower($size_ext), ['jpg', 'jpeg'])) {
                $size_image = imagecreatefromjpeg($size_path);
            } elseif (strtolower($size_ext) === 'png') {
                $size_image = imagecreatefrompng($size_path);
            }
            if ($size_image) {
                imagewebp($size_image, $size_webp_path, 80);
                imagedestroy($size_image);
            }
        }
    }
    
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpdigest_generate_webp_versions', 10, 2);

Этот код создаст WebP-копии для оригинального изображения и всех миниатюр. В дальнейшем можно настроить вывод этих изображений.

Вывод WebP с fallback на оригинал для браузеров без поддержки

Для корректного отображения WebP необходимо использовать тег <picture> с fallback на JPEG/PNG. Пример функции WordPress, которая выводит адаптивное изображение с WebP:

function wpdigest_picture_webp($attachment_id, $size = 'full', $alt = '') {
    $image_src = wp_get_attachment_image_src($attachment_id, $size);
    if (!$image_src) return '';
    
    $url = $image_src[0];
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $url);
    
    $alt = esc_attr($alt ?: get_post_meta($attachment_id, '_wp_attachment_image_alt', true));
    
    return '<picture>' .
        '<source srcset="' . esc_url($webp_url) . '" type="image/webp">' .
        '<img src="' . esc_url($url) . '" alt="' . $alt . '" loading="lazy" decoding="async">' .
        '</picture>';
}

Используйте эту функцию в шаблонах вместо wp_get_attachment_image() или the_post_thumbnail(). Это обеспечит загрузку WebP в поддерживаемых браузерах и оригинала для остальных.

Настройка сервера для отдачи WebP и кеширования

Для корректной работы WebP и кеширования нужно настроить сервер:

• Для Apache можно использовать .htaccess с правилами, позволяющими отдавать WebP, например, добавив:

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

• Для Nginx нужно добавить директивы, которые будут отдавать WebP, если файл существует и браузер поддерживает формат.

Если вы используете CDN, убедитесь, что он корректно обрабатывает WebP и не мешает доставке файлов.

Обзор плагинов для поддержки WebP и альтернатива кода

Хотя мы рассмотрели ручное добавление поддержки WebP, существуют надежные плагины, которые автоматизируют процесс:

• Clearfy Pro — оптимизация и поддержка WebP с минимальными настройками;
• WPRemark — плагин для оптимизации изображений и кэширования, поддерживает WebP;

Если вы хотите избежать плагинов, использование собственного кода и правильных настроек сервера — отличный вариант.