Как добавить поддержку WebP в теме WordPress: практическое руководство

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

Почему WebP важен для темы WordPress

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

Снижение веса страниц ускоряет загрузку.
Улучшение Core Web Vitals и SEO.
Оптимизация мобильного трафика.

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

Проверка поддержки WebP в браузере с помощью JavaScript

Прежде чем выводить WebP, нужно убедиться, что браузер пользователя поддерживает этот формат. Для этого можно использовать JavaScript-функцию:

function wpThemesSupportsWebP(callback) {
  var img = new Image();
  img.onload = function() { callback(img.width === 1 && img.height === 1); };
  img.onerror = function() { callback(false); };
  img.src = "data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL6CgbSMgAAA=";
}

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

Добавление WebP в тему через фильтр `wp_get_attachment_image_src`

Чтобы заменить URL изображения на WebP, если он доступен, можно использовать фильтр wp_get_attachment_image_src. Пример функции wpThemesReplaceImageToWebP:

function wpThemesReplaceImageToWebP($image, $attachment_id, $size, $icon) {
  if (!is_admin()) {
    $webp_url = wpThemesGetWebPUrl($image[0]);
    if ($webp_url) {
      $image[0] = $webp_url;
    }
  }
  return $image;
}
add_filter('wp_get_attachment_image_src', 'wpThemesReplaceImageToWebP', 10, 4);

function wpThemesGetWebPUrl($url) {
  $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $url);
  $upload_dir = wp_upload_dir();
  $file_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $webp_url);
  if (file_exists($file_path)) {
    return $webp_url;
  }
  return false;
}

Эта функция проверяет, существует ли файл с расширением .webp и заменяет URL, если файл найден. Для работы нужно заранее конвертировать изображения в WebP и разместить их в той же папке.

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

Чтобы не создавать WebP вручную, можно автоматизировать процесс при загрузке файлов с помощью плагина или кастомного кода. Вот пример функции, которая сгенерирует WebP при загрузке:

function wpThemesGenerateWebP($metadata, $attachment_id) {
  $upload_dir = wp_upload_dir();
  $file_path = path_join($upload_dir['basedir'], $metadata['file']);
  $image = wp_get_image_editor($file_path);
  if (!is_wp_error($image)) {
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    $image->save($webp_path, 'image/webp');
  }
  return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpThemesGenerateWebP', 10, 2);

Этот код создаст WebP-файл рядом с оригиналом при загрузке изображения через медиабиблиотеку WordPress.

Использование плагинов для поддержки WebP

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

Clearfy Pro — оптимизация сайта, в том числе поддержка WebP и Lazy Load.
WPRemark — плагин с возможностями оптимизации изображений.

Они позволяют автоматически конвертировать файлы и выводить WebP в теме без дополнительного кода.

Оптимизация вывода изображений с помощью `<picture>` и `srcset`

Для лучшей поддержки разных браузеров и устройств стоит использовать тег <picture>, который позволяет указать WebP и fallback в JPEG/PNG. Пример функции:

function wpThemesGetPictureHtml($attachment_id, $size = 'full') {
  $img_src = wp_get_attachment_image_url($attachment_id, $size);
  $img_webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_src);
  $upload_dir = wp_upload_dir();
  $webp_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $img_webp);
  if (!file_exists($webp_path)) {
    $img_webp = '';
  }

  $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
  $alt = esc_attr($alt ?: '');

  ob_start();
  ?>
  <picture>
    <?php if ($img_webp): ?>
      <source srcset="<?php echo esc_url($img_webp); ?>" type="image/webp">
    <?php endif; ?>
    <img src="<?php echo esc_url($img_src); ?>" alt="<?php echo $alt; ?>" loading="lazy" decoding="async">
  </picture>
  <?php
  return ob_get_clean();
}

Вызовите echo wpThemesGetPictureHtml($attachment_id, 'medium'); для вывода адаптивного изображения с поддержкой WebP.

Советы по интеграции WebP в тему WordPress

Создавайте WebP версии сразу при загрузке — это удобно и быстро.
Проверяйте поддержку браузера, чтобы не сломать вывод в старых браузерах.
Используйте тег <picture>, чтобы обеспечить fallback.
Оптимизируйте изображения дополнительно с помощью плагинов, например, Clearfy Pro.
При кастомизации темы используйте фильтры WordPress для замены URL изображений.

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

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