Альфа-канал – это четвертое значение, хранящееся в пикселе и контролирующее его прозрачность, расположенный рядом со значениями красного, зеленого и синего, которые задают его цвет. Альфа работает в диапазоне от полностью невидимого до полностью сплошного, с каждым уровнем частичной прозрачности между ними. Это единственная причина, по которой логотип PNG может четко располагаться на любом фоне, а логотип JPG — нет, потому что У JPG вообще нет альфа-канала.. Прозрачность — это не обман зрения и не свойство всего изображения; это данные, прикрепленные к каждому отдельному пикселю. В этом руководстве объясняется, что такое альфа-канал, как он хранит сотни уровней прозрачности, математику композиции, которая объединяет прозрачные слои вместе, какие форматы его поддерживают и что с ним происходит, когда вы конвертируете изображение из одного формата в другой.

Что такое альфа-канал на самом деле

Каждое цифровое изображение представляет собой сетку пикселей, и каждый пиксель хранит описывающие его числа. В стандартном цветном изображении каждый пиксель содержит три числа: красный, зеленый и синий. Альфа-канал добавляет четвертое число, которое отвечает на другой вопрос: не какого цвета этот пиксель, а сколько из этого ты должен увидеть. Пиксель может быть ярко-красным и полностью сплошным, ярко-красным и наполовину прозрачным или ярко-красным и совершенно невидимым. Цвет остается одинаковым во всех трех случаях; меняется только альфа. Такое разделение цвета и непрозрачности делает возможной гибкую прозрачность.

Этот термин взят из работы по альфа-композиции, опубликованной Томасом Портером и Томом Даффом в 1984 году, в которой формализовано объединение изображений с прозрачностью. Их модель до сих пор является основой каждой современной графической программы, веб-браузера и игрового движка. Таким образом, альфа-канал — это не недавнее удобство, прикрученное к форматам изображений; это идея, созданная десятилетиями, которая незаметно питает практически все, что вы видите на экране.

RGBA: четвертое значение каждого прозрачного пикселя.

Когда пиксель обладает прозрачностью, он описывается четырьмя значениями вместо трех и записывается как RGBA: красный, зеленый, синий и альфа.. Вы видите это обозначение повсюду в дизайне и веб-работе. В CSS цвет типа rgba(255, 0, 0, 0,5) означает чистый красный цвет с 50-процентной непрозрачностью. В редакторе изображений та же идея отображается в виде ползунка непрозрачности на слое. A — это всегда значение непрозрачности, наложенное поверх цвета, а не смешанное с ним.

Важно отделять альфу от цвета. Если бы прозрачность была встроена в значения цвета, полупрозрачный красный пришлось бы хранить как более светлый розовый, и вы никогда не смогли бы восстановить исходный красный или аккуратно разместить его на темном фоне. Сохраняя непрозрачность как отдельный канал, формат сохраняет истинный цвет нетронутым и позволяет программному обеспечению решать, как смешать его с тем, что находится за ним. Именно эта гибкость является причиной того, что дизайнеры экспортируют ресурсы с альфа-каналом, а не предварительно смешивают их с фоном.

Как альфа хранит уровни прозрачности

Альфа-канал не просто сохраняется включенным или выключенным. В стандартном 8-битном изображении альфа сохраняется. 256 различных уровней от 0 до 255.. Значение 0 означает, что пиксель полностью прозрачен и невидим, 255 означает, что он полностью сплошной и непрозрачный, а каждое число между ними обеспечивает частичную прозрачность. Значение 128 делает пиксель прозрачным примерно наполовину, позволяя фону просвечивать с интенсивностью 50 процентов.

Благодаря этим 256 уровням прозрачность выглядит плавной, а не резкой. Тень постепенно исчезает, поскольку ее пиксели несут уменьшающиеся значения альфа к краю. Эффект стекла или дыма работает, потому что разные пиксели прозрачны в разной степени. Более продвинутые форматы продвигаются дальше: 16-битные альфа-каналы предлагают 65 536 уровней для профессионального композитинга, хотя 8-битный стандарт является стандартным для веб-изображений и покрывает все, что нужно глазу.

