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

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

Почему важно использовать WebP в WordPress

WebP — формат сжатия изображений, разработанный Google. Он позволяет уменьшить размер файлов на 25-35% по сравнению с JPEG и PNG без заметной потери качества. Это значит, что страницы загружаются быстрее, что улучшает пользовательский опыт и положительно влияет на ранжирование в поисковых системах.

Несмотря на преимущества, WordPress по умолчанию не всегда разрешает загрузку WebP в медиабиблиотеку. Часто пользователи сталкиваются с ошибками или невозможностью загрузить файлы с расширением .webp. Чтобы решить эту проблему, можно добавить поддержку WebP вручную.

Добавление поддержки WebP в WordPress: расширение допустимых MIME-типов

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

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

Этот код разрешит загрузку файлов с расширением .webp через стандартный загрузчик WordPress.

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

Для корректного отображения WebP на сайте сервер должен поддерживать этот формат. Если у вас Apache, убедитесь, что в .htaccess или конфигурации сервера добавлен правильный MIME-тип:

AddType image/webp .webp

Для Nginx добавьте в конфиг:

types {
    image/webp webp;
}

Без правильной настройки сервера браузеры не смогут корректно получить WebP-изображения.

Автоматическое преобразование загружаемых изображений в WebP

Чтобы повысить производительность, можно преобразовывать JPEG и PNG в WebP при загрузке. Для этого воспользуемся PHP-библиотекой GD или Imagick. Пример ниже показывает, как конвертировать изображение в WebP после загрузки:

function wpdesk_convert_image_to_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = $upload_dir['basedir'] . '/' . $metadata['file'];

    $image_info = getimagesize($file_path);
    if (!$image_info) {
        return $metadata;
    }

    $mime = $image_info['mime'];
    $webp_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $file_path);

    if ($mime === 'image/jpeg') {
        $image = imagecreatefromjpeg($file_path);
    } elseif ($mime === 'image/png') {
        $image = imagecreatefrompng($file_path);
    } else {
        return $metadata; // Только JPEG и PNG
    }

    if ($image) {
        imagewebp($image, $webp_path, 80); // Качество 80%
        imagedestroy($image);
    }

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpdesk_convert_image_to_webp', 10, 2);

Этот код создаст WebP-копию каждого JPEG/PNG изображения при загрузке. Вы можете расширить логику, чтобы автоматически подставлять WebP-версию в шаблонах.

Вывод WebP вместо оригинала с помощью фильтра srcset

Чтобы браузеры, поддерживающие WebP, получали именно этот формат, добавим фильтр для замены URL изображений в srcset:

function wpdesk_replace_srcset_with_webp($sources) {
    foreach ($sources as $size => $source) {
        $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $source['url']);

        // Проверяем, существует ли WebP версия файла
        $webp_path = str_replace(wp_upload_dir()['baseurl'], wp_upload_dir()['basedir'], $webp_url);
        if (file_exists($webp_path)) {
            $sources[$size]['url'] = $webp_url;
        }
    }
    return $sources;
}
add_filter('wp_calculate_image_srcset', 'wpdesk_replace_srcset_with_webp');

Таким образом, если WebP-версия доступна, она будет отдаватьcя браузеру, который поддерживает этот формат.

Оптимизация и безопасность при работе с WebP

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

Во-вторых, убедитесь, что загружаемые файлы действительно являются изображениями, а не вредоносными скриптами с расширением .webp. Для этого можно добавить дополнительную проверку MIME-типа на сервере.

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

Альтернативные решения и плагины для WebP

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

• Imagify — популярный плагин для оптимизации изображений с поддержкой WebP.
• Clearfy Pro — плагин с большим набором оптимизаций, включая поддержку WebP.

Однако ручная реализация даёт больше контроля и не нагружает сайт дополнительными плагинами.