WEBP vs JPG, сравнение в примерах
Весь Интернет восхваляет относительно новый формат WEBP, но действительно ли он так хорош и лучше проверенного временем JPG? Спойлер: как оказалось, не всегда. В деталях сравним оба формата и разберёмся, какой из них лучше.
Не сжатие, а потеря
Оба формата призваны уменьшить размер исходного файла и используют для этого сжатие. Сжать в лексиконе большинства графических форматов означает потерять часть исходного, но при этом сохранить суть изображения. После сжатия изображение не является оригиналом, а скорее похоже на него. JPG и WEBP используют различные алгоритмы со своими плюсами и минусами.
Если говорить о сжатии, различают понятия «сжатие без потерь» и «сжатие с потерями», и WEBP, в отличие от JPG, ещё умеет сжимать без потерь, при этом показывая лучшие результаты даже чем PNG — формат изображений, реализующий только сжатие без потерь.
Техническое сравнение наиболее распространённых форматов
| Сравнение популярных графических форматов | JPG | WEBP | PNG | GIF |
|---|---|---|---|---|
| год выпуска | 1991 | 2010 | 1996 | 1987 |
| сжатие с потерями | + | + | − | + |
| сжатие без потерь | − | + | + | − |
| анимация | − | + | − | + |
| прозрачность | − | + | + | + |
| прогрессивность, миниатюра для предпросмотра | + | − | − | − |
В каких случаях JPG оказывается лучше WEBP, или ложка дёгтя
Я прочитал множество статей на похожие темы, но мне не доводилось видеть примеры, в которых JPG побеждает WEBP, а ведь не всё так хорошо с WEBP. Предчувствуя косые взгляды, в качестве доказательства я прикладываю изображения в указанных форматах.
Настоятельно рекомендую просматривать эту статью на большом экране. Все сравниваемые изображения в разных форматах примерно равны по размеру. JPG всегда слева, WEBP справа.
Первым идёт Микки Рурк с его фактурным лицом. Обратите внимание, сколько деталей теряет WEBP.
Скачать 40.4 КБmickey-rourke.jpg · Скачать 41.8 КБmickey-rourke.webp
Светящийся логотип нашего блога на фоне тёмной бумаги. На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо.
Скачать 55.7 КБblack-pepper.jpg · Скачать 55.1 КБblack-pepper.webp
Логотип блога на фоне обычного листа бумаги. Мелкие детали на белом фоне в WEBP тоже страдают.
Скачать 57.9 КБwhite-pepper.jpg · Скачать 57.5 КБwhite-pepper.webp
Когда WEBP равен JPG по количеству деталей
Яблоки, 1280×800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.
Закат на море, 1280×800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.
Осенний лес, 1280×800. Количество мелких деталей зашкаливает. Неожиданным образом WEBP, хоть и немного, но проиграл JPG: размер файла WEBP оказался больше на 62 КБ.
Скачать 438.4 КБforest.jpg · Скачать 500.9 КБforest.webp
Минимально возможный уровень качества
При сильной степени сжатия мягкие градиенты на JPG становятся пилообразными и появляются артефакты. Изображение в шапке этой статьи также относится к этому разделу.
Едва поверив глазам, видим: на это изображение WEBP понадобилось всего 1840 байт. Без прикрас, WEBP — король плавных градиентов при минимальном размере изображения.
Выявленные плюсы и минусы форматов
| Плюсы и минусы WEBP и JPG | JPG | WEBP |
|---|---|---|
| чёткие границы | вокруг границ появляются артефакты | небольшое размытие границ |
| градиенты | появляются острые грани | отлично |
| нечёткие детали | хорошо | теряют фактуру |
| общая чёткость | чётко | небольшая «мыльность» в высоком и низком диапазонах |
| общая чёткость при сильном сжатии | чётко, появляются артефакты | изображение «замылено» в деталях, границы чёткие |
| прогрессивность | грузится от размытого к чёткому | грузится сверху вниз |
| размер файла | выше | ниже на 30% |
| поддержка браузерами на момент публикации | абсолютная | более 60% |
Как мы видим из таблицы, WEBP не всегда лучше JPG. Тем не менее чаще всего он выигрывает по размеру и качеству, если не требуется показать мелкие фактурные детали.
Выводы
Совсем недавно я переводил этот блог на WEBP. Прочитайте, с какими трудностями мне пришлось столкнуться. Я получил потерю мелких деталей при использовании WEBP даже при степени сжатия 85%, и это, конечно, не радует, но размер при этом получается меньше примерно на 30%. Невооружённым взглядом заметить отсутствие мелких деталей сложно, зато хорошо заметно увеличение скорости загрузки страницы.
Таким образом, объём главной страницы этого блога при использовании WEBP уменьшился с 1.8 МБ до 1.1 МБ, что довольно ощутимо, скорость загрузки возросла почти в два раза. Сейчас средняя иллюстрация при использовании WEBP в разрешении 1280×800 занимает примерно 120 КБ.
Несмотря на некоторые недостатки, использование WEBP несёт ощутимые преимущества. А использовать его или нет — решать вам.
