Прозрачность в PNG: как работает альфа-канал и как сделать прозрачный фон

Что такое альфа-канал простыми словами

Любое цветное изображение на экране состоит из трёх каналов: красного, зелёного и синего (RGB). Смешивая их в разных пропорциях, монитор показывает миллионы оттенков. Но эти три канала отвечают только за цвет — они ничего не знают о том, должен ли пиксель быть видимым.

За видимость отвечает альфа-канал — четвёртый канал, который PNG добавляет к RGB (поэтому полноцветный PNG называют RGBA). Альфа хранит для каждого пикселя одно число — степень непрозрачности:

• 0 — пиксель полностью прозрачный, его как будто нет;
• 255 — пиксель полностью непрозрачный, обычный цвет;
• что-то между — полупрозрачность: чем меньше число, тем сильнее сквозь пиксель просвечивает фон.

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

Почему «шахматка» — это и есть прозрачность

Откройте прозрачный PNG в Photoshop, GIMP, Figma или любом онлайн-редакторе — и под картинкой вы увидите серо-белые клетки. Это сбивает с толку новичков: «откуда в моём файле взялась эта сетка и как её убрать?»

Спокойно: в файле её нет. Монитор физически не способен показать «пустоту» — ему нужно закрасить каждую точку каким-то цветом. Поэтому редакторы договорились рисовать на прозрачных местах нейтральную шахматную текстуру: так сразу видно, где у картинки есть пиксели, а где — дырки. Это просто визуальная подсказка, такой же служебный элемент, как линейки или направляющие.

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

PNG-8 против PNG-32: рваные края и плавные

PNG умеет хранить прозрачность двумя разными способами, и от выбора напрямую зависит, будут ли края вашего объекта гладкими или похожими на лесенку.

PNG-8 (индексный) хранит не более 256 цветов в палитре, а прозрачность — чаще всего 1-битную: пиксель может быть либо полностью видимым, либо полностью прозрачным. Полутонов нет. Для резких геометрических иконок без сглаживания этого хватает, но на любой диагонали или округлости край превращается в «лесенку» (aliasing): сглаживающие полупрозрачные пиксели просто негде сохранить.

PNG-24/32 — это полноцветное изображение с настоящим 8-битным альфа-каналом: 256 уровней прозрачности на каждый пиксель. (PNG-24 — это RGB без альфы; как только добавляется альфа-канал, на пиксель уходит 32 бита, отсюда и название PNG-32.) Именно он даёт плавные сглаженные края, мягкие тени и аккуратную полупрозрачность.

Как сделать прозрачный фон в PNG

Главное правило: сначала уберите фон, потом сохраните в PNG. Сохранение в PNG само по себе не делает фон прозрачным — оно лишь сохраняет ту прозрачность, которую вы создали в редакторе. Если фон был белым, в PNG он и останется белым.

Если же исходник у вас в формате без прозрачности (например, JPG), фон сначала нужно вырезать вручную: сама по себе конвертация прозрачность не «придумает». Зато конвертация в PNG создаст контейнер, в котором эту прозрачность уже можно хранить.

Тёмная кайма, потеря альфы и другие беды

Большинство проблем с прозрачностью сводятся к двум вещам: как хранится цвет под прозрачными пикселями и умеет ли программа вообще работать с альфой.

Бахрома и тёмное/светлое гало по краям

Самая частая жалоба — тонкая тёмная (или белая) каёмка вокруг вырезанного объекта. Причина в полупрозрачных краевых пикселях. Их цвет получается смешением объекта и того фона, на котором его вырезали или которым «подложили» (этот цвет называют matte). Если объект вырезали с белого фона, а потом поставили на тёмный — по краю проступит светлый ореол, и наоборот.

Сюда же относится путаница с премультипликацией (premultiplied alpha). Это способ хранения, при котором цвет пикселя заранее умножен на его прозрачность. Если одна программа сохранила картинку как premultiplied, а другая прочитала её как обычную (straight) альфу — по краям появляется характерное тёмное гало. Лекарство: вырезать аккуратно по маске, чистить край и, если есть выбор, экспортировать со straight-альфой либо задавать matte под цвет будущего фона.

Альфа «слетела» при конвертации

Иногда прозрачность теряется не из-за JPG, а из-за неудачного экспорта: картинку случайно сохранили как PNG-8 с 1-битной альфой, или редактор «свёл» слои на белый фон. Признак — вместо мягких краёв резкая лесенка либо внезапный белый прямоугольник. Решение простое: пересохранить из исходника в PNG-32, не сводя прозрачный слой.

Как проверить и конвертировать прозрачность

Прежде чем отдавать PNG в работу, полезно убедиться, что прозрачность действительно есть и она чистая. Сделать это можно за минуту.

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

Где без прозрачности не обойтись

Альфа-канал PNG — это незаметный, но вездесущий инструмент. Вот где он решает всё:

• Логотипы. Один прозрачный PNG ложится и на белую визитку, и на тёмный сайт, и поверх фотографии — без белого прямоугольника вокруг.
• Наклейки, стикеры и эмодзи. Произвольная форма с гладким краем существует только благодаря альфа-каналу.
• Интерфейсы (UI). Иконки, кнопки, тени и закругления в приложениях держатся на полупрозрачности PNG.
• Коллажи и наложения. Вырезанные объекты, водяные знаки, рамки — всё, что должно лежать поверх другого изображения.

Общая логика простая: как только картинку нужно положить поверх чего-то неизвестного заранее, ей нужна прозрачность — а значит, PNG (или WebP) с честным альфа-каналом.

Запомнить всё это можно одной фразой: PNG хранит прозрачность, JPG — нет. Дальше дело за деталями — типом альфы и чистотой краёв, с которыми вы теперь умеете обращаться.