Прозрачность хранится в дополнительном канале файла — альфа-канале, который для каждого пикселя указывает степень его видимости. PNG и WebP поддерживают этот канал, JPEG — нет. Если сохранить изображение с прозрачностью как JPEG, пустая область заполнится сплошным цветом, обычно белым или чёрным.
Изображение товара с прозрачным фоном можно разместить на любом цвете, баннере, коллаже или странице с тонированным фоном без белой рамки. Для главного изображения на маркетплейсе обычно требуется белый, а не прозрачный фон. Поэтому один и тот же вырезанный товар экспортируют дважды: с прозрачностью для дизайна и на белом фоне для карточки.
Полная, частичная и одноуровневая прозрачность
Альфа-канал указывает не только на видимые или пустые пиксели. Он хранит промежуточные уровни, и при отображении каждый пиксель смешивается с тем, что находится под ним, в соответствии со своим уровнем. Благодаря этому мягкий край вязаного рукава, стеклянной бутылки или тени естественно смотрится на светлой и тёмной странице, хотя файл один и тот же.
Некоторые форматы и настройки экспорта поддерживают только один уровень: пиксель либо виден, либо нет. Так работает GIF, как и некоторые упрощённые варианты PNG. Контур превращается в ступенчатую линию из полностью видимых пикселей, часто с каймой в цвет страницы, для которой он подготовлен, и хорошо выглядит только на таком фоне.
Что появляется после потери прозрачности
У пустого пикселя всё равно есть цветовое значение — альфа-канал лишь скрывает его. Если система удаляет альфа-канал, например при преобразовании загрузки в JPEG, скрытый цвет становится видимым. В зависимости от способа создания файла он может быть белым, чёрным или, в некоторых файлах, исходным фоном, который считали удалённым.
Альфа-канал теряется чаще, чем ожидают. Приложения для обмена сообщениями, снимки экрана, некоторые операции с буфером обмена и многие системы загрузки незаметно сводят изображение к плоскому фону. Перед использованием в макете файл, прошедший через любую из этих систем, стоит ещё раз проверить на цветном фоне.
Пустой холст вокруг товара
Прозрачные пиксели не видны, но учитываются в ширине и высоте файла. Товар на большом пустом холсте выглядит маленьким в плитке или макете, а холст, который с одной стороны шире, смещает товар от центра. Обе проблемы становятся заметны, только когда изображение стоит рядом с другими.
Помогают два подхода. Для дизайна холст обрезают по контуру товара, чтобы размеры файла точно соответствовали его содержимому. В сетке магазина каждый товар помещают на холст одной формы и с одинаковыми полями — тогда ряд плиток выравнивается без дополнительной настройки.
Прозрачный фон и связанные понятия
Обтравка- Обтравленное изображение — это товар, отделённый от фона, на который его затем можно поместить. Прозрачный фон означает, что за товаром пока ничего нет; если поместить тот же обтравленный объект на белый фон, он перестанет быть прозрачным.
- Контур обтравки
- Обтравочный контур — нарисованная граница, сохранённая в файле; фон скрывают только программы, которые умеют читать такие контуры. Прозрачность не требует специальной программы: пустая область входит в состав пикселей, и её край может быть мягким, тогда как контур всегда жёсткий.
- Чисто белый фон
- Чисто белый фон состоит из белых пикселей с максимальным значением и одинаково выглядит на любой странице. У прозрачного фона нет собственного цвета: он принимает цвет страницы за изображением, в том числе тёмный.
- Формат файла изображения
- Формат файла изображения — контейнер, в котором сохранено изображение. Лишь некоторые форматы поддерживают прозрачность, поэтому выбранный формат определяет, сохранится ли пустая область при экспорте.
Проверка прозрачного изображения товара
- На тёмном и светлом фоне по контуру товара нет ни светлой, ни тёмной каймы.
- Файл сохранён в формате с альфа-каналом, например PNG или WebP; на цветной странице вокруг товара не появляется белый прямоугольник.
- Мягкие и просвечивающие детали — бахрома, сетка, стекло или тень — пропускают цвет фона.
- Шахматный узор, который редактор показывает вместо пустой области, не попал в сохранённое изображение.
- Холст обрезан по товару либо имеет такую же форму и поля, как остальные изображения каталога.