Pull to refresh
0
Rating

WebP vs BPG

.io corporate blog Image processing *
Уже очень давно самыми популярными форматами остаются: JPEG — для lossy сжатия, PNG — для сжатия без потерь и GIF для анимации. Эти форматы поддерживаются всеми браузерами и веб-приложениями.

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

Если измерить вес всех фотографий на странице — иногда можно получить сердечный приступ. Чем больше фотографий, тем больше весит страница и тем дольше она загружается.

Сейчас уже созданы несколько форматов, имеющих все шансы заменить и JPEG и GIF и PNG. Очень хорошие результаты показывают гугловский WebP и «свободный» BPG.
image

Оба формата основаны на сжатии ключевых кадров в видеокодеках. WebP работает по технологии VP8, а BPG — по HEVC (H.265).

Что такое BPG


BPG основан на технологии кодирования ключевых кадров видеокодека HEVC (H.265). Разбивает изображение на блоки разного размера, в зависимости от содержания. Поддерживает 14 бит/канал, прозрачность, метаданные, может сжимать с потерями и без. Здесь спецификация BPG на сайте разработчика.

Что такое WebP


Основан на технологии кодирования ключевых кадров видеокодека VP8 от Google. Как устроен WebP подробно описано здесь.

Поддерживает сжатие с потерями и без потерь, прозрачность, метаданные и анимацию и имеет возможность сжимать картинку без сжатия альфа-канала.

Сравнение BPG и WebP


Визуальное сравнение

Сравнение проводилось с помощью этого инструмента. Выборка: 10 картинок разного размера. Эксперимент показал, что BPG сжимает в среднем на 20% лучше, чем WebP. Хотя разброс довольно большой от 42% до 0%. Иногда разница составляла всего 1 kb, а иногда — гораздо больше. При этом визуальное качество картинки оставалось одинаковым.

Если перещелкать все картинки на этом ресурсе, то в режимах small, medium и large, мелкие детали на BPG выглядят даже четче. В режиме tiny — визуальное качество картинки лучше в формате WebP, а BPG размывает мелкие детали.

Поддержка браузерами

BPG — это opensource, но он построен на базе HEVC, который имеет множество связанных патентов. Владельцев этих патентов так много, что они даже создали группу под названием MPEG-LA. В эту группу входят Apple и Microsoft. Это объясняет почему они до сих пор не приняли формат WebP.

BPG не поддерживается ни одним браузером. Первым может стать Safari и возможно IE. WebP же распространяется по лицензии BSD и имеет поддержку в браузерах Chrome, Opera и веб-приложениях Android.
WebP BPG
Loss + +
Lossless + +
Meta + +
Alpha + +
Encode VP8 H.265
License BSD Opensource + patents
Support Chrome, Opera, Android -

Конвертация

Чтобы внедрить BPG на сайт, нужно подключить js декодер. Конвертировать из JPEG в BPG можно с помощью ImageMagick:

convert image.jpeg image.bpg

Из других форматов в WebP можно конвертировать с помощью специальной утилиты — cwebp и обратно — декомпрессор dwebp:

cwebp -q 85 -lossless input.png -o output.webp

dwebp input_file.webp -o output.png

Также утилита может выполнять простое редактирование картинки: кроп и ресайз.

Эта статья написана благодаря одному из комментариев к статье Устройство WebP.

Конспект


  1. BPG кодируется по технологии видеокодека H.265, а WebP по VP8.
  2. BPG сжимает лучше в среднем на 5-10%.
  3. WebP имеет частичную поддержку браузерами, BPG пока не поддерживается вовсе.
  4. Встроить BPG на сайт можно с помощью JS.
Tags:
Hubs:
Total votes 19: ↑14 and ↓5 +9
Views 17K
Comments Comments 29

Information

Website
onthe.io
Employees
11–30 employees
Registered