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

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

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

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

• Ускоряется загрузка страниц;
• Снижается нагрузка на хостинг;
• Улучшается пользовательский опыт;
• Повышается рейтинг в поисковых системах.

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

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

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

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

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

Проверка mime-типа через файл upload.php

Иногда WordPress блокирует загрузку WebP из-за проверки mime-типа. Чтобы обойти это, можно добавить дополнительную проверку:

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

Это гарантирует, что WebP-файлы не будут заблокированы из-за несоответствия mime-типа.

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

Если вы хотите, чтобы при загрузке JPEG и PNG автоматически создавались WebP-версии, можно использовать PHP-библиотеку GD или Imagick. Ниже пример функции с использованием GD:

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

    if ( ! $image_info ) {
        return $metadata;
    }

    $mime = $image_info['mime'];

    switch ( $mime ) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg( $file_path );
            break;
        case 'image/png':
            $image = imagecreatefrompng( $file_path );
            break;
        default:
            return $metadata;
    }

    if ( ! $image ) {
        return $metadata;
    }

    $webp_path = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $file_path );
    imagewebp( $image, $webp_path, 80 ); // Качество 80
    imagedestroy( $image );

    // Можно добавить WebP в метаданные, если нужно

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

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

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

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

function wpelement_get_picture_html( $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">';
    $html .= '</picture>';

    return $html;
}

Используйте эту функцию при выводе изображений в шаблонах, чтобы обеспечить поддержку всех браузеров.

Интеграция с WPShop Themes и плагинами

Если вы используете темы из WPShop, например тему Reboot или Root, рекомендуем внедрить поддержку WebP именно через кастомный код, поскольку это позволит избежать конфликтов с плагинами оптимизации изображений и кэширования, такими как Clearfy Pro или WPRemark.

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

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

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

Apache

Добавьте в .htaccess следующие строки, чтобы указать mime-тип для WebP:

AddType image/webp .webp

Также можно настроить условную загрузку WebP, если сервер поддерживает mod_rewrite:

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]

Nginx

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

location ~* \.(jpe?g|png)$ {
    add_header Vary Accept;
    try_files $uri.webp $uri =404;
}

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

Проверка поддержки WebP в браузерах

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

function wpelement_supports_webp(callback) {
    var img = new Image();
    img.onload = function() { callback(img.width === 1); };
    img.onerror = function() { callback(false); };
    img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4TCEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
}

wpelement_supports_webp(function(supported) {
    if (supported) {
        console.log('WebP поддерживается');
    } else {
        console.log('WebP не поддерживается');
    }
});

Можно использовать эту функцию, чтобы динамически подгружать WebP или fallback версии.

Заключение по теме поддержки WebP в WordPress

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

• Вы расширите возможности загрузки изображений;
• Автоматически создадите WebP-версии для JPEG и PNG;
• Обеспечите корректный вывод изображений с fallback;
• Настроите сервер для правильной отдачи WebP.

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