Fорматы WebP или AVIF в WordPress

Опубликовано автором в 21:27

Чтобы использовать форматы WebP или AVIF в
WordPress, выполните следующие шаги:

Fорматы WebP или AVIF

1. Проверьте поддержку форматов на хостинге

  • Убедитесь, что ваш сервер поддерживает WebP/AVIF (большинство
    современных хостингов поддерживают эти форматы).
  • Если формат не поддерживается, обратитесь в поддержку хостинга или
    обновите версию PHP.

2. Используйте плагины для автоматической конвертации

Вариант 1: Плагин WebP Express

  1. Установите плагин

    WebP Express    .
  2. Перейдите в Настройки → WebP Express.
  3. Настройте параметры:
    • Выберите метод конвертации (рекомендуется cwebp или
      Imagick).
    • Включите опцию Serve WebP images instead of originals.
  4. Сохраните изменения. Плагин автоматически конвертирует загружаемые
    изображения в WebP.

Вариант 2: Плагин Imagify

  1. Установите плагин

    Imagify    .
  2. Перейдите в Настройки → Imagify.
  3. В разделе Optimization выберите:
    • Create WebP versions of images.
    • Для AVIF активируйте опцию, если доступно (требуется поддержка
      сервера).
  4. Нажмите Save Changes. Плагин будет генерировать
    WebP/AVIF при загрузке изображений.

3. Ручная конвертация изображений

Если хотите использовать WebP/AVIF без плагинов:

  1. Конвертируйте изображения через онлайн-инструменты:
  2. Загрузите конвертированные файлы в медиатеку WordPress.
  3. Используйте их в статьях или темах через HTML-тег <picture>: 
    <picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание">
</picture>

4. Настройка CDN с поддержкой WebP/AVIF

Используйте CDN-сервисы, которые автоматически конвертируют изображения:

  • Jetpack Site Accelerator (бесплатно для WordPress).
  • Cloudflare + правила преобразования форматов (требуется
    настройка в разделе Speed → Optimization).
  • ShortPixel Adaptive Images (плагин с поддержкой CDN).

5. Добавление поддержки через .htaccess

Если ваш сервер использует Apache, добавьте в файл .htaccess
правила для приоритетной загрузки WebP/AVIF:

apache
Copy
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp
AddType image/avif .avif

6. Проверка работы

  1. Откройте сайт в браузере (Chrome, Firefox).
  2. Нажмите F12 → Вкладка Network.
  3. Обновите страницу и проверьте формат загружаемых изображений (должны
    отображаться WebP/AVIF).

Важно:

  • Совместимость с браузерами: WebP поддерживается всеми
    современными браузерами. AVIF поддерживается Chrome, Firefox, Edge (но не
    Safari в старых версиях). Используйте <picture> с фолбэком в
    JPG/PNG.
  • Кэширование: Очистите кэш WordPress и браузера после
    настройки.