Еще в 2010 году Google представил новый формат изображений WebP. Такой крайне полезный формат, который значительно повышает производительность сайта, до сих пор не используют некоторые браузеры, в том числе Safari.
На одном из творческих проектов, расположенном на обычном хостинге, где скорость загрузки сайта занижена за счет большого количества неоптимизированных, по мнению PageSpeed Insights, изображений, решено было попробовать применить формат WebP. Надо сказать, что все картинки формата jpg, максимально сжимаются перед загрузкой на сайт, но этого недостаточно. Результатом такого эксперимента стало повышение баллов PageSpeed Insights на 20 пунктов, и это отличный результат.
Но есть одно но, картинки такого формата не увидят пользователи iPhone. В этом случае необходимо указать резервное изображение формата jpg или png, которое будет отображено в браузерах не имеющих поддержки WebP. Для этого мы используем элементы <picture> и <source>.
<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/jpeg" srcset="image.jpg">
<img src="image.jpg" alt="Моя картинка">
</picture>
Все прекрасно, если это статический сайт, но что делать, если это WordPress?
WebP на сайте WordPress
Для небольшого сайта публиковать картинки можно не как обычно, а через редактор HTML с указанием элемента <picture>, как показано выше. Т.е. загружать в медиатеку, копировать оттуда ссылку на изображение и вручную вставлять ее в код.
По умолчанию в WordPress отключено разрешение на загрузку изображения с таким форматом, включить его можно плагином WP Enable WebP. Плагин не требует никакой настройки, просто активируйте его и загружайте картинки WebP в библиотеку.
Без плагина это можно реализовать функцией:
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' );
Дополнение от 25.11.2021 г. — В версии WordPress 5.8 добавили поддержку WebP, теперь можно загружать без плагинов.
Не забудьте в .htaccess включить кэширование для типа WebP если добавляете заголовки Expires без плагина — ExpiresByType image/webp "access 1 year".
Но этот ручной способ неудобен для больших сайтов. Для автоматизации процесса существует несколько плагинов:
- Плагин кэширования и оптимизации LiteSpeed умеет конвертировать изображения в формат WebP «на лету»;
- WebP Converter for Media;
- WebP Express (давно не обновлялся);
- Imagify – WebP & Image Compression and Optimization;
- WebP Converter for Media и другие.
Повышение производительности вашего сайта может быть значительным при использовании этих плагинов. Но и здесь есть минус — плагины создают отдельную папку в вашем проекте и в нее сохраняют картинки WebP. Если у вас на хостинге есть ограничение по файлам (инодам), то лишние файлы ни к чему. Поэтому лучший способ — использовать CDN с конвертацией в WebP, как это делает тот же плагин Jetpack.
Как конвертировать изображения в WebP?
Есть много полезных и бесплатных приложений для конвертации:
- XnConvert — кросс-платформенный пакетный конвертер;
- Squoosh.app — онлайн инструмент Google для сжатия изображений без потерь качества;
- WebPShop — плагин для открытия и сохранения изображений WebP непосредственно из Adobe Photoshop и другие.
Помните, что конвертировать надо изображения хорошего качества, иначе все артефакты сжатия jpg или png будут переданы и в картинку WebP.
Если этой информации мало, очень подробная статья по сжатию графики есть на Habr.
Дополнение от 25.06.2020 г. — Apple включит поддержку WebP в браузер Safari 14 с iOS 14 и macOS 11.