Изображения транспортных средств — это сложный класс изображений для сжатия: фотографические градиенты на изогнутой краске, резкие обрезанные края и альфа-канал, который должен оставаться целым везде, где автомобиль накладывается на пользовательский фон. Общие советы по веб-изображениям в основном применимы, но именно в крайних случаях и живут изображения автомобилей. Вот решение по формату, принятое правильно один раз.
Три формата на практике
| PNG | WebP | AVIF | |
|---|---|---|---|
| Прозрачность | Без потерь альфа-канала | Альфа, с потерями или без потерь | Поддержка альфа-канала |
| Размер файла (типичный вырез) | Самый большой | Маленький | Самый маленький |
| Качество на краю | Идеально | Очень хорошее качество | Очень хорошее, но медленнее кодируется |
| Поддержка | Универсальный | Универсальный на практике | Современные браузеры |
| Лучше всего для | Печать, композитинговые конвейеры | Все в вебе | Критичен для пропускной способности, если обслуживается |
Где каждая выигрывает
PNG: формат для архивирования и композитинга
PNG оправдывает свои байты ровно дважды: когда изображение попадает в печатный или дизайнерский конвейер, который всё равно его пересожмёт, и когда последующее композирование требует математически чистого альфа-канала. Как формат доставки для веб-страниц это привычка, а не решение. Часто это в пять раз больше передачи без видимой разницы.
WebP: по умолчанию
WebP с альфа-каналом при разумном качестве — это рабочая лошадка: прозрачные вырезки при минимальном весе PNG, универсальная поддержка браузеров и качество, контролируемое по запросу. Для сетки объявлений или галереи VDP format=webp с явным width — это вся политика.
AVIF: острее карандаш, тот же рисунок
AVIF сжимает сильнее, чем WebP, при эквивалентном качестве, и его поддержка теперь хорошая. Честный вопрос — это маржинальная выгода: на правильно подогнанных вырезках автомобилей шаг от PNG к WebP драматичен, а шаг от WebP к AVIF — это небольшая доработка. Проверьте /api/options для форматов, которые в настоящее время обслуживаются, прежде чем строить конвейер вокруг одного.
Ошибки, которые перевешивают выбор формата
- Отображение изображений полного разрешения в маленьких слотах. Существуют параметры ширины, используйте их
- Отправка прозрачности PNG на страницу, которая всё равно размещает автомобиль на белом фоне
- Пересжатие уже сжатого изображения в вашем конвейере, накопление артефактов на обрезанных краях
- Игнорирование параметров качества: рендеринг транспортных средств хорошо переносит сжатие, а настройка «качество по умолчанию для всего» оставляет на столе легкие байты
Выбор формата стоит одного собрания. Дисциплина размеров стоит одного собрания в квартал, навсегда.
Пример
Возьмите сетку объявлений с 48 карточками автомобилей. В виде полноразмерных PNG страницы отправляет десятки мегабайт изображений, которые пользователи мобильных устройств на сотовых соединениях просто не загружают до конца. Та же сетка с шириной 600 пикселей в WebP обычно весит на два порядка меньше на одно изображение. Ничего в дизайне не изменилось, и сетка перешла от нерабочего состояния к моментальному на том соединении, которое у большинства покупателей на самом деле есть.
Сопоставьте выбор формата с srcset, и браузер сделает остальную работу: маленькие экраны загружают маленький вариант, ретина-экраны — чёткий, и никто не скачивает пиксели, которые не видит. Поскольку размеры — это параметры запроса, вся настройка для адаптивного дизайна — это три URL, отличающиеся одной цифрой.
Что такое прозрачность и варианты теней, и как они сочетаются, описано в разделе тени, отражения и прозрачность; параметры доставки находятся в документации API
