Новый формат файлов изображений webp от Google позволяет сэкономить до 70% на размере файла по сравнению с jpg, к тому же поддерживает прозрачность, как в PNG. Уменьшение веса картинок на сайте положительно повлияет на скорость загрузки сайта без потери качества изображения.
Поддержка webp согласно сервису Caniuse в августе 2018 находится на уровне примерно 73% , что не так уж и мало. Но лучше для неподдерживаемых браузеров использовать фолбек на традиционные JPG/PNG.
Как использовать webp в WordPress
Рассмотрим реализацию поддержки формата webp в WordPress c помощью плагинов:
- Платный Optimus Image Optimizer: Плагин для сжатия изображений без потерь для WordPress с возможностью конвертировать файлы в webp.
- Бесплатный 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 можно воспользоваться онлайн-конвертером.
Спасибо за статью!
Спасибо, статья очень помогла, с ее помощью получилось запилить шорткод для коректного вывода конструкции.
Здравствуйте!
Расскажите подробнее как применить Поддержку webp в WordPress без плагинов
Какие файлы править и т.д
Добавил код в functions.php , но загрузить webp через медиафайл все равно не дает. Что можно сделать?
Пишет: «Извините, этот тип файла недопустим по соображениям безопасности.»
Посмотрите настройки хостинга, может еще там надо добавить разрешенный тип файла. В WordPress обычно достаточно прописать тип файла в mime types
хостинг beget. Не подскажите где это?
Здравствуйте. Очень помогла статья, особенно настройки вордпресс без плагина. Всё встало корректно, медиа загружается, на эксплорере выскакивают картинки jpg, на остальных webp. Спасибо.
Добрый день! Подскажите, если делать без плагина, то на сайт нужно грузить две версии изображения?
Почему то не получилось сделать, в чем может быть проблема?
Добавить удалось webp через редактирование functions.php . В админке изображение поста видно но на страничке темы он отображается размером 1х1px….. А так же в медиа библиотеке webp отображается как файл…
Добавьте строчку в функции:
//** * 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);
Купил Optimus, оптимизировал, да действительно index-webp.html создает, но на тестере PageSpeed Insights, выдает тот же результат 🙁
Cache Enabler тоже установил…
Скорость загрузки страницы зависит от многих факторов, в том числе от скриптов и первого ответа сервера….бывает так, что оптимизация под 90-95, а ответ от сервера составляет 4 секунды….и всё, приплыли. Оценка сразу падает
Уважаемый автор, добавьте ещё в статью такую функцию, чтобы были видны миниатюры изображений:
//** * 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);