WebP

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

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

С начала 2010-х Google заявил, что скорость загрузки сайта будет иметь большой вес в его оценке и ранжировании поисковой системой. Соответственно, для достижения высоких позиций в выдаче теперь уже недостаточно большой внешней ссылочной массы. Сайт должен соответствовать определённым критериям на техническом уровне.

Одним из таких критериев является оптимизация графики. Если проверить сайт через Google PageSpeed, то часто весомым "тормозом" может оказаться как раз большое количество неоптимизированных изображений. Сам Гугл предлагает два варианта решения проблемы: либо ужимать качество стандартных JPG, PNG или GIF-картинок, либо воспользоваться их новым графическим форматом WebP...

Сравнение WebP с другими форматами

Если взглянуть на популярные графические форматы, которые в основном используются в Интернете, то мы можем заметить, что практически все они имеют собственные недостатки и при оптимизации серьёзно теряют в качестве:

• JPG – хорош для фотографий и иной полноцветной графики, поскольку передаёт практически все видимые цветовые оттенки (до 16777216). Однако, при сжатии качества добавляет к изображению большое количество цифровых шумов (разноцветные пиксели), что визуально "замыливает" картинку.
• PNG – поддерживает как полноцветную, так и индексированную (256 оттенков – 8 бит) палитру цветов. Дополнительное преимущество формата в том, что он поддерживает альфа-канал и может отображать изображения с частичной прозрачностью. Минусом же является больший (в сравнении с JPG) размер файла оптимизированного без потерь, либо значительное уменьшение отображаемых оттенков при оптимизации с потерями.
• GIF – изначально поддерживает только 8-битную цветовую палитру, что ограничивает применение формата для передачи полноцветной графики. Но этот недостаток компенсируется возможностью хранения анимации в виде пакета последовательных кадров. Правда, анимация в силу индексированности палитры, не может передавать все оттенки и часто использует метод дизеринга для имитации градиентных цветовых переходов.

Google решил учесть все недостатки и преимущества вышеперечисленных форматов изображений и создал собственный графический формат WebP. Он базируется на кодеке VP8, который Гугл в 2010 году выкупил вместе с создавшей его компанией On2 Technologies.

На сегодняшний день WebP поддерживает как полноцветную, так и индексированную палитры, может хранить изображения с альфа-каналом и даже полноцветную анимацию кинематографического качества!

При этом, по заявлениям Гугла, сжатое без потерь изображение в WebP имеет в среднем на 26% меньший размер, нежели аналогичная PNG-картинка. А сжатие с потерями эффективнее чем у JPG на 25 – 34%! При подборе же максимально оптимальных параметров можно даже достичь до 90% экономии в размере при сохранении визуальной привлекательности изображения.

Чтобы проверить заявления Гугла по поводу эффективности нового графического контейнера, было решено взять одну и ту же картинку, посжимать её с различными настройками в разных форматах и сравнить результаты. для чистоты эксперимента картинка была создана с нуля в графическом редакторе и сохранена изначально в PNG-формате. Вот, что получилось при сравнении сжатия в PNG и WebP:

Как видим, при сохранении 100% качества и активного альфа-канала WebP действительно значительно меньше PNG (105 против 162 КБ, примерно 65%, то есть на 35% меньше). В режиме индексированной палитры с максимальным количеством оттенков (256) PNG-файл занимает всего 40,1 КБ. Однако, WebP с 80%-ным качеством, при котором не слишком сильно видны искажения, имеет размер всего 24,5 КБ, что почти на 39% меньше, но визуально выглядит более выгодно.

Теперь сохраним ту же картинку в JPG и сравним результаты при различных степенях сжатия качества:

JPG-вариант в 100%-ном качестве даже без сохранения прозрачности получился значительно больше даже от оригинального PNG – целых 281 КБ! При сжатии до 50% на изображении появляются видимые артефакты, но размер файла становится уже 51,3 КБ. Однако, как мы помним, WebP даже с 80%-ным качеством "весит" всего 24,5 КБ (всего 48% от JPG) и это при условии сохранения прозрачности!

