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

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

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

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

Главные преимущества WebP:

• Меньший размер файлов: на 25-35% меньше аналогичных JPEG/PNG;
• Поддержка прозрачности, как у PNG (WebP с альфа-каналом);
• Современные браузеры поддерживают WebP, включая Chrome, Firefox, Edge и Opera.

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

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

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

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

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

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

Для полноценной работы с WebP желательно, чтобы PHP имел расширение imagick или gd с поддержкой WebP. Проверьте это так:

function wpwebsite_check_webp_support() {
    // Проверяем Imagick
    if (class_exists('Imagick')) {
        $imagick = new Imagick();
        $formats = $imagick->queryFormats('WEBP');
        if (in_array('WEBP', $formats)) {
            return true;
        }
    }
    // Проверяем GD
    if (function_exists('imagewebp')) {
        return true;
    }
    return false;
}

Если функция возвращает false, обратитесь к хостеру с просьбой включить поддержку WebP.

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

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

function wpwebsite_convert_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('/\.(jpe?g|png)$/i', '.webp', $file_path);

    switch ($mime) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($file_path);
            break;
        case 'image/png':
            $image = imagecreatefrompng($file_path);
            break;
        default:
            return $metadata; // Не поддерживаемые форматы
    }

    if (!$image) return $metadata;

    // Сохраняем WebP с качеством 80
    imagewebp($image, $webp_path, 80);
    imagedestroy($image);

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

Этот код создаёт WebP-версию для каждого загруженного JPEG или PNG. Файлы сохраняются рядом с оригиналами.

Отображение WebP-изображений на сайте с резервом для браузеров без поддержки

Чтобы показывать WebP-изображения только в браузерах, которые их поддерживают, и при этом не ломать отображение в остальных, используйте тег <picture>. Пример функции, генерирующей HTML для изображения с WebP:

function wpwebsite_get_picture_webp($attachment_id, $size = 'full', $alt = '') {
    $image_url = wp_get_attachment_image_url($attachment_id, $size);
    if (!$image_url) return '';

    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_url);

    $html = '<picture>';
    $html .= '<source srcset="' . esc_url($webp_url) . '" type="image/webp">';
    $html .= '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" loading="lazy">';
    $html .= '</picture>';

    return $html;
}

Используйте эту функцию в шаблонах для вывода изображений с поддержкой WebP, например:

echo wpwebsite_get_picture_webp(123, 'medium', 'Описание изображения');

Оптимизация и кеширование WebP-изображений

Для лучшей производительности рекомендуется использовать CDN с поддержкой WebP и кешировать изображения на уровне сервера. Также можно настроить сервер (Nginx, Apache) для отдачи WebP при запросах от поддерживающих браузеров через Accept-заголовок.

Пример настройки Nginx для отдачи WebP

Если у вас есть WebP-версии изображений в той же папке, добавьте в конфиг:

location ~* \.(jpe?g|png)$ {
    add_header Vary Accept;
    try_files $uri.webp $uri =404;
}

Это заставит Nginx отдавать image.webp, если браузер поддерживает WebP, иначе обычный файл.

Резюме и рекомендации

Добавление поддержки WebP без плагинов возможно и полезно для повышения скорости сайта. Основные шаги:

1. Разрешить загрузку webp через upload_mimes.
2. Проверить поддержку WebP на сервере (GD/Imagick).
3. Автоматически конвертировать загружаемые изображения в WebP.
4. Использовать тег <picture> для вывода изображений с WebP и fallback.
5. Настроить сервер для отдачи WebP при возможности.

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