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

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

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

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

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

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

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

Этот код можно добавить в файл functions.php вашей темы или в кастомный плагин. После этого в медиатеке WordPress появится возможность загружать файлы WebP.

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

Для корректной работы с WebP сервер должен иметь библиотеку GD или Imagick, поддерживающую WebP. Чтобы проверить это, создайте файл phpinfo.php с содержимым <?php phpinfo(); ?> и посмотрите, есть ли в разделе GD или Imagick поддержка WebP.

Если поддержки нет, обратитесь к хостеру с просьбой ее добавить или настройте сервер самостоятельно.

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

Чтобы не загружать WebP вручную, можно настроить автоматическую конвертацию загружаемых JPEG и PNG в WebP с помощью PHP. Для этого используем хуки WordPress.

Ниже пример функции, которая при загрузке изображения создает WebP-версию в той же папке, что и оригинал.

add_filter('wp_handle_upload', 'wpacademy_convert_image_to_webp');
function wpacademy_convert_image_to_webp($upload) {
    $file = $upload['file'];
    $info = pathinfo($file);
    $mime = mime_content_type($file);

    if ($mime === 'image/jpeg' || $mime === 'image/png') {
        $image = null;
        if ($mime === 'image/jpeg') {
            $image = imagecreatefromjpeg($file);
        } elseif ($mime === 'image/png') {
            $image = imagecreatefrompng($file);
        }
        if ($image) {
            $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
            imagewebp($image, $webp_file, 80); // качество 80
            imagedestroy($image);
        }
    }
    return $upload;
}

Этот код использует GD-библиотеку для конвертации изображения в WebP с качеством 80%. При загрузке будет создан дополнительный файл с расширением .webp.

Поддержка Imagick для конвертации WebP

Если на сервере доступна библиотека Imagick, конвертацию можно сделать более эффективной:

function wpacademy_convert_image_to_webp_imagick($upload) {
    $file = $upload['file'];
    $info = pathinfo($file);
    $mime = mime_content_type($file);

    if ($mime === 'image/jpeg' || $mime === 'image/png') {
        $imagick = new Imagick($file);
        $imagick->setImageFormat('webp');
        $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
        $imagick->writeImage($webp_file);
        $imagick->destroy();
    }
    return $upload;
}
add_filter('wp_handle_upload', 'wpacademy_convert_image_to_webp_imagick');

Вывод WebP изображений с fallback на JPEG/PNG

Чтобы браузеры, которые не поддерживают WebP, корректно отображали изображения, нужно сделать вывод с fallback. Оптимально использовать тег <picture> с несколькими источниками.

Ниже пример функции, которая выводит HTML для изображения с WebP и fallback:

function wpacademy_picture_webp($image_url, $alt = '') {
    $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" decoding="async">';
    $html .= '</picture>';

    return $html;
}

Вызывайте эту функцию, передавая URL изображения JPEG/PNG, и она подставит WebP, если он существует, обеспечив поддержку в современных браузерах и fallback для остальных.

Пример использования в шаблоне темы

echo wpacademy_picture_webp(wp_get_attachment_url($attachment_id), 'Описание изображения');

Использование сторонних сервисов и плагинов для WebP на wpacademy.ru

Если вы хотите облегчить себе жизнь, на wpshop.ru есть плагин Clearfy Pro, который среди многих возможностей умеет автоматически конвертировать изображения в WebP и корректно выводить их на сайте. Это оптимальный вариант для тех, кто не хочет писать код и настраивать сервер.

Но даже при использовании плагина полезно понимать, как работает процесс конвертации и вывода WebP, чтобы иметь возможность тонко настроить сайт под свои нужды.

Советы по оптимизации и настройке WebP в WordPress

1. Обязательно протестируйте работу WebP на всех основных браузерах, особенно на мобильных устройствах.

2. Следите за размером изображений и качеством — слишком сильное сжатие ухудшит визуальную составляющую.

3. Используйте CDN или кеширование, чтобы повысить скорость загрузки и снизить нагрузку на сервер.

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

5. Для серверов с Apache добавьте в .htaccess поддержку WebP через mod_rewrite для автоматического показа WebP, если он есть, например:

<IfModule mod_rewrite.c>
RewriteEngine On
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=webp,L]
</IfModule>

Это позволит отдавать WebP вместо JPEG/PNG без изменения URL, что удобно для SEO и пользователей.