AVIF: HDR, глубокий цвет, прозрачность и поддержка браузеров

HDR: что это и зачем картинке

HDR (High Dynamic Range, расширенный динамический диапазон) — это способность изображения хранить гораздо более широкий разброс яркости, чем привычное SDR-фото. В обычной картинке самый яркий пиксель — это просто «белый». В HDR белое небо, отблеск на металле и пламя свечи могут различаться по яркости в десятки раз, как в реальной жизни.

JPEG этого не умеет в принципе — он рассчитан на стандартный диапазон. AVIF же спроектирован вокруг видеотехнологий, где HDR давно норма, и наследует эту возможность. На HDR-дисплее фото в AVIF выглядит объёмным: солнце действительно слепит, а в глубоких тенях остаются детали, которые в JPEG просто «провалились» бы в чёрный.

PQ и HLG: две дороги к HDR

HDR в AVIF реализован через так называемые передаточные кривые из стандарта Rec. 2100. Их две, и каждая решает свою задачу:

• PQ (Perceptual Quantizer) — абсолютная кривая: задаёт конкретную яркость в нитах (вплоть до 1000 нит и выше). Используется в HDR10 и Dolby Vision, идеальна для кино и студийного контента.
• HLG (Hybrid Log-Gamma) — гибридная кривая, обратно совместимая с SDR-экранами. Разработана для вещания: один сигнал прилично выглядит и на старом, и на новом телевизоре.

Для пользователя разница невелика — оба варианта дают «настоящий HDR». Важно одно: AVIF понимает обе кривые, поэтому подходит и для студийной фотографии, и для контента со смартфона.

Глубокий цвет: 10 и 12 бит против бандинга

Глубина цвета — это число градаций яркости на каждый канал (красный, зелёный, синий). Звучит сухо, но именно от неё зависит, появятся ли уродливые полосы на плавных переходах.

8 бит JPEG дают всего 256 уровней на канал. На закатном небе или плавном градиенте этого не хватает — глаз видит ступеньки-полосы, это и называется бандингом. AVIF с его 10 или 12 битами даёт тысячи градаций, и переход становится по-настоящему плавным. Для фотографов и дизайнеров, работающих с тонкими тональными переходами, это решающий аргумент.

Широкий охват: BT.2020 и P3

Глубина цвета отвечает за плавность, а цветовой охват — за насыщенность. Охват — это границы того, какие цвета формат вообще способен показать. JPEG обычно ограничен старым пространством sRGB. AVIF поддерживает современные широкие охваты:

Широкий охват вроде Display P3 (стандарт современных телефонов и ноутбуков) или BT.2020 позволяет показать сочную зелень травы и насыщенный красный, которые в sRGB выглядели бы блёкло. На дисплее с широким охватом разница хорошо заметна.

Прозрачность и анимация

AVIF — не только про фото. Он наследует от контейнера два полезных бонуса:

• Прозрачность (альфа-канал). Как у PNG — можно делать логотипы и иконки с прозрачным фоном. Но при этом AVIF заметно легче PNG, что ценно для веба.
• Анимация. AVIF умеет хранить короткие анимированные последовательности и способен заменить громоздкий GIF при многократно меньшем весе.

Получается на удивление универсальный формат: одним AVIF можно закрыть задачи, для которых раньше требовались JPEG (фото), PNG (прозрачность) и GIF (анимация).

Поддержка браузеров: честная карта

Все эти возможности бесполезны, если их негде показать. Поэтому — честно о поддержке. Базовый AVIF открывается в большинстве современных браузеров:

Что будет на обычном экране

Резонный вопрос: а если у меня нет HDR-монитора? Ничего страшного. HDR-AVIF на обычном SDR-дисплее показывается через тон-маппинг — яркостный диапазон аккуратно сжимается в стандартный, чтобы фото не вышло пересвеченным. Вы увидите нормальную картинку, просто без «вау-эффекта» расширенного диапазона.

То же самое происходит при конвертации в форматы без HDR. Когда вы переводите HDR-AVIF в JPG, наш конвертер выполняет перцептивный тон-маппинг: высокие света мягко сжимаются, тени остаются на месте, и на выходе получается «правильно отэкспонированное» SDR-фото без выгоревших участков.

Если важна прозрачность — выбирайте AVIF в PNG, а для лёгкой веб-версии с альфа-каналом подойдёт AVIF в WebP. Полный список — на странице всех форматов.