Что такое прозрачный PNG? Простое объяснение альфа-канала

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

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

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

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

Именно третья категория делает прозрачные PNG такими полезными. Мягкие тени, сглаженные края текста, отдельные волоски и блики на стекле плавно вписываются в новый фон благодаря частичной прозрачности, а не выглядят жёстким рваным контуром.

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

Прозрачный PNG и JPG

JPG (JPEG) создан для фотографий и использует сжатие с потерями, чтобы файлы были небольшими. Альфа-канал он не поддерживает вообще, поэтому любой JPG - сплошной прямоугольник. Если сохранить изображение с прозрачным фоном в JPG, прозрачная область заполнится сплошным цветом, обычно белым или чёрным.

Третий вариант - WEBP, который поддерживает и прозрачность, и эффективное сжатие. Полное сравнение - в статье PNG, JPG или WEBP.

Когда использовать прозрачный PNG

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

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

Для полнокадровых фотографий без прозрачных областей обычно лучше подходит JPG или WEBP - файл будет намного меньше.

Где поддерживаются прозрачные PNG

Прозрачные PNG - один из самых широко поддерживаемых типов изображений. Все современные браузеры отображают их корректно, а дизайнерские и офисные программы - Photoshop, GIMP, Canva, Figma, PowerPoint, Word и Google Slides - учитывают альфа-канал при вставке файла. Большинство программ для вёрстки печатных изданий тоже их принимают. Слабое место - платформы, которые пережимают загрузки: некоторые соцсети, мессенджеры и старые CMS конвертируют изображения в JPG и незаметно заменяют прозрачную область сплошным цветом. Если прозрачность важна, проверьте загрузку на итоговой платформе перед публикацией и храните исходный PNG как мастер-копию, чтобы всегда можно было экспортировать свежую версию.

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

Здесь две части: удалить фон и правильно сохранить.

Из фотографии

Быстрее всего - с помощью ИИ-сервиса удаления фона. В Remove Photo Bg вы загружаете фото JPG, JPEG, PNG или WEBP (до 16 МБ), ИИ автоматически находит объект, и вы скачиваете PNG с прозрачным фоном. Это работает для людей, товаров, животных, автомобилей, логотипов, подписей и предметов. Подробная инструкция - в статье как сделать прозрачный фон у картинки.

Из дизайна

Если вы создаёте графику в Photoshop, GIMP, Illustrator, Figma или Canva, скройте или удалите фоновый слой и экспортируйте в PNG. В некоторых программах при экспорте нужно включить опцию «прозрачный фон».

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

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

1. Откройте его в редакторе или вставьте на слайд или в документ.
2. Положите его поверх насыщенного цветного фона.
3. Если вокруг объекта виден цвет, прозрачность настоящая. Если «шахматка» по-прежнему видна, она фальшивая.

Можно также посмотреть свойства файла: у настоящего прозрачного PNG есть альфа-канал (часто обозначается как RGBA или «32 бита»).

Частые проблемы с прозрачными PNG

Появляется белый или чёрный прямоугольник

Файл где-то по пути был конвертирован в JPG, или используемое приложение не поддерживает прозрачность. Некоторые мессенджеры и соцсети пережимают загрузки и удаляют альфа-канал.

Белая кайма по краям

Такой «ореол» появляется, когда объект вырезали с белого фона, а краевые пиксели всё ещё содержат немного белого. Обычно помогает более точная вырезка или лёгкое сужение края в редакторе.

Файл слишком большой

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

Края выглядят зубчатыми

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

Рекомендации по работе с прозрачными PNG

• Храните мастер-копию прозрачного PNG и делайте уменьшенные версии из неё.
• Обрезайте лишнее пустое пространство вокруг объекта, чтобы изображение предсказуемо выравнивалось в макетах.
• Проверяйте PNG на светлом и тёмном фоне перед публикацией.
• Называйте файлы понятно, например product-name-transparent.png, чтобы коллеги знали, какую версию использовать.

Создайте прозрачный PNG прямо сейчас

Прозрачный PNG - это просто PNG, в котором альфа-канал помечает часть пикселей как прозрачные, и объект аккуратно ложится на любой фон. Если у вас есть фото, которое нужно превратить в такой файл, загрузите его в Remove Photo Bg и скачайте готовый прозрачный PNG.