Альфа-композитинг: математика, которая смешивает слои

Когда прозрачный пиксель находится на фоне, программа должна определить окончательный цвет, который вы видите. Это делается с помощью простой формулы смешивания. Видимый результат равен цвет переднего плана, умноженный на его альфу, плюс цвет фона, умноженный на единицу, минус эта альфа. Проще говоря, пиксель, который на 70 процентов непрозрачен, передает 70 процентов своего собственного цвета и пропускает 30 процентов фона.

Запустите этот расчет для каждого пикселя, и вы получите чистую композицию: логотип, смешанный с фотографией, подпись, затененная поверх видео, меню, нарисованное поверх веб-страницы. Это происходит постоянно. Каждый раз, когда браузер рисует полупрозрачный элемент или игра отображает клуб дыма, он выполняет альфа-композицию миллионы раз в секунду. Альфа-канал предоставляет значение непрозрачности, необходимое формуле для каждого пикселя.

Сглаживание: почему альфа делает края гладкими

Одна из важнейших задач альфа-канала — производство чистые, сглаженные края. Рассмотрим изогнутый край круглого логотипа. Без прозрачности кривую пришлось бы строить из жестких квадратных пикселей, придавая ей неровный, ступенчатый вид. При использовании альфа-канала пиксели вдоль края устанавливаются на частичную прозрачность, постепенно смешивая форму с тем, что находится за ней.

Вот почему хорошо сделанный логотип PNG выглядит четким на белой, темной странице или фотографии. Краевые пиксели не окрашены в белый или какой-либо один цвет; они частично прозрачны, поэтому правильно сочетаются с любым фоном. Расправьте этот логотип на белый цвет, и те же самые краевые пиксели станут частично белыми. Поместите сплющенную версию на темный фон, и вы увидите уродливый бледный ореол, потому что плавный переход был привязан к неправильному цвету. Альфа-канал — это то, что обеспечивает адаптируемость края.

Прямая и предварительно умноженная альфа

Есть два способа хранить цвет и альфу вместе, и знание разницы предотвращает целый класс неприятных ошибок. В прямая альфа, значения цвета остаются нетронутыми, а альфа-канал сохраняется отдельно, именно так PNG сохраняет прозрачность. В предварительно умноженная альфа, значения цвета заранее умножаются на альфу, поэтому 50-процентный прозрачный красный уже сохраняется как более темный красный.

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

Какие форматы изображений поддерживают альфа-канал

Не каждый формат может сохранять прозрачность, и это практическая деталь, которая сбивает людей с толку во время конвертации:

PNG: полный 8-битный альфа-канал с 256 уровнями, стандарт прозрачной веб-графики.
ВебП: полный альфа-канал как в режиме без потерь, так и в режиме с потерями, при этом создавая файлы меньшего размера, чем PNG.
АВИФ: современный формат с альфа-поддержкой и сильным сжатием, расширяющаяся поддержка браузеров.
Гифка: только простая прозрачность, включаемая или выключенная, без частичных уровней, поэтому края выглядят грубыми.
TIFF и SVG: оба поддерживают прозрачность, используемую в печати и векторной работе соответственно.
JPG и BMP: вообще нет альфа-канала, поэтому они не могут хранить какую-либо прозрачность.

Вывод заключается в том, что PNG и WebP — ваш надежный выбор, когда прозрачность должна сохраниться, GIF работает только для резких вырезов, а JPG не подходит для чего-либо прозрачного.

Альфа-канал в Интернете и CSS

В Интернете альфа-канал появляется в двух местах: внутри файлов изображений и внутри значений цвета CSS. Прозрачный PNG или WebP содержит свою альфу в самом файле, поэтому он наслаивается на любой фон страницы. Затем CSS добавляет второй уровень управления с цветами rgba() и hsla() и свойством opacity, позволяя плавно затухать элементы, накладывать оттенки и создавать эффекты стекла вообще без редактирования изображений.

