webp - уже пора? | I Love Frontend

webp это “новый” формат изображений для web от google. Новый, в сравнении с общепринятыми форматами jpg, png, gif. По заявлениям самого google их формат на 25-34% “легче” по сравнению с jpeg форматом (по SSIM) и на 26% меньше чем png по тем же оценкам. В реальности же легко можно получить десятикратный выигрыш в размере файла в случае конвертации больших jpg изображений в webp (например, вот таким сервисом или любым другим доступным вам способом).

Чтоб начать использовать webp достаточно просто указать путь к файлу в src тега img или использовать css свойство background-image. Все! Вы сэкономили драгоценные секунды во времени загрузки сайта и трафик пользователей.

Но, есть и обратная сторона, к сожалению, пока поддержка этого формата оставляет желать лучшего. Мы не имеем даже Chrome+Opera+Firefox+Safari связки, зато имеем поддержку Android (начиная с версии 4.0, что дает возможность использовать изображения webp в мобильных приложениях, где трафик очень важен).

В любом случае, всегда можно сделать приятно вашим пользователям с наличием Google Chrome и Opera, а остальные пользователи получат обычный jpg или png.

С чего начать
Начать нужно с конвертации изображений в webp формат. Можно подготовить изображения заранее (еще), конвертировать online или готовить webp на сервере.

Вариант с конвертацией на сервере видится наиболее интересным, так как готовить нужные webp вы можете сразу после загрузки изображений (jpg, png) на сайт (или в момент первого обращения к картинке по http).

Решений тут не так много. Например, google предоставляет консольную утилитку для конвертации, но, вы должны скомпилировать ее из исходников, а такую возможность имеют далеко не все.
К счастью, ImageMagic также поддерживает работу с изображениями в формате webp и вы можете преобразовывать изображения при помощи, например, php и класса Imagick.

$im = new Imagick();
$im->readImage($sourceFile);
$im->stripImage();
$im->setImageFormat("webp");
$im->setResolution(72, 72);
$im->setImageAlphaChannel(imagick::ALPHACHANNEL_ACTIVATE);
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->setCompression(true);
$im->setImageCompressionQuality(90);
$im->writeImage($destinationFile);
$im->destroy();

setImageCompressionQuality установите на свой вкус.

В конце концов, можно просто включить флаг convert_jpeg_to_webp в вашем NGINX c PageSpeed (кстати, PageSpeed для Apache тоже поддерживает такую возможность).

Так почему же мы до сих пор не используем webp? Я вот задумался.