Как использовать WebP в WordPress без потери качества

|

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

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

WebP поддерживает как сжатие с потерями, так и без потерь, позволяя значительно уменьшить размер изображения без заметной деградации качества. Это помогает ускорить загрузку страниц, снизить нагрузку на сервер и улучшить SEO-показатели. Однако браузеры по-разному поддерживают WebP — в основном новые версии Chrome, Edge, Firefox, Opera и Safari уже умеют его показывать, а старые — нет. Поэтому важно не просто загружать WebP, а сделать правильный fallback на JPEG или PNG для старых браузеров.

Плагины для работы с WebP в WordPress

Рассмотрим несколько популярных плагинов, которые помогут внедрить WebP без потери качества и с автоматическим управлением:

  • Imagify — плагин для оптимизации изображений, умеет конвертировать в WebP без потерь и автоматически выводить правильный формат в зависимости от браузера.
  • WebP Express — продвинутый плагин, который создаёт WebP-версии изображений и подставляет их через htaccess или php, поддерживает автоматическое fallback.
  • ShortPixel Image Optimizer — также умеет конвертировать изображения в WebP, при этом можно настроить сжатие без потерь.

Для примера рассмотрим настройку WebP Express. После установки и активации плагина в настройках выбираем метод преобразования — рекомендуем режим "Serve WebP with fallback". Плагин создаст копии изображений в формате WebP и автоматически будет подставлять их, если браузер поддерживает формат. В противном случае будет показываться исходный файл.

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

Если вы хотите избежать плагинов и написать собственный код для конвертации и вывода WebP, можно использовать PHP-библиотеки, например, Imagick или GD. Вот пример функции с префиксом wpedu_, которая создаёт WebP-версию по пути исходного файла:

function wpedu_convert_to_webp($image_path) {
    if (!extension_loaded('imagick')) {
        return false; // Imagick не установлен
    }
    try {
        $imagick = new Imagick($image_path);
        $imagick->setImageFormat('webp');
        $webp_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_path);
        $imagick->writeImage($webp_path);
        return $webp_path;
    } catch (Exception $e) {
        return false;
    }
}

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

function wpedu_display_picture($image_url) {
    $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_url);
    echo '<picture>';
    echo '<source srcset="'.esc_url($webp_url).'" type="image/webp">';
    echo '<img src="'.esc_url($image_url).'" alt="Image">';
    echo '</picture>';
}

Как обеспечить поддержку WebP во всех браузерах

Несмотря на широкую поддержку WebP, некоторые браузеры, например, старые версии Internet Explorer, не умеют его отображать. Поэтому важно всегда иметь fallback — либо отдельный тег <img> с оригинальным форматом, либо серверное решение.

Плагины как WebP Express создают именно такой fallback через htaccess или PHP. Если же вы делаете кастомное решение, используйте тег <picture> с <source> для WebP и <img> для обычного формата, как показано выше.

Рекомендации по качеству и сжатию WebP

Формат WebP позволяет выбирать уровень качества при сохранении с потерями, обычно от 75 до 95. Выбирайте значение, которое даёт баланс между размером и визуальным качеством. Для конвертации без потерь используйте соответствующий режим в Imagick или плагинах.

Например, в Imagick можно задать качество так:

$imagick->setImageCompressionQuality(90);

Для плагинов обычно есть настройка качества в их интерфейсе.

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

  • Перед внедрением сделайте бэкап сайта и базы данных.
  • Тестируйте отображение на разных браузерах и устройствах.
  • Используйте CDN, поддерживающие WebP, для дополнительного ускорения.
  • Регулярно обновляйте плагины и следите за совместимостью.
  • Если используете кеширование, убедитесь, что WebP-версии не блокируются.

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

⭐⭐⭐⭐⭐