Благодаря этой комбинации современные интерфейсы выглядят многослойными и мягкими. В главном разделе можно наложить полупрозрачное темное наложение поверх фотографии, чтобы сделать белый текст читабельным, используя альфа-код CSS, в то время как логотип сверху использует альфа-изображение, чтобы четко размещаться на любом из них. Оба основаны на одной и той же базовой идее: каждый пиксель имеет свою собственную непрозрачность, а браузер объединяет все вместе в реальном времени.

Что происходит с альфа-каналом при конвертации в JPG

Поскольку у JPG нет альфа-канала, преобразование прозрачного изображения в JPG требует принятия решения: прозрачность должна быть заменена чем-то твердым. Конвертер выравнивает альфу, заполняя каждый прозрачный или полупрозрачный пиксель цветом фона, чаще всего белого цвета. Прозрачные области становятся сплошными, а гладкие края, которые основывались на частичном альфа-канале, фиксируются к этому цвету заливки.

Именно поэтому после преобразования логотип может оказаться в белом или черном ящике или иметь слабый ореол по краям. Информация, необходимая для смешивания ее с новым фоном, исчезла, потому что JPG негде было ее хранить. Если вам нужна прозрачность, чтобы выжить, ответ — сохранить PNG или вместо этого преобразовать его в WebP. Если вам действительно нужно плоское изображение, выбор правильного цвета заливки имеет значение. Наш преобразователь позволяет выбрать белый, черный или другой цвет заливки или экспортировать WebP, чтобы полностью сохранить альфа-канал, который руководство по прозрачному фону проходит.

Распространенные проблемы прозрачности и как их избежать

Большинство проблем с прозрачностью связано с выравниванием альфа-канала по отношению к неправильному цвету — этап, называемый матированием. Вот обычные виновники:

Белый или черный ящик: прозрачный PNG, конвертированный в JPG, заполняет фон сплошным цветом. Сопоставьте заливку с местом назначения или сохраните прозрачность.
Краевой ореол или бахрома: логотип, нанесенный на белый цвет, а затем помещенный на темный фон, имеет бледный контур. Повторно экспортируйте исходный прозрачный файл, придав ему правильный цвет, или сохраните его прозрачным.
Темная окантовка: часто прямое и предварительно умноженное альфа-несоответствие. Повторный экспорт с правильным альфа-типом исправляет проблему.
Потеряна прозрачность после редактирования: сглаживание слоев или сохранение в формате JPG отбрасывает альфу. Сохраните мастер-файл со слоями или в формате PNG.

Правило, которое предотвращает почти все это: определите фон, прежде чем выполнять сведение, и сохраните исходный файл, в котором все еще есть альфа-канал, чтобы вы могли аккуратно реэкспортировать его.

Часто задаваемые вопросы

Что такое альфа-канал?

Альфа-канал – это значение на пиксель, которое управляет прозрачностью, от полностью невидимого до полностью сплошного, хранится вместе с красным, зеленым и синим, которые задают цвет пикселя.

Что означает RGBA?

RGBA означает красный, зеленый, синий и альфа. Значение альфа устанавливает непрозрачность пикселя поверх его цвета, поэтому rgba(255, 0, 0, 0,5) имеет красный цвет при 50 процентах.

Почему PNG имеет прозрачность, а JPG — нет?

Потому что PNG включает альфа-канал, а JPG — нет.. Без места для хранения попиксельной непрозрачности JPG вообще не может сохранять прозрачность.

Сколько уровней прозрачности может хранить альфа-канал?

256 уровней в стандартном 8-битном изображении, от 0 для невидимого до 255 для сплошного. Профессиональная 16-битная альфа-версия предлагает 65 536 уровней для точной композиции.

Что происходит с альфа-каналом при конвертации в JPG?

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

Какие форматы изображений поддерживают альфа-канал?

PNG, WebP, AVIF, TIFF и SVG. поддержка альфа-канала, а PNG и WebP обеспечивают плавную частичную прозрачность. GIF имеет только включаемую или выключенную прозрачность, а JPG ее не имеет.

Что лучше: прямая альфа или предварительно умноженная альфа?

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

Как сохранить прозрачность при уменьшении размера файла?

Преобразовать в WebP вместо JPG. WebP сохраняет альфа-канал, уменьшая размер на 25–35 процентов, поэтому фон остается прозрачным, а файл становится светлее.