Как видим, в обеих случаях WebP показывает весьма хорошее соотношение размера и качества, что подходит для хранения любых видов графики. Только при высоких уровнях потерь мы наблюдаем существенное выпадение цветов, похожее на эффект постеризации. Но и такой внешний вид изображения всё же выглядит гораздо лучше чем "зашумленный" JPG или PNG с уменьшенной палитрой.

Практически во всём WebP "обходит" другие графические форматы. Так почему же он до сих пор не стал использоваться повсеместно? Дело в его недостаточной поддержке...

Поддержка WebP

Так уже сложилось исторически, что Google часто оказывается "родоначальником" многих передовых технологий. В случае с форматом WebP получилось то же самое. Изначально его поддержка была реализована только в "родном" браузере Chrome и операционной системе Android. Однако, доля этих продуктов Гугла на мировом рынке весьма высока, поэтому на новый формат обращают внимание всё новые и новые сторонние разработчики.

Первыми в этом плане стали создатели браузера Opera. С переходом на новый движок Blink, который, фактически, является форком Chromium, Opera окончательно обрела полную поддержку WebP практически автоматом (хотя, реализация отображения картинок без анимации была внедрена ещё в 12 версии на старом движке Presto). Аналогичная ситуация и у большинства "Хромоподобных" веб-обозревателей.

Windows и Linux по умолчанию не поддерживают формат WebP, однако, имеется возможность установить специальный кодек (о нём ниже) или сторонние программы-просмотрщики изображений, которые распознают WebP (например, XnView).

Штатные браузеры Windows Internet Explorer и Edge также не поддерживают новый графический формат. Правда, временами появляются заявления о разработке энтузиастами дополнений, но по факту они либо вовсе не работают, либо реализуют лишь базовую поддержку WebP без анимации и альфа-канала. Единственное официальное решение для браузера Edge можно скачать из Microsoft Store.

Печальнее всего дело обстоит с Mozilla Firefox. Разработчики браузера уже года три как работают над реализацией поддержки WebP, но её всё нет и нет... Хотя, определённая надежда на скорое появление функции всё же имеется, поскольку один из форков Файрфокса под названием Pale Moon уже "научился" полностью "понимать" weppy-графику.

В общем, на сегодняшний день поддержка формата в разрезе популярных браузеров и их версий имеет примерно такую картину:

Браузер / Поддержка	С потерями	Без потерь + альфа-канал	Анимация
Google Chrome	17+	23+	32+
Mozilla Firefox	-	-	-
Pale Moon	26+	26+	26+
Opera	11.10+	12.10+	19+
Internet Explorer	-	-	-
Edge	-	-	-
Safari	-	-	-
Google Chrome Android	25+	25+	32+
Opera Mini	7.6.3+	7.6.3+	7.6.3+
Android Browser	4.0+	4.2+	4.3+
UC Browser	11.8+	11.8+	11.8+

Просмотр WebP в Windows

Как я уже говорил, изначальной поддержки WebP нет даже в Windows 10. Однако, Гугл создал специальный кодек, который обеспечивает интеграцию данного формата графики с Windows, начиная с XP! Чтобы установить его, просто скачайте этой страницы инсталлятор с именем WebpCodecSetup.exe (второй в списке), запустите его и следуйте подсказкам.

Практически вся установка сводится к нажатию кнопки "Next". Лишь на одном из начальных экранов Вам потребуется выбрать тип установки. Большинству подойдёт первый вариант "Typical" или третий – "Complete":

После установки Вы сможете просматривать статические (поддержки анимации, увы, нет) WebP-изображения прямо в Проводнике:

Кроме того, Вы можете просматривать изображения практически любых форматов при помощи того же браузера Google Chrome или специальных программ-просмотрщиков (например, XnView):

Конвертеры WebP

С просмотром WebP мы, думаю, разобрались. А теперь перед нами стоит задача создать изображения в этом формате. Здесь можно пойти двумя путями: нарисовать картинку в графическом редакторе и сохранить её изначально в WebP или же воспользоваться различными конвертерами. О конвертерах мы поговорим подробнее ниже, а сейчас уделим внимание редакторам.

