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

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

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

Традиционные форматы изображений JPEG и PNG занимают много места и замедляют загрузку страниц. WebP предлагает:

• Сжатие с потерями и без потерь до 30-40% меньшего размера по сравнению с JPEG и PNG;
• Поддержку прозрачности, как у PNG;
• Ускорение загрузки страниц и улучшение пользовательского опыта;
• Повышение рейтинга в поисковых системах благодаря лучшей производительности.

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

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

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

Используем фильтр wp_mime_types для разрешения WebP

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

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

Этот фильтр добавляет MIME-тип для WebP в список разрешённых при загрузке через медиа-библиотеку.

Исправление проверки типа файла при загрузке

Иногда стандартная проверка MIME-типов в WordPress вызывает ошибку при загрузке WebP. Для устранения добавим фильтр wp_check_filetype_and_ext:

function wpacademy_fix_webp_mime_type($data, $file, $filename, $mimes) {
    $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
    if ($ext === 'webp') {
        $data['ext'] = 'webp';
        $data['type'] = 'image/webp';
    }
    return $data;
}
add_filter('wp_check_filetype_and_ext', 'wpacademy_fix_webp_mime_type', 10, 4);

Это гарантирует корректное распознавание WebP при загрузке.

Автоматическое конвертирование JPEG и PNG в WebP при загрузке

Для максимальной оптимизации полезно автоматически создавать WebP-версии изображений при загрузке. Это можно сделать с помощью PHP-библиотеки imagick или gd (если Imagick недоступен).

Пример создания WebP версии с Imagick

Добавьте в functions.php следующий код, который автоматически создаёт WebP копию при загрузке:

function wpacademy_create_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = path_join($upload_dir['basedir'], $metadata['file']);

    $image = new Imagick($file_path);
    $webp_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $file_path);

    if ($image->setImageFormat('webp')) {
        $image->writeImage($webp_path);
        $image->clear();
        $image->destroy();
    }

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

Этот код при загрузке изображения в JPEG или PNG создаст его WebP-версию в той же папке.

Отдача WebP изображений для браузеров, которые их поддерживают

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

Пример PHP-кода для отдачи WebP

Добавьте в functions.php следующий код, который будет отдавать WebP версию, если браузер поддерживает формат:

function wpacademy_serve_webp($content) {
    if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        $content = preg_replace_callback('/<img[^>]+src=["\']([^"\']+\.(jpg|jpeg|png))["\'][^>]*>/i', function($matches) {
            $webp = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $matches[1]);
            return str_replace($matches[1], $webp, $matches[0]);
        }, $content);
    }
    return $content;
}
add_filter('the_content', 'wpacademy_serve_webp');

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

Использование плагинов WPShop для расширенной оптимизации

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

Подводя итоги: что важно помнить при работе с WebP в WordPress

• Добавьте поддержку WebP в загрузчик WordPress через фильтр mime_types и исправьте проверку файлов.
• Автоматически создавайте WebP копии изображений на сервере с помощью Imagick или GD.
• Обеспечьте отдачу WebP для браузеров, поддерживающих этот формат, меняя URL изображений динамически.
• Учтите, что не все браузеры поддерживают WebP, поэтому сохраняйте оригиналы JPEG/PNG как резерв.
• Рассмотрите использование профессиональных плагинов, таких как Clearfy Pro, для комплексной оптимизации.

С помощью описанных методов ваш WordPress сайт на wpacademy.ru сможет эффективно использовать WebP без зависимости от большого количества плагинов, что улучшит скорость, SEO и опыт пользователей.