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

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

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

WebP — это современный формат изображений, разработанный Google, который позволяет значительно уменьшить размер файлов по сравнению с JPEG и PNG без существенной потери качества. Использование WebP помогает:

• Ускорить загрузку страниц сайта.
• Снизить нагрузку на сервер и трафик.
• Повысить оценки по Core Web Vitals и SEO.

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

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

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

Для начала убедитесь, что ваш сервер поддерживает библиотеку imagick или GD с WebP. Чтобы проверить, можно создать небольшой PHP-скрипт:

<?php
if (imagetypes() & IMG_WEBP) {
    echo 'WebP поддерживается через GD.';
} elseif (class_exists('Imagick')) {
    $imagick = new Imagick();
    $formats = $imagick->queryFormats('WEBP');
    if (!empty($formats)) {
        echo 'WebP поддерживается через Imagick.';
    } else {
        echo 'WebP не поддерживается.';
    }
} else {
    echo 'WebP не поддерживается.';
}
?>

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

Обновление .htaccess для правильной отдачи WebP

Для корректной работы WebP нужно добавить правила в файл .htaccess, чтобы сервер отдавал WebP-версии изображений, если браузер их поддерживает:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+) $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept
</IfModule>

AddType image/webp .webp

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

Добавление конвертации изображений в WebP при загрузке

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

add_filter('wp_generate_attachment_metadata', 'wpsnippets_generate_webp_on_upload', 10, 2);
function wpsnippets_generate_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file($attachment_id);
    $info = pathinfo($file);
    $extension = strtolower($info['extension']);

    if (!in_array($extension, ['jpg', 'jpeg', 'png'])) {
        return $metadata; // Только для jpg и png
    }

    $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';

    // Проверяем, поддерживает ли сервер WebP
    if (!function_exists('imagewebp')) {
        return $metadata;
    }

    // Создаем WebP из исходного изображения
    if ($extension === 'png') {
        $image = imagecreatefrompng($file);
    } else {
        $image = imagecreatefromjpeg($file);
    }

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

        // Добавляем WebP в метаданные
        $metadata['sizes']['webp'] = [
            'file' => basename($webp_file),
            'width' => $metadata['width'],
            'height' => $metadata['height'],
            'mime-type' => 'image/webp',
        ];
    }

    return $metadata;
}

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

Вывод изображений WebP в теме через фильтр srcset

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

add_filter('wp_calculate_image_srcset', 'wpsnippets_replace_srcset_with_webp', 10, 5);
function wpsnippets_replace_srcset_with_webp($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    foreach ($sources as &$source) {
        $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $source['url']);
        $upload_dir = wp_upload_dir();
        $webp_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $webp);

        if (file_exists($webp_path)) {
            $source['url'] = $webp;
            $source['type'] = 'image/webp';
        }
    }
    return $sources;
}

Этот хук заменит URL в атрибуте srcset на WebP, если соответствующий файл существует. В итоге браузер получит оптимизированное изображение без плагинов.

Советы по совместимости и оптимизации

Несмотря на все преимущества WebP, стоит помнить:

• Не все браузеры поддерживают WebP (например, старые версии Safari). Поэтому важно сохранить оригиналы и настроить fallback через .htaccess.
• Проверяйте работу на тестовом сервере перед внедрением на продакшен.
• Если у вас высокая нагрузка, конвертацию WebP лучше делать через отдельный скрипт или CRON, а не в момент загрузки.
• Для удобства можно использовать плагин Clearfy Pro с функцией оптимизации изображений, который интегрируется с вашим сайтом и поддерживает WebP.

Заключение

Добавление поддержки WebP в WordPress без плагинов — вполне выполнимая задача, которая улучшит производительность сайта и SEO. Используйте предложенные примеры кода для создания WebP при загрузке и вывода изображений, а также настройте сервер на правильную отдачу формата. Если нужна более комплексная оптимизация, стоит обратить внимание на решения вроде Clearfy Pro, которые расширяют возможности WordPress без лишних нагрузок.