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

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

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

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

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

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

Как WordPress работает с WebP изображениями

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

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

Поэтому важно учитывать настройки сервера и PHP, а также расширить функциональность WordPress кодом.

Добавляем поддержку WebP в WordPress с помощью кода

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

Разрешаем загрузку WebP файлов

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

Этот код добавляет MIME-тип для WebP, разрешая загрузку таких изображений через медиа библиотеку.

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

WordPress создает миниатюры для загружаемых изображений, но для WebP иногда требуется дополнительная обработка. Можно использовать встроенный GD или Imagick PHP модули. Приведем пример проверки и установки Imagick с поддержкой WebP.

function wpreboot_check_imagick_webp() {
    if (class_exists('Imagick')) {
        $imagick = new Imagick();
        $formats = $imagick->queryFormats('WEBP');
        if (in_array('WEBP', $formats)) {
            return true;
        }
    }
    return false;
}

add_action('admin_notices', function() {
    if (!wpreboot_check_imagick_webp()) {
        echo '<div class="notice notice-warning"><p>Внимание: Imagick не поддерживает WebP. Конвертация WebP миниатюр может работать некорректно.</p></div>';
    }
});

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

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

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

function wpreboot_convert_to_webp($metadata, $attachment_id) {
    $file = get_attached_file($attachment_id);
    $info = pathinfo($file);

    if (in_array(strtolower($info['extension']), ['jpg', 'jpeg', 'png'])) {
        if (class_exists('Imagick')) {
            $imagick = new Imagick($file);
            $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
            $imagick->setImageFormat('webp');
            $imagick->writeImage($webp_file);
            $imagick->clear();
            $imagick->destroy();
        }
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpreboot_convert_to_webp', 10, 2);

Этот код создаст WebP версию для каждого загружаемого JPEG/PNG файла. Далее можно настроить вывод изображений с приоритетом WebP в шаблоне.

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

Чтобы показывать WebP только в браузерах, где это поддерживается, а для остальных — оригинальные форматы, используйте элемент <picture> с <source>.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения">
</picture>

В WordPress можно написать функцию, которая будет выводить такой код для заданного ID изображения:

function wpreboot_picture_webp($attachment_id, $alt = '') {
    $url_jpg = wp_get_attachment_url($attachment_id);
    $url_webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $url_jpg);
    if (empty($alt)) {
        $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    }
    echo '<picture>';
    echo '<source srcset="' . esc_url($url_webp) . '" type="image/webp">';
    echo '<img src="' . esc_url($url_jpg) . '" alt="' . esc_attr($alt) . '">';
    echo '</picture>';
}

Так вы получите эффективную и кроссбраузерную загрузку изображений.

Использование плагина Clearfy Pro для улучшения поддержки WebP

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

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

Заключение

Добавление поддержки WebP в WordPress без плагинов требует понимания работы загрузки, обработки изображений и вывода на сайт. Используя фильтры upload_mimes и wp_generate_attachment_metadata, а также элемент <picture>, можно добиться современного и эффективного отображения изображений.

При этом важно учитывать поддержку WebP на сервере (Imagick или GD), и при желании использовать готовые решения, например, Clearfy Pro с wpshop.ru.