--- title: 'WebP: пора отправить ваш сайт в XXI век' url: 'https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek' markdown: 'https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek.md' date: '2021-05-06' description: 'Интернет - безумно интересное, но очень странное место, в котором мы прикасаемся, сами того не замечая, то к будущему, то к далёкому прошлому. Высокие технологии, находящиеся на самом bleeding edge науки соседствуют здесь с окаменелыми трилобитами середины прошлого века. И тем не менее - оно работа…' taxonomy: tag: - zhitie - tech category: - articles --- # WebP: пора отправить ваш сайт в XXI век [Тексты](https://ky0uraku.xyz/blog) / 6 мая 2021 [zhitie](https://ky0uraku.xyz/blog/tag:zhitie) [tech](https://ky0uraku.xyz/blog/tag:tech) Интернет - безумно интересное, но очень странное место, в котором мы прикасаемся, сами того не замечая, то к будущему, то к далёкому прошлому. Высокие технологии, находящиеся на самом bleeding edge науки соседствуют здесь с окаменелыми трилобитами середины прошлого века. И тем не менее - оно работает! Несмотря на свою децентрализованную и гибкую суть, по-настоящему глобальные изменения всемирная паутина принимает далеко не всегда охотно и благосклонно. Особенно хорошо это заметно, конечно же, на самых низких уровнях - железа и наиболее близких к нему протоколов: Ethernet, IP, TCP/UDP... Трогать что-либо там - практически невозможно, как невозможно перебрать двигатель автомобиля на полном ходу. Но и гораздо более близкие к пользователю технологии упрямо сопротивляются наступлению светлого будущего. ### В этот раз я хочу поговорить о медиа-ресурсах - картинках, аудио и видео. Кажется, что интернет меняется с огромной скоростью, вместе с потоками информации, передаваемой через него. Но приглядевшись внимательнее, мы увидим, что "киты", на которых зиждется всё это великолепие, все покрыты старческими морщинами и плывут, потрясая длинными седыми бородами под звонкий треск артритных суставов. Встречайте: - GIF - 1989 - JPEG - 1992 - PNG - 1996 - MP3 - 1993 - AVC, также известный как H.264 - 2003 ### Чувствуете, как запахло нафталином? Разумеется, нельзя сказать, что современный интернет безропотно продолжает нести у себя на горбу эти мамонтячьи технологии, никак не пытаясь от них избавиться. Дело обстоит скорее совсем наоборот - но тут нас подстерегает совсем другая опасность, отлично выраженная в известнейшем комиксе xkcd: [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/11.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/11.webp) В самом деле - если начать изыскания и погуглить альтернативы всем этим форматам из прошлого века, то легко находится целая пачка более новых вариантов, один другого краше. Нюанс заключается в общедоступности, а именно - поддержке со стороны операционных систем и особенно браузеров. Усугубляет ситуацию склонность "Корпорации Добра" периодически вставать в третью позицию и заявлять нечто вроде - "задолбали вы со своим старьём, мы сделаем свою `%название_технологии%`, с блэкджеком и оптимизациями". А поскольку Chrome занимает больше половины рынка браузеров, остальным игрокам приходится грустно вздыхать - и либо добавлять то же самое у себя, либо вставать в достойную уважения, но заведомо невыгодную позу. ### При переезде на собственный standalone-сайт мне захотелось провести хотя бы частичное освобождение от оков прошлого века, перейдя на более современные технологии. Первым - и наиболее логичным кандидатом стали картинки. Их довольно много, они очень разные - как по размеру, так и по назначению - небольшие миниатюры, среднего размера изображения, используемые в текстах, полноразмерные оригиналы, открываемые по клику, анимированные гифки... Всё это хотелось привести к какому-то общему знаменателю и одновременно, если получится, уменьшить занимаемый на диске объём. Какие методы обычно применяются (или применялись в прошлом) для хранения изображений на сайте? Тут никаких секретов нет: для мелких картинок с небольшим количеством цветов (например, элементов интерфейса), а также анимации - GIF; для обычных растровых изображений - JPEG; в случае, когда недопустима потеря качества - PNG. Все эти форматы неплохо справляются со своими функциями, но, в том числе из-за древности времён создания, каждый из них обладает и существенными недостатками: - GIF - поддерживает максимум 256 цветов, и при использовании в анимированных изображениях это становится "бутылочным горлышком", вкупе с отсутствием алгоритмов оптимизации кадров. Анимированные гифки часто получаются страшными и огромными по размеру. - JPEG - сильно зависит от настроек сжатия, при использовании стандартного коэффициента сжатия 80 хорошо видны искажения, выше - быстро растёт размер получаемого файла. - PNG - хорошо подходит для экспорта из lossless-исходников, например из графического редактора, но в интернете часто используется для перекодировки из уже сжатых с потерями файлов - а в этом случае не даёт никакого выигрыша перед JPEG. Размер файла сильно зависит от типа изображения - хорошо сжимает картинки с большими областями одинакового цвета, например, мультипликацию или векторный арт. Однако, существует формат, сочетающий в себе все достоинства предыдущих участников: возможность кодирования как с потерей, так и без потери качества, поддержку прозрачности и анимации, и, в качестве приятного бонуса - меньший размер файла при, как минимум, не худшем качестве изображения. ### Встречайте, [WebP](https://ru.wikipedia.org/wiki/WebP)! Это, по иронии судьбы, то самое "детище третьей позиции Гугла", представленное в 2010 году и являющееся близким родственником видеокодека [VP8](https://ru.wikipedia.org/wiki/VP8). WebP совершенно бесплатен и открыт, что, может быть, и не так важно конечному пользователю - но довольно приятно для производителей оборудования и ПО, которым не нужно для поддержки этого формата платить никаких [отчислений](https://ru.wikipedia.org/wiki/%D0%A0%D0%BE%D1%8F%D0%BB%D1%82%D0%B8). Но просто сказать - "теперь все картинки будут в webp!" для меня недостаточно, нужно какое-то более осязаемое подтверждение его превосходства. Иначе говоря - я решил провести некоторые натурные изыскания. Изыскания, совершенно не претендующие на академическую полноту и точность (научные работы по кодированию изображений - это обычно целая гора высшей математики), а скорее должные в наглядной форме показать принципиальные отличия. В том числе для того, чтобы я мог поделиться информацией с вами, уважаемые читатели. На уровне домохозяйки, то есть - владельца небольшого сайтика. [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/1-1k.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/1-1k.webp) [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/2-1k.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/2-1k.webp) [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/3-1k.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/3-1k.webp) [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/4-1k.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/4-1k.webp) [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/5-1k.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/5-1k.webp) [ Previous ](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/#carouselExampleControls1) [ Next ](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/#carouselExampleControls1) Для своих тестов я нашёл на просторах интернета пять здоровенных (3840х2160) и, на мой пристальный взгляд, максимально качественных PNG-изображений разного типа - кадр из фильма, векторный рисунок, рисунок кистью, 3D-сцену и нечто среднее. Здоровые картинки я с помощью графического пакета `imagemagick` уменьшил до 1000px по ширине (стандартный размер изображения в моём блоге), а также - до эскиза шириной в 400px, получив таким образом 15 файлов, соответствующих наиболее распространённым профилям использования изображений на сайтах - эскиз в списке материалов, средний размер непосредственно в тексте, большой исходник - по клику на картинку. Эти изображения я обработал утилитой `optipng`, которая без какой-либо потери качества оптимизирует параметры сжатия - дабы убедиться, что из формата PNG "выжато" всё возможное. Получившиеся на этом этапе картинки назовём оригиналами и основные расчёты будет проводить, сравнивая с ними. Все участвующие в доморощенном эксперименте изображения, кстати, можно скачать [по ссылке](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/webp-test.zip). | bytes / codec | PNG | JPG-100 | WEBP-lossless | JPG-90 | WEBP-90 | JPG-80 | WEBP-default | |---|---|---|---|---|---|---|---| | 1-4k-orig.png | 8183889 | 5948440 | 6141218 | 1533501 | 728470 | 778422 | 245354 | | 2-4k-orig.png | 9280094 | 6256244 | 6174494 | 1200950 | 466356 | 576420 | 223058 | | 3-4k-orig.png | 4902046 | 3504954 | 3158200 | 946374 | 408496 | 513311 | 196664 | | 4-4k-orig.png | 14937573 | 12170137 | 12213642 | 3414340 | 2170026 | 1682660 | 1047936 | | 5-4k-orig.png | 10799384 | 9076438 | 9563128 | 1946884 | 957728 | 987032 | 430262 | | 1-1k.png | 685317 | 553781 | 571616 | 129015 | 64152 | 64082 | 26234 | | 2-1k.png | 660169 | 557745 | 466888 | 163654 | 84378 | 85938 | 43732 | | 3-1k.png | 501204 | 425930 | 361790 | 118387 | 59694 | 64473 | 29154 | | 4-1k.png | 1050204 | 988547 | 882538 | 315808 | 190264 | 147376 | 102714 | | 5-1k.png | 958353 | 800036 | 759624 | 221770 | 154036 | 113895 | 72744 | | 1-400.png | 117036 | 99764 | 95858 | 26600 | 15274 | 14966 | 7890 | | 2-400.png | 145627 | 128657 | 101606 | 42362 | 25210 | 22633 | 13882 | | 3-400.png | 107909 | 91554 | 78768 | 26273 | 15014 | 14457 | 7754 | | 4-400.png | 177572 | 173124 | 154350 | 59949 | 36048 | 28338 | 21394 | | 5-400.png | 170102 | 144030 | 133820 | 43049 | 31684 | 22309 | 15486 | Немного поразмыслив, я решил организовать сравнение следующим образом: разделив на три условных этапа, каждый из которых представляет собой разные варианты сжатия: 1. Lossless - с минимальным или полным (если таковое поддерживает формат) отсутствием потерь. В этом случае мы сравниваем оригинальные PNG, JPEG с качеством 100 и WebP в режиме lossless. 2. Quality - высококачественный lossy-режим, практически неотличимый на глаз от оригинала. JPEG-90 сравнивается с WebP-90. 3. Default - стандартный режим, представляющий собой хорошее качество изображения и высокую степерь сжатия, дефолтные параметры энкодеров. JPEG-80 сравнивается с WebP-75. Нужно заметить, что, например, JPEG с качеством 100 (по понятным причинам) не используется в реальной жизни примерно никогда - и я оставил его исключительно в качестве "спарринг-партнёра" WebP. Приведённые названия режимов довольно условны - тот же Quality вполне может использоваться для полноразмерных изображений наряду с PNG, а визуальную разницу между WebP-90 и WebP-75 на картинках среднего или небольшого размера вы, скорее всего, вообще не заметите. Итак, я взял все пятнадцать картинок - и поочерёдно закодировал их с соответствующими параметрами. Вот, что получилось в результате: [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/10.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/10.webp) Таблица, демонстрирующая уменьшение размера файлов относительно PNG. Хорошо видно, что даже lossless-режим даёт относительно небольшое, но стабильное уменьшение размера картинки, в среднем 20-25%. Что это значит на практике? А то, что при экспорте высококачественных изображений (например, из Фотошопа или RAW-формата фотокамер) имеет смысл делать это не в PNG, а сразу в Lossless-WebP - получите то же самое, но с экономией места на диске. Однако, подавляющее большинство отображаемых на веб-сайтах картинок вовсе не требует сжатия без потерь - чаще всего их геометрические размеры не настолько велики, чтобы человеческий глаз мог заметить даже достаточно сильные искажения, а в случае даже с JPEG-90 они не так уж и велики, не говоря уж о WebP-90. ### С другой стороны - вы только посмотрите на степень сжатия! Даже старичок JPEG показывает 70-80% экономии относительно PNG, а WebP, при "более лучшем" качестве картинки идёт ещё дальше - показывая от 80% у небольших картинок до 90% у полноразмерных. Иначе говоря - размер получившихся файлов в 5-10 раз меньше оригиналов. Можно было бы на этом закончить - но мятежная душа исследователя погнала меня за буйки. [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/12.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/12.webp) Посмотрим, что получится при настройках WebP по умолчанию. Аналогом такого режима у JPEG обычно считается качество 80, при котором начинают чётко проявляться артефакты кодирования - то есть для крупных изображений это чересчур, но оно вполне подойдёт для, например, эскизов предпросмотра и других небольших картинок, а также в других случаях, когда скорость загрузки существенно важнее безупречного качества. [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/14.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/14.webp) Тренд, заключающийся в том, что большие картинки жмутся лучше мелких сохранился у всех кодеков, но на 85-90% сжатия у JPEG, WebP ответил поразительными цифрами от 90 до 97%, в последнем случае, на минуточку, сжав оригинальный кадр из "Матрицы" аж в тридцать три (!) раза без особого, на мой взгляд, ухудшения качества. ### Подводя промежуточный итог - WebP во всех случаях на голову лучше и JPEG, и PNG. В режиме Lossless этого практически не видно, но во всех остальных случаях, если сравнивать только JPEG vs WebP, размер файла последнего в среднем в полтора-два раза меньше: [![](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/13.webp)](https://ky0uraku.xyz/blog/20210506-webp-pora-otpravit-vash-sayt-v-xxi-vek/13.webp) Перейдём к следующей части исследования, относящейся к анимированным изображениям. Это достаточно узкая ниша, повсеместно вытесняемая сейчас HTML5-вариантом (тэг `