Наиболее продвинутым бесплатным графическим редактором для Windows является GIMP. Поэтому он с версии 2.10 поддерживает импорт и экспорт в WebP. Для других популярных редакторов, вроде Paint.NET или Photoshop существуют специальные плагины, позволяющие открывать и сохранять изображения в нужном нам формате:

"Родные" конвертеры Google

Однако, даже поддерживающий по умолчанию WebP GIMP (как и большинство плагинов для графических редакторов), позволяет сохранять лишь статические изображения с минимумом настроек. Для полного доступа ко всем доступным параметрам формата сам Google рекомендует использовать конвертеры, позволяющие создавать изображения "веппи" из других форматов (преимущественно PNG или GIF в случае с анимацией).

Беда лишь в том, что Гугл распространяет только консольные версии "родных" конвертеров и инструментов для работы с WebP. Если Вас не смущает запуск программ без графического интерфейса через Командную строку, то Вы вполне можете скачать архив libwebp самой последней версии для Вашей версии ОС со страницы репозитория Гугла. Прочесть о входящих в комплект утилитах и примерах работы с ними можно в специальном Справочнике.

Скачанный архив нужно распаковать в любую удобную Вам папку. В ней окажется ещё ряд директорий, из которых нам нужна "bin". В ней хранится целых 10 утилит, позволяющих решать различные задачи с форматом WebP. Вот краткое описание их предназначения:

1. anim_diff – утилита, предназначенная для анализа и сравнения двух похожих анимированных изображений в форматах WebP и/или GIF).
2. cwebp – основной конвертер, позволяющий преобразовывать изображения в форматах JPG, PNG или TIFF в WebP.
3. dwebp – декодер изображений формата WebP в PNG, PAM, PPM или PGM.
4. get_disto – утилита для анализа искажений при уменьшении качества изображений в форматах JPG, PNG, TIFF и WebP.
5. gif2webp – конвертер GIF в WebP с возможностью сохранения анимации.
6. img2webp – утилита, позволяющая собрать последовательность изображений в готовую анимацию в формате WebP.
7. vwebp – консольный просмотрщик изображений в формате WebP без установки кодека. Версия утилиты vwebp_sdl.exe может быть использована для интеграции просмотрщика в другие проекты.
8. webp_quality – утилита для определения качества WebP-изображения.
9. webpinfo – более продвинутый вариант вышеприведённой утилиты для получения данных о WebP-изображении.
10. webpmux – утилита, позволяющая работать с анимированными WebP-изображениями. В отличие от img2webp, которая позволяет только объединять ряд JPG и PNG-картинок в WebP-анимацию, данное решение позволяет напрямую работать с неанимирорванными WebP, извлекать из готовой анимации определённые кадры и т.п.

В принципе, работать с консольными командами не так уж сложно. Тем более, что к каждой утилите имеется справка с примерами, вызываемая параметром "-h" (например, cwebp -h). А некоторые из них имеют ещё и подробные руководства, доступные по параметру "-H" или "-longhelp"). Рассмотрим для примера команды основного конвертера cwebp:

В общем случае нам нужно:

• ввести команду, активирующую конвертер;
• прописать ряд необязательных опций;
• задать параметром "-q" число от 0 до 100 (по умолчанию – 75) для регулировки качества итоговой картинки;
• указать путь к оригинальному (например, PNG) изображению;
• после параметра "-o" указать путь к итоговому WebP-изображению.

В виде кода это будет выглядеть так:

В этом примере предполагается, что исходная и итоговая картинка будут находиться в том же каталоге, что и утилита конвертирования. Однако, можно прописывать и альтернативные пути. Главное – чтобы в адресе папки не было русских букв, которые не всегда обрабатываются адекватно.

А теперь рассмотрим дополнительные параметры, которые можно применять в конвертере:

