Весь Интернет восхваляет относительно новый формат WEBP, но действительно ли он так хорош и лучше проверенного временем JPG? Спойлер: Как оказалось, не всегда. В деталях сравним оба формата и разберемся какой из них лучше.

Не сжатие, а потеря

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

Если говорить о сжатии, различают понятия «сжатие без потерь» и «сжатие с потерями», и WEBP, в отличие от JPG еще умеет сжимать без потерь, при этом показывая лучшие результаты, даже чем png(формат изображений, реализующий только сжатие без потерь).

Техническое сравнение наиболее распространенных форматов

Сравнение популярных
графических форматов		 JPG WEBP PNG GIF
год выпуска 1991 2010 1996 1987
сжатие с потерями + + - +
сжатие без потерь - + + -
анимация - + - +
прозрачность - + + +
прогрессивность
(миниатюра для
предпросмотра)		 + - - -

В каких случаях JPG оказывается лучше WEBP или ложка дёгтя

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

Настоятельно рекомендую просматривать эту статью на большом экране. Все сравниваемые изображения в разных форматах примерно равны по размеру. JPG всегда слева, WEBP справа.

Первым идёт Микки Рурк с его фактурным лицом. Обратите внимание, сколько деталей теряет WEBP.

JPG, 40.4KB

WEBP, 41.8KB

JPG, 40.4KB {$alt}
WEBP, 41.8KB {$alt}
При равном размере изображения, JPG выигрывает у WEBP. Обратите внимание на детальность прорисовки пор кожи и правый зрачок
Скачать
Mickey Rourke.jpg
40.4 КБ Скачать
Mickey Rourke.webp
41.8 КБ

Светящийся логотип нашего блога на фоне темной бумаги. На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо.

JPG, 55.7KB

WEBP, 55.1KB

JPG, 55.7KB {$alt}
WEBP, 55.1KB {$alt}
Однозначный победа JPG над WEBP. Обратите внимание, как ухудшается качество свечения и темного фона изображения. Перчинка остаётся без видимых изменений.
Скачать
black pepper.jpg
55.7 КБ Скачать
black pepper.webp
55.1 КБ

Логотип блога на фоне обычного листа бумаги. Мелкие детали на белый фоне в WEBP тоже страдают.

JPG, 57.8KB

WEBP, 57.5KB

JPG, 57.8KB {$alt}
WEBP, 57.5KB {$alt}
При равном размере изображения, JPG одерживает победу над WEBP. Обратите внимание на количество деталей мягкого белого фона
Скачать
white pepper.jpg
57.9 КБ Скачать
white pepper.webp
57.5 КБ

Когда WEBP равен JPG по количеству деталей

Яблоки, 1280x800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.

JPG, 177KB

WEBP, 133KB

JPG, 177KB {$alt}
WEBP, 133KB {$alt}
Разница практически незаметна. WEBP намного меньше JPG по размеру

Заказ на море, 1280x800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.

JPG, 148KB

WEBP, 115KB

JPG, 148KB {$alt}
WEBP, 115KB {$alt}
Разница практически незаметна. WEBP побеждает

Осенний лес, 1280x800. Количество мелких деталей зашкаливает. Неожиданным образом, WEBP, хоть и немного, но проиграл JPG, размер файла WEBP оказался больше на 62КБ.

JPG, 438KB

WEBP, 500KB

JPG, 438KB {$alt}
WEBP, 500KB {$alt}
Впервые, WEBP оказался даже больше по размеру, чем JPG. Иллюстрация с огромным количеством мелких деталей.
Скачать
firest.jpg
438.4 КБ Скачать
forest.webp
500.9 КБ

Минимально-возможный уровень качества

При сильной степени сжатия сильные мягкие градиенты на JPG становятся пилообразными и появляются артефакты. Изображение в шапке этого статьи, так же относится к этому разделу.

Едва поверив глазам, видим, на это изображение WEBP понадобилось всего 1840 байт. Без приукрас, WEBP - король плавных градиентов при минимальном размере изображения.

JPG. 5.49KB

WEBP. 1.84KB

JPG, 5.49KB {$alt}
WEBP, 1.84KB {$alt}
JPG с треском проваливает тест, WEBP оказался меньше соперника почти в 3 раза. Мы сохранили изображение с минимально возможным качеством.

Выявленные плюсы и минусы форматов

Плюсы и минусы
WEPB и JPG		 JPG WEBP
чёткие границы вокруг границ появляются артефакты небольшое размытие границ
градиенты появляются острые грани отлично
нечеткие детали хорошо теряют фактуру
общая чёткость чётко небольшая «мыльность»
в высоком и низком диапазонах
общая чёткость
при сильном сжатии		 чётко, появляются артефакты изображенте «замылено»
в деталях, границы чёткие
прогрессивность грузится от размытого к четкому грузится сверху вниз
размер файла выше ниже на 30%
поддержка браузерами абсолютная >60%

Как мы видим из таблицы, WEBP не всегда лучше JPG. Тем не менее, чаще всего выигрывает по размеру и качеству, если не требуется показать мелкие фактурные детали.

Выводы

Совсем недавно я переводил этот блог на WEBP. Прочитайте с какими трудностями мне пришлось столкнуться. Я получил потерю мелких деталей при использовании WEBP, даже при степени сжатия 85%, и это, конечно, не радует, но размер при этом получается меньше примерно на 30%. Невооруженным взглядом заметить отсутствие мелких деталей сложно, зато хорошо заметно увеличение скорости загрузки страницы. Таким образом, объём главной страницы этого блога при использовании WEBP уменьшился с 1.8МБ, до 1.1МБ, что довольно ощутимо, скорость загрузки возросла почти в 2 раза. Сейчас средняя иллюстрация при использовании webp, в разрешении 1280x800, занимает примерно 120КБ.

Не смотря на некоторые недостатки, использование WEBP несёт ощутимые преимущества. А использовать его или нет, решать вам.