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

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

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

Формат WebP разработан Google и предлагает эффективное сжатие как для фотографий (с потерями), так и для изображений с прозрачностью (без потерь). Использование WebP позволяет значительно снизить размер изображений, что положительно влияет на скорость загрузки страниц и потребление трафика.

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

Как проверить поддержку WebP на сервере

Для начала убедимся, что сервер поддерживает работу с WebP. Часто это зависит от версии PHP и установленной библиотеки GD или Imagick.

Вот простой пример функции, которая проверяет поддержку WebP в PHP:

function hueman_check_webp_support() {
    if (function_exists('imagewebp')) {
        return true;
    }
    return false;
}

Если функция imagewebp доступна, значит сервер может создавать изображения в формате WebP.

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

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

add_filter('wp_generate_attachment_metadata', 'hueman_generate_webp_on_upload');
function hueman_generate_webp_on_upload($metadata) {
    $upload_dir = wp_upload_dir();
    $file_path = $upload_dir['basedir'] . '/' . $metadata['file'];

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

    $image = null;
    $ext = strtolower(pathinfo($file_path, PATHINFO_EXTENSION));

    if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png') {
        if (function_exists('imagecreatefromjpeg') && ($ext === 'jpg' || $ext === 'jpeg')) {
            $image = imagecreatefromjpeg($file_path);
        } elseif (function_exists('imagecreatefrompng') && $ext === 'png') {
            $image = imagecreatefrompng($file_path);
        }

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

    return $metadata;
}

Этот код при загрузке JPEG и PNG изображений создаст рядом файл с расширением WebP с качеством 80%. Таким образом, WebP версии будут храниться на сервере.

Как выводить WebP изображения на сайте с fallback на оригинал

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

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

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

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

Настройка сервера для правильной отдачи WebP

Чтобы браузеры корректно получали WebP, необходимо настроить сервер. Рассмотрим настройки для Apache и Nginx.

Apache (.htaccess)

Добавьте в файл .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 ^(.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1]
</IfModule>

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

<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

Nginx

Для Nginx в конфигурацию сервера добавьте:

location ~* \.(jpg|jpeg|png)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

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

Примеры плагинов для сравнения

Хотя мы предлагаем решение без плагинов, для понимания альтернатив можно упомянуть популярные плагины:

• WebP Express — автоматическая конвертация и отдача WebP с гибкими настройками.
• Imagify — оптимизация изображений с поддержкой WebP.
• ShortPixel — сжатие и конвертация изображений в WebP.

Наш подход с кодом позволяет отказаться от использования сторонних плагинов, снизить нагрузку и иметь полный контроль над процессом.

Дополнительные советы по работе с WebP в WordPress

1. Кэширование и CDN: убедитесь, что кэш и CDN поддерживают отдачу WebP, иначе пользователи могут получать старые форматы.

2. Оптимизация качества: можно регулировать качество в функции imagewebp, балансируя между качеством и размером файла.

3. Резервное копирование: всегда делайте бэкап сайта перед внесением изменений в код и конфигурацию сервера.

4. Тестирование: проверяйте работу WebP на разных браузерах и устройствах, используя инструменты разработчика.

Вывод

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

Для удобного управления фильтрами и оптимизацией сайта рекомендуем ознакомиться с продуктами на WPSHOP.