Уже очень давно самыми популярными форматами остаются: JPEG — для lossy сжатия, PNG — для сжатия без потерь и GIF для анимации. Эти форматы поддерживаются всеми браузерами и веб-приложениями.
Но чем больше картинок заливается в интернет, тем острее ощущается потребность в лучшем формате. Для экономии места на сервере, для ускорения загрузки страницы и для экономии времени дизайнера.
Если измерить вес всех фотографий на странице — иногда можно получить сердечный приступ. Чем больше фотографий, тем больше весит страница и тем дольше она загружается.
Сейчас уже созданы несколько форматов, имеющих все шансы заменить и JPEG и GIF и PNG. Очень хорошие результаты показывают гугловский WebP и «свободный» BPG.
Оба формата основаны на сжатии ключевых кадров в видеокодеках. WebP работает по технологии VP8, а BPG — по HEVC (H.265).
BPG основан на технологии кодирования ключевых кадров видеокодека HEVC (H.265). Разбивает изображение на блоки разного размера, в зависимости от содержания. Поддерживает 14 бит/канал, прозрачность, метаданные, может сжимать с потерями и без. Здесь спецификация BPG на сайте разработчика.
Основан на технологии кодирования ключевых кадров видеокодека VP8 от Google. Как устроен 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.
Чтобы внедрить BPG на сайт, нужно подключить js декодер. Конвертировать из JPEG в BPG можно с помощью ImageMagick:
Из других форматов в WebP можно конвертировать с помощью специальной утилиты — cwebp и обратно — декомпрессор dwebp:
Также утилита может выполнять простое редактирование картинки: кроп и ресайз.
Эта статья написана благодаря одному из комментариев к статье Устройство WebP.
Но чем больше картинок заливается в интернет, тем острее ощущается потребность в лучшем формате. Для экономии места на сервере, для ускорения загрузки страницы и для экономии времени дизайнера.
Если измерить вес всех фотографий на странице — иногда можно получить сердечный приступ. Чем больше фотографий, тем больше весит страница и тем дольше она загружается.
Сейчас уже созданы несколько форматов, имеющих все шансы заменить и JPEG и GIF и PNG. Очень хорошие результаты показывают гугловский WebP и «свободный» BPG.
Оба формата основаны на сжатии ключевых кадров в видеокодеках. 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.
Конспект
- BPG кодируется по технологии видеокодека H.265, а WebP по VP8.
- BPG сжимает лучше в среднем на 5-10%.
- WebP имеет частичную поддержку браузерами, BPG пока не поддерживается вовсе.
- Встроить BPG на сайт можно с помощью JS.
