Использование современных графических форматов в веб-проектах

[dim_s]

Начали использовать webp недавно на своем проекте, порой в размере получаем выигрыш и более 70%, порой уменьшение размера по сравнению с JPEG — 2-3 и более кратное.

Проблема поддержки в safari и ie решается просто и на фронте, если браузер их не поддерживает, фронт запрашивает картинку в формате png или jpeg.

Картинки в webp конвертируются на лету специальным java бэкенд сервисом и кешируются cdn-ном. Сервис использует официальную консольную утилиту webp от google, иного варианта не нашли. Формат еще плохо поддерживается языками на уровне либ. Для java просто нет адекватной.

[Sannis]

Жаль в статье рассмотрен только веб. На мобильных платформах с WebP тоже всё совсем неоднозначно.

[desin]

Мне кажется более правильно будет переложить работу с webp на сторону веб-сервера. Это умеет делать модуль Pagespeed для Nginx, а также легко реализуется в виде Middleware. Веб-сервер проверяет по заголовку accept, поддерживает ли браузер формат webp, генерит картинку и складывает в кэш. Если не поддерживается и при первом обращении возвращает оригинал. Через атрибут srcset всё-таки лучше решать задачу с картинками под разные экраны.

[OZR]

Все эти статьи забывают сообщить очень важную деталь, про потерю качества в webp. Оригинальное изображение и два обработанных через webp, одно из них с q80, другое с q100. И здесь внезапно оказывается, что если мы хотим сохранить качество изображения в lossless, то у webp преимуществ нет и пользоваться им нельзя. Это практически все фотографии, которые следует обрабатывать leanify.

-rw-r--r-- 1 oz oz 164052 апр 3 01:50 cwebpq100.webp
-rw-r--r-- 1 oz oz 62436 апр 3 01:50 cwebpq80.webp
-rw-r--r-- 1 oz oz 88363 апр 3 01:45 ebb257a61229023d8aee7651708966c8.jpg

WebP можно использовать там, где качество изображения не имеет никакой роли. Например — «Изображение, использованное в одном материале», которое мы и взяли для эксперимента.

Писал про это же здесь: habr.com/en/post/482820/#comment_21096120
Я слишком много потратил времени на эти статьи, чтобы всё же убедиться, что золотой пули нет. И что leanify чрезвычайно хороший и достаточный инструмент для оптимизации изображений без потери качества, замены которому на текущий момент нет.

[PaulZi]

Вы пробовали флаг -sharp_yuv (cwebp)? Для меня webp был очень мыльным по сравнению с jpg, пока не задействовал этот флаг.

[Zezst]

А у вас необходимость именно за раз все сконвертировать?

[Aleksei_Segodin]

Посмотрите модуль sharp.
Его позиционируют как очень быстрый. Есть результаты бенчмарков где сравнивают скорость с другими инструментами. Правда там тестируют только JPEG формат. Не знаю на сколько он быстр по сравнению с другими в плане WebP. Но, на сколько я понял, его архитектура построена так, что он быстрый с любым форматом.
Я сам им пользуюсь (именно для работы с WebP) и вижу что он использует сразу все ядра процессора, что само по себе уже хорошо:



Только-что попробовал конвертировать 50 JPG фотографий размером 2880 × 1920 px на макбуке с процессором 2,4 GHz Quad-Core Intel Core i5. У меня это заняло 8.5 сек.
В среднем 170 мс на фотографию.
Значит конвертирование пол-миллиона таких же фоток на моём ноуте займёт примерно 24 часа.

[desin]

Можно не конвертить всё вообще, а генерить картинки при обращении. Первый посетитель получате JPG, остальные WEBP.

[WooHoo]

Pillow-SIMD должен подойти. Время будет зависить от размера изображений, необходимого качества, и количества ядер процессора.

[gohrytt]

У всей этой истории есть ещё один небольшой неоднозначный момент: у вас не получится подставлять правильные изображения для картинок встроенных в другие теги (как например постер для видео)

[Denai]

В случае с видео экономия нескольких кб на превьюшке не так уже и повлияет на результат

[amarkevich]

Кажется, что поддержка конкретного формата — вопрос политический: тот, кто продвигает свой вариант, конкурентов старается не замечать. Поэтому стараюсь не использовать встроеный софт — доступных вариантов сейчас достаточно. Проверил поддержку формата: преобразовал png -> webp с помощью IrfanView, открыл в Opera 12 — все на месте.

[Gigatrop]

У элемента picture есть один существенный недостаток. Если например он не загрузил нужный формат или не смог его отобразить, то на этом он останавливается. Это противоречит здравой логике, ведь в списке форматов ещё могут быть более тяжёлые альтернативы, лучшие чем ничего. Поэтому если ваш бэк генерит автоматом набор тегов, а скрипт-конвертер не создал лучшие форматы, юзер может ничего не увидеть вообще.