• -alpha_q – число от 0 до 100 (по умолчанию – 100), регулирующее степень сохранения прозрачности оригинального изображения в WebP-формате;
• -preset – одно из 6 значений (default, photo, picture, drawing, icon, text), которое определяет оптимальный алгоритм оптимизации того или иного изображения. Своим значением параметр перекрывает все остальные (кроме -q), поэтому при использовании должен быть прописан первым;
• -z – число от 0 (самый быстрый) до 9 (самый медленный), определяющее степень сжатия изображения без потерь – чем большее сжатие, тем медленнее оно происходит (по умолчанию – 6). Значение перекрывается параметрами -q и -m при их использовании;
• -m – число от 0 (самый быстрый) до 6 (самый медленный), указывающее скорость сжатия изображения (по умолчанию – 4);
• -segments – число от 1 до 4 (по умолчанию – 4), задающее количество одновременно кодируемых сегментов изображения;
• -size – желаемый размер итогового изображения в байтах;
• -psnr – желаемое соотношение сигнала к шуму (по умолчанию – 42 dB). перекрывается параметром -size при его использовании;
• -s – параметр требует после себя два числа, указывающих на желаемые размеры ширины и высоты картинки в пикселях;
• -sns – число от 0 до 100 (по умолчанию – 50), определяющее амплитуду цифровых шумов, добавляющихся к изображению для уменьшения его размера;
• -f – число от 0 до 100 (по умолчанию – 60), задающее степень применения фильтра количества оттенков изображения;
• -sharpness – число от 0 до 7 (по умолчанию – 0), задающее степень размытия деталей изображения при использовании фильтра -f;
• -strong – активное по умолчанию значение для применения фильтров;
• -nostrong – отключение строгого применения фильтров;
• -sharp_yuv – активирует более медленный но эффективный алгоритм сохранения резкости в цветовом пространстве YUV вместо традиционного RGB;
• -partition_limit – число от 0 до 100 (по умолчанию – 0), позволяющее ограничить размер первого контрольного фрагмента кодированного изображения в 512 килобайт. Актуально для больших картинок;
• -pass – число от 1 до 10 (по умолчанию – 1), задающее количество проходов при кодировании;
• -crop – параметр требует 4 числа и позволяет вырезать из изображения фрагмент по заданным координатам: от точки с отступом по горизонтали и вертикали с заданными шириной и высотой в пикселях;
• -resize – параметр требует 2 числа и позволяет уменьшить итоговое изображение до заданных размеров по ширине и высоте. Параметр должен быть использован после обрезки, если она применяется;
• -mt – позволяет задействовать все доступные ядра процессора для обработки изображения (при условии многоядерности процессора и поддержки параллельных потоков);
• -low_memory – уменьшает использование памяти, но замедляет процесс кодирования. Актуально при использовании параметра -segments;
• -map – параметр, использующийся в основном при отладке и принимающий число от 1 до 6 для построения дополнительной ASCII-карты изображения;
• -print_psnr – команда для вывода значения соотношения сигнала к шуму в выбранном изображении;
• -print_ssim – команда для вывода значения структурной схожести двух выбранных изображений;
• -print_lsim – команда для вывода значения локальной схожести групп пикселей в выбранном изображении;
• -d – позволяет создать дамп в виде PGM-файла. Требует указания отдельного пути с именем файла и расширением .pgm;
• -alpha_method – число от 0 до 1 (по умолчанию – 1), которое позволяет указать метод обработки альфа-канала;
• -alpha_filter – одно из текстовых значений "none", "fast" (по умолчанию) или "best", которое определяет качество обработки альфа-канала при методе по умолчанию (1);
• -exact – параметр, по умолчанию отключённый, определяющий сохранение оттенков в полупрозрачных областях;
• -blend_alpha – требует числа в 16-ричной системе (например, ff0000 – красный, ffffff - белый и т.п.) для определения цвета, которым будут заменены прозрачные области;
• -noalpha – уничтожает всю информацию о прозрачности;
• -lossless – параметр, по умолчанию отключённый, активирующий кодирование без потерь. Сохранение полупрозрачности в этом режиме доступно только совместно с параметром -exact;
• -near_lossless – параметр, принимающий значение от 0 (активен) до 100 (отключённый), активирующий кодирование в особом режиме "почти без потерь";
• -hint – параметр, принимающий текстовые значения "photo", "picture" или "graph" для указания подсказки о типе изображения в его метаданных;
• -metadata – параметр, позволяющий сохранить определённые метаданные оригиналоьного изображения при конвертировании. Может принимать значения "all", "none" (по умолчанию), "exif", "icc" или "xmp";
• -short – позволяет выводить различные результаты тестирования (-print_psnr, -print_ssim и т.п.) в сокращённом виде;
• -quiet – отключает вывод любой информации о текущем кодировании;
• -version – выводит версию библиотеки по окончании кодирования;
• -noasm – отключает ассемблерную оптимизацию изображения;
• -progress – отображает данные о процессе кодирования;
• -jpeg_like – экспериментальный параметр, позволяющий приблизить алгоритм кодирования к параметрам JPEG-сжатия;
• -af – экспериментальный параметр, позволяющий автоматически подобрать силу кодирования (-strong);
• -pre – экспериментальный параметр, позволяющий активировать препроцессинг фильтров.

Как видим, параметров довольно много, поэтому подозреваю, что далеко не все захотят возиться с Командной строкой. Для таких пользователей существуют программы-конвертеры с визуальным графическим интерфейсом.

Сторонние конвертеры WebP

Одним из наиболее универсальных и удобных конвертеров изображений, поддерживающих формат WebP, является XnConvert от авторов уже упомянутого мной просмотрщика графики XnView:

Из параметров кодирования формате WebP нам доступен выбор качества (шкала, активная по умолчанию), кодирование без потерь или сжатие до заданного размера. Из дополнительных параметров можно настроить метод сжатия (параметр "-m"), интенсивность применения фильтра (параметр "-f") и резкость фильтра (параметр "-sharpness").

Имеются и более продвинутые конвертеры, "заточенные" именно на работу с WebP-форматом. Одним из таковых можно назвать WebPconv:

Этот конвертер включает в себя библиотеки для кодирования/декодирования WebP-изображений, а также для преобразования GIF-анимации в новый формат. Также он поддерживает ряд дополнительных параметров WebP, среди которых "-preset", "-q", "-m", "-f", "-metadata", "-lossless" и другие.

Кроме того, имеются и попытки реализовать полноценный GUI для WebP-утилит от Гугла. Одной из таких попыток является программа webPGUI:

В отличие от предыдущего конвертера, webPGUI не позволяет конвертировать WebP в другие форматы и не поддерживает сохранение анимации в GIF. Однако, программа реализует все доступные параметры кодировщика cwebp в визуальном режиме и позволяет вовсе не пользоваться консолью для применения "тонких" продвинутых настроек, а также в ней имеется пакетный режим, дающий возможность обрабатывать сразу несколько изображений.

Конвертеры WebP онлайн

Ну и, естественно, раз формат WebP ориентирован на работу в Интернете, то на сегодняшний день уже существует весьма много конвертеров WebP онлайн. Одним из лучших и наиболее универсальных можно назвать EzGif.com:

Чтобы воспользоваться им, нужно переключиться в режим WebP и выбрать из горизонтального меню инструмент конвертирования. Здесь доступно как преобразование любых картинок в WebP, так и обратно. Кроме того, имеются инструменты для работы с анимацией и даже конвертирования видеоролика в WebP-анимацию и обратно! Единственным недостатком сервиса является его англоязычность.

Можно назвать и ещё несколько неплохих онлайн-конвертеров, поддерживающих работу с форматом WebP:

• Image.online-convert.com – имеет поддержку русского языка и поддерживает базовые параметры формата;
• Online-Converting.ru – ещё один универсальный русскоязычный конвертер;
• Webpconverter.net – специализированный англоязычный конвертер с возможностью кодирования без потерь.

Интеграция WebP с сайтом

Мы научились просматривать WebP-изображения, научились их создавать, теперь осталось добавить их на сайт. Для браузеров на базе движка Chromium, который изначально поддерживает WebP, добавление подобной графики не влечёт за собой каких-либо трудностей. Вы легко сможете использовать для этого привычный тег <img .../>, указав в параметре "src" ссылку на картинку в нужном формате:

Однако, подобный код будет не поддерживаться браузерами Mozilla Firefox, Internet Explorer и Edge, как минимум. Для реализации кроссбраузерной поддержки WebP существует, как минимум, три подхода:

1. Использование тегов HTML5 <picture> и <video>.
2. Использование механизма так называемых полифилов.
3. Использование файла .htaccess для отдачи нужных типов изображений.

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

Использование тегов HTML5

Если Вы создаёте новый сайт и хотите сделать его современным и с замахом на будущее, то хорошо бы в нём изначально заложить основу для поддержки WebP и, возможно, других передовых графических форматов, которые когда-то появятся. Для этого лучше всего воспользоваться тегом <picture>, который реализует универсальный контейнер для хранения и отдачи изображений браузеру. Рассмотрим простейший пример для нашего случая:

По факту тег <picture> может включать в себя одно изображение по умолчанию и неограниченное количество дополнительных его вариантов, которые отдаются при условии их поддержки браузером и прописываются в теге <source> в атрибуте "srcset". То есть, задача сводится к дополнению имеющейся разметки картинок обёрткой <picture> и добавлением внутрь неё <source> со ссылкой на WebP-вариант картинки.

Этот подход удобен для дальнейшей поддержки сайта, но подразумевает некоторую избыточность кода и может не поддерживаться старыми браузерами, которые не "понимают" HTML5. Поэтому решение не полностью кроссбраузерное.

Использование полифилов

Второй подход подразумевает использование средств CSS и/или JavaScript для отрисовки в заданной области нужного изображения. В переводе "polyfill" (сокр. от "polygon" – полигон, площадь и "fill" – "заливка") можно перевести словом "заполнение". Оно максимально точно отображает суть методики. Ведь для отображения картинки создаётся пустой блок нужных размеров, который средствами CSS заполняется изображением в поддерживаемом формате.

Чтобы CSS отдавал нужный тип изображений обычно используются различные JavaScript-библиотеки. Они проверяют поддержку браузером формата WebP и добавляют созданному блоку для отрисовки картинки нужные классы (либо меняют его структуру и атрибуты).

Реализаций полифила существует несколько. Одни из них (например, WebPJS) практически не требуют вмешательства в HTML-разметку, работая на базе контейнера <img>. Другие (вроде, Modernizr) требуют прописывания дополнительных классов и функций. Третьи же подразумевают внесение изменений в структуру и атрибуты тега изображений (например, Picturefill) для добавления к нему дополнительных параметров или блоков-обёрток (по принципу реализации вышеописанного <picture>).

Использование .htaccess

Последний вариант реализации отдачи различных форматов изображений подразумевает внесение специальных правил в служебный файл .htaccess. Вот их пример:

Код выше проверяет поддержку WebP текущим браузером, а затем все изображения на существование их WebP-вариантов. Если таковые есть, то они отдаются вместо JPG или PNG. Такая реализация не требует изменений кода разметки страницы, однако, создают большее количество запросов, то несколько замедляет загрузку страницы. Кроме того, знающие разработчики советуют дополнять данный вариант обёрткой <picture> с прописанным адресом WebP-изображения для более корректной отработки кода.

Выводы

Ещё каких-то полтора десятка лет назад формат PNG поддерживался только продвинутыми альтернативными браузерами и не работал в Internet Explorer. Сегодня же – это один из самых используемых контейнеров для графики в вебе (наряду с JPG). Поэтому вполне вероятно, что WebP со временем ждёт такой же успех. Тем более, что все предпосылки к этому уже имеются.

В связи с этим, я бы рекомендовал всем, кто хочет идти в ногу со временем, задуматься над использованием WebP в своих проектах. Этот формат позволит решить извечную проблему неоптимизированной графики и существенно ускорит Ваши сайты. А главное, исходя из популярности Chrome-браузеров, – WebP можно использовать уже здесь и сейчас, реализовав один из вариантов "заглушки" для браузеров не поддерживающих формат.

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.