Добавляем поддержку WEBP в WordPress

Новый формат файлов изображений webp от Google позволяет сэкономить до 70% на размере файла по сравнению с jpg, к тому же поддерживает прозрачность, как в PNG. Уменьшение веса картинок на сайте положительно повлияет на скорость загрузки сайта без потери качества изображения.

Поддержка webp согласно сервису Caniuse в августе 2018 находится на уровне примерно 73% , что не так уж и мало. Но лучше для неподдерживаемых браузеров использовать фолбек на традиционные JPG/PNG.

Как использовать webp в WordPress 

Рассмотрим реализацию поддержки формата webp в WordPress c помощью плагинов:

  1. Платный Optimus Image Optimizer: Плагин для сжатия изображений без потерь для WordPress с возможностью конвертировать файлы в webp.
  2. Бесплатный WordPress Cache Enabler: Плагин кэширования для WordPress, который позволяет отдавать файлы webp браузерам.

Плагин Optimus Image Optimizer

Можно скачать из репозитория WordPress, с официального сайта плагина optimus.io, или из админки вашего сайта. Для активации функции создания webp требуется покупка лицензии. После установки и активации нужно включить опцию “Creation of WebP files” в настройках плагина.

После включения плагин создает дополнительные файлы webp для существующих файлов изображений, а также для новых загружаемых файлов. Существующие файлы PNG/JPG дополнительно подвергаются сжатию без потерь. Они нужны для браузеров, которые пока еще не поддерживают webp формат.

Есть также опция массовой генерации webp изображений для существующих файлов на сайте.

Плагин WordPress Cache Enabler

Теперь, когда мы используем изображения webp, нужно указать WordPress, в каком случае их стоит использовать. В этом поможет плагин WordPress Cache Enabler.

После установки плагина нужно будет включить опцию “Create an additional WebP cached version”

После этого будут создаваться кэшированные копии страниц с изображениями формата webp.

Сравнение JPG и WebP

Таких результатов по уменьшению размеров файлом можно достичь с помощью описанных плагинов:

WebP на 85.87% уменьшил вес файлов изображений.

Сравнение PNG и WebP

Теперь сравним PNG и WebP:

WebP меньше на 42.8% в среднем.

Как видно, внедрить поддержку webp не очень сложно, и это даст нам большую экономию в весе страницы. Кроме этого, использование webp значительно эффективнее простого сжатия jpg и png файлов.

Поддержка webp в WordPress без плагинов

Есть возможность включить поддержку изображений формата webp в WordPress без установки дополнительных плагинов.

Для этого при вставке изображения на странице нужно использовать следующую конструкцию:

<picture>
  <source srcset="img/myImage.webp" type="image/webp">
  <source srcset="img/OldJPEG.jpg" type="image/jpeg"> 
  <img src="img/OldJPEG.jpg" alt="Alt Text!">
</picture>

В случае браузера, поддерживающего webp, на странице отобразится файл myImage.webp, в противном случае сработает фолбек на OldJPEG.jpg.

Если вы хотите загружать подготовленные изображения в формате webp на сайт WordPress через медиа библиотеку, нужно добавить следующий код в файл functions.php:

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Эта функция добавит webp в список разрешенных расширений файлов для загрузки. По умолчанию WordPress не поддерживает данный тип файлов.

Для корректной работы веб-сервера Apache и кэширования файлов webp добавим следующий код в файл .htaccess:

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Поддержка webp в Windows

Для того, чтобы файлы webp корректно открывались в Windows, нужно скачать и установить WebpCodecSetup.

Для поддержки webp фотошопом нужно скачать плагин с официальной страницы и закинуть в папку C:\Program Files\Adobe\Photoshop\Plug-ins.

Также для быстрого преобразования изображений в формат webp можно воспользоваться онлайн-конвертером.

Summary
Wordpress и webp для ускорения и оптимизации сайта
Article Name
Wordpress и webp для ускорения и оптимизации сайта
Description
Уменьшаем вес страниц сайта на WordPress с помощью нового формата изображений webp - экономия до 70% по сравнению с jpg и png
Publisher Name
WPGutenberg.top
Publisher Logo

14 Comments

  1. Джон Уик21.11.2018

    Спасибо за статью!

    Ответить
  2. MyKey18.02.2019

    Спасибо, статья очень помогла, с ее помощью получилось запилить шорткод для коректного вывода конструкции.

    Ответить
  3. Игорь14.03.2019

    Здравствуйте!
    Расскажите подробнее как применить Поддержку webp в WordPress без плагинов
    Какие файлы править и т.д

    Ответить
  4. Игорь17.04.2019

    Добавил код в functions.php , но загрузить webp через медиафайл все равно не дает. Что можно сделать?
    Пишет: «Извините, этот тип файла недопустим по соображениям безопасности.»

    Ответить
    1. Иоганн Гутенберг17.04.2019

      Посмотрите настройки хостинга, может еще там надо добавить разрешенный тип файла. В WordPress обычно достаточно прописать тип файла в mime types

      Ответить
      1. Игорь17.04.2019

        хостинг beget. Не подскажите где это?

        Ответить
  5. Владимир29.05.2019

    Здравствуйте. Очень помогла статья, особенно настройки вордпресс без плагина. Всё встало корректно, медиа загружается, на эксплорере выскакивают картинки jpg, на остальных webp. Спасибо.

    Ответить
  6. Артем18.10.2019

    Добрый день! Подскажите, если делать без плагина, то на сайт нужно грузить две версии изображения?

    Ответить
  7. Валерий26.11.2019

    Почему то не получилось сделать, в чем может быть проблема?

    Ответить
  8. Олег10.01.2020

    Добавить удалось webp через редактирование functions.php . В админке изображение поста видно но на страничке темы он отображается размером 1х1px….. А так же в медиа библиотеке webp отображается как файл…

    Ответить
    1. Семён08.06.2020

      Добавьте строчку в функции:
      //** * Enable preview / thumbnail for webp image files.*/
      function webp_is_displayable($result, $path) {
      if ($result === false) {
      $displayable_image_types = array( IMAGETYPE_WEBP );
      $info = @getimagesize( $path );

      if (empty($info)) {
      $result = false;
      } elseif (!in_array($info[2], $displayable_image_types)) {
      $result = false;
      } else {
      $result = true;
      }
      }

      return $result;
      }
      add_filter(‘file_is_displayable_image’, ‘webp_is_displayable’, 10, 2);

      Ответить
  9. Евгений04.04.2020

    Купил Optimus, оптимизировал, да действительно index-webp.html создает, но на тестере PageSpeed Insights, выдает тот же результат 🙁
    Cache Enabler тоже установил…

    Ответить
    1. Семён08.06.2020

      Скорость загрузки страницы зависит от многих факторов, в том числе от скриптов и первого ответа сервера….бывает так, что оптимизация под 90-95, а ответ от сервера составляет 4 секунды….и всё, приплыли. Оценка сразу падает

      Ответить
  10. Семён08.06.2020

    Уважаемый автор, добавьте ещё в статью такую функцию, чтобы были видны миниатюры изображений:

    //** * Enable preview / thumbnail for webp image files.*/
    function webp_is_displayable($result, $path) {
    if ($result === false) {
    $displayable_image_types = array( IMAGETYPE_WEBP );
    $info = @getimagesize( $path );

    if (empty($info)) {
    $result = false;
    } elseif (!in_array($info[2], $displayable_image_types)) {
    $result = false;
    } else {
    $result = true;
    }
    }

    return $result;
    }
    add_filter(‘file_is_displayable_image’, ‘webp_is_displayable’, 10, 2);

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll to top