Эгея и WebP

Эгея и WebP

В комментах к недавнему посту про сжатие картинок в JPG зашёл разговор о формате-конкуренте — WebP производства Google. Поскольку для меня это формат новый, неизведанный, да к тому же вот коллега-эгеец сетует, что на Эгее WebP не поддерживается и не известно, будет ли, я решил побольше разузнать о всей этой ситуации.

Почитал сеть, поэкспериментировал с Эгеей, делюсь результатами изысканий и размышлений.

WebP жмёт мощнее, чем JPEG

В моём тестировании одна и та же картинка в JPEG весила 700 килобайт, а в WebP — 600 килобайт. Экономия в 15-20%, может, и не космическая, но когда картинок на странице несколько — очень даже заметная: и по скорости загрузки, и по стоимости трафика (второе актуально, если вы — СМИ или медиапортал, к вам ходят сотни тысяч посетителей и вы платите за объём отдаваемого трафика).

WebP не особенно парится о качестве и прочих нюансах

Вот что говорит Корнел Лесиньски, один из разработчиков MozJPEG, отвечая на вопрос, не планируется ли добавить поддержку WebP в программу-компрессор ImageOptim:

«Таких планов нет... Сам этот формат не особенно интересен: менее точное цветовое соответствие, чем у JPEG; не особенно заметная выгода в сжатии по сравнению с оптимизированным JPEG в приемлемом диапазоне качества; нет поддержки прогрессивного (progressive) отображения». (Отсюда.)

Тем не менее, все основные браузеры уже поддерживают формат WebP. Интересно, почему?

WebP не поддерживается Safari

В это одновременно трудно и (зная политику Apple в отношении просьб пользователей) просто поверить. Самое забавное: WebP является абсолютно бесплатным программным продуктом с открытым кодом. То есть, за добавление его поддержки в браузер Safari фирме Apple не пришлось бы заплатить ни цента. Почему же Apple этого не делает? Возможно, вопрос не в том, сколько Apple должна заплатить Google за добавление поддержки WebP в свой браузер, а в том, сколько ребята из Google должны занести в Apple, чтобы эта поддержка там, наконец, появилась.

Что ж, подождём: рынок расставит всё по своим местам. А пока упрямцы из Apple держат бессмысленную оборону, коммерческие сайтостроители не теряют времени и уже сейчас делают две версии картинок: одну, основную, в формате WebP (её видят пользователи всех браузеров, в которых этот формат поддерживается), а другую, резервную, в формате JPG (её видят гордые пользователи Safari). Подумайте: если бы эта возня была невыгодна с финансовой точки зрения, разве они этим занимались бы?

Почему WebP победит

Я склонен думать, что WebP имеет все шансы вытеснить JPG в качестве стандартного формата сохранения фотоизображений для веба. По двум причинам:

• Во-первых, этот формат уже вовсю используется. И отнюдь не одиночками-энтузиастами, а очень крупными и очень зубастыми коммерческими игроками, не привыкшими кидать деньги на ветер. Среди них — социальные сети, медиахолдинги, инфопорталы, интернет-СМИ. Почему они переходят на WebP? Может, потому что картинки в нём красивее выглядят? Неа. Потому что картинки в нём меньше весят. Точка.

• Во-вторых — и тут я попрошу дизайнеров, фотографов и цифровых художников присесть — публику вообще не интересует техническое качество ваших картинок. (Моих, кстати, тоже.) Публику интересует одно: скорость доступа к информационно-развлекательному ресурсу. Чем больше вес картинок на странице, тем ниже скорость доступа. Как говорится, подумайте над этим.

Как только я понял, что мои восхитительно прекрасные хайрезы нафиг никому не нужны, кроме меня самого, моя жизнь как вебмастера значительно упростилась. Тяжеловесные хайрезы я перенёс туда, где им очень рады: в домашний фотоархив, а на веб я выкладываю JPGи настолько малого веса, насколько это возможно без критического (подчёркиваю: критического, а не с трудом уловимого) ухудшения качества.

Как добавить поддержку WebP в Adobe Photoshop?

Элементарно, легально и бесплатно: соответствующий плагин под названием WebPShop, написанный самим Google, давным-давно проживает тут. Для неанглоязычных пользователей перевожу инструкцию и выкладываю файлы с Гитхаба:

Установка WebPShop для Windows:

• Скачайте архив с плагином (вот для Windows x64 а вот для Windows x86) и распакуйте его.
• Скопируйте файл WebPShop.8bi в папку с плагинами Photoshop (обычно это C:\Program Files\Adobe\Adobe Photoshop\Plug-ins).
• Перезапустите Photoshop. В пунктах меню «Открыть» и «Сохранить» теперь должны отображаться файлы в формате WebP.

Установка WebPShop для macOS:

• Скачайте архив с плагином для macOS и распакуйте его.
• Скопируйте файл WebPShop.plugin в папку с плагинами Photoshop (обычно это Applications/Adobe Photoshop/Plug-ins).
• Перезапустите Photoshop. В пунктах меню «Открыть» и «Сохранить» теперь должны отображаться файлы в формате WebP.

Внимание пользователей macOS Catalina! Если после установки плагина выскочит окошко с системными ругательствами (“WebPShop.plugin” cannot be opened because the developer cannot be verified), запустите Терминал и выполните команду:

sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2020/Plug-ins/WebPShop.plugin

Вышеприведённая команда предназначена для Adobe Photoshop 2020. Если вы используете другую версию Фотошопа или папка с плагинами лежит в другом месте, скорректируйте путь.

Сохранение в WebP в Photoshop производится через меню «Save» (Сохранить). Экспорт «Save for Web (Legacy)» не поддерживается.

WebP и Эгея

По состоянию на ноябрь 2019, движок Эгеи не поддерживает работу с WebP. Это означает, что картинки в этом формате нельзя загрузить в окно редактора. Но это не означает, что картинки в формате WebP вообще нельзя использовать в блоге, работающем на Эгее. Ещё как можно! Вот, смотрите:

Если вы пользуетесь любым браузером, кроме Safari, вы увидите файл в формате WebP. (Если не верите, скачайте файл и проверьте его на детекторе лжи). Пользователи Safari увидят на этом месте точно такую же картинку, но в формате MozJPEG.

Как это сделано? С помощью всего-навсего трёх тегов:

<picture>
    <source srcset="/pictures/test@2x.webp" type="image/webp">
    <img src="/pictures/test@2x.jpg" style="width:100%">
</picture>

Суть фокуса: вы заранее сохраняете одну и ту же картинку в двух форматах (WebP и JPG) и помещаете их в одной и той же папке. Если браузер поддерживает WebP, будет загружена картинка в формате WebP. Если не поддерживает, будет показан JPG.

Здорово? Конечно! Однако неудобство заключается в том, что во-первых, вам придётся использовать FTP-менеджер для копирования WebP-файлов на ваш сервер (поскольку через эгеевский редактор этого сделать нельзя), а во-вторых, ширину картинки для корректного адаптивного масштабирования придётся ограничить шириной текста, т. е. около 740 пикселов, иначе картинка при масштабировании не будет умещаться в экран.

А что насчёт анимированного WebP?

В самом деле, ведь WebP поддерживает ещё и анимацию! Давайте-ка глянем, что он собой представляет в этом качестве и стоит ли использовать его вместо анимированных GIF, как на этом настаивает Google. (Если ролики с WebP-анимацией в вашем браузере вообще не видны, установите последнюю версию браузера.)

Вот 3-секундный тестовый видеофрагмент из тизера «IMAX® Titans Of The Ice Age» (контейнер mp4, кодек H.264, 10 кадров в секунду, размер файла 276 килобайт):

А вот результаты его кодирования с помощью плагина WebPShop:


Качество 50 (размер файла 812 килобайт)



Качество 70 (размер файла 1,1 мегабайт)



Качество 90 (размер файла 2,4 мегабайт)

Нетрудно заметить, что кодирование видео с качеством ниже 90 даёт заметные артефакты-клеточки на фоне однородной цветовой заливки (неба); при этом размер файла возрастает в геометрической прогрессии аж до 2,4 мегабайт, при том что исходный .mp4 имеет размер всего 276 кб!

Так что не очень понимаю, что имел в виду Google, рекомендуя WebP для замены анимированных GIF. Возможно, мультяшно-векторная анимация ему удаётся лучше, но для кодирования анимированных фотоизображений я бы вряд ли рекомендовал WebP. С этим гораздо лучше справляется его друг и соратник WebM.

Итого

Нужно ли добавить поддержку WebP в Эгею? Если спросите меня, я отвечу: «Разумеется, ведь это позволит сайтам на Эгее работать быстрее!» Большинство браузеров этот формат давно поддерживают. Так что главное — захотеть, правда?

Поделиться
Отправить
Запинить
29 ноября   софт   Эгея
1 комментарий
Иван Ветошкин

Тем не менее, Александр, у вас в примере .jpg весит 440 КБ, а .webp — аж целых 547. Разницы в качестве между ними я не заметил.

Александр Токарев

Иван, пример с деревом и не призван был доказать, что webp весит меньше при равном качестве. Он немного про другое: про то, что .webp можно использовать в Эгее уже сейчас, несмотря на отсутствие официальной поддержки и бойкот этого формата со стороны Safari.
Однако то, что вы не заметили разницы, — отличный аргумент в пользу того, что хайрезы с их высоким качеством и деталями никому не нужны :) Впрочем, не спешите, попробуйте ещё раз. Если вы положите одно фото поверх другого, а затем, попеременно включая-выключая верхнее фото, внимательно всмотритесь в детали, вы заметите, что этот конкретный webp более детальный, чем этот конкретный MozJPEG. Поэтому он и весит больше. Вглядевшись в текстуру травы, веток, коры дерева, вы поймёте, на что ушли лишние 100 кб.
А голые цифры 75 / 75 мало что говорят сами по себе. Во-первых, эти шкалы качества не согласованы между собой и определяются производителями программ-компрессоров сообразно их индивидуальном представлении о прекрасном. Во-вторых, конкретно MozJPEG имеет тенденцию весить меньше, но при внимательном рассмотрении хуже (т. е. менее детально и более мыльно, с большим количеством артефактов) выглядеть в сравнении с фотошоповским JPG.

Популярное