Прозрачный фон: почему JPG его теряет и что делать

Логотип, который побелел

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

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

Какие форматы поддерживают прозрачность

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

Сразу поясню обозначения: «1 бит» — два состояния на пиксель, прозрачен или нет; «8 бит» — 256 градусов прозрачности, от которых зависит плавность края. Три уточнения к таблице. Первое: у PNG есть старый палитровый вариант (PNG-8), и там прозрачность такая же однобитная, как у GIF, — полноценно умеют только полноцветные PNG-24 и PNG-32. Второе: альфа-слой в WebP хранится отдельно и без потерь, даже когда сам цвет сжат с потерями, — поэтому края остаются чистыми, а вес падает: простой логотип 512×512 в PNG весит условные 40–80 КБ, в WebP те же 15–30 КБ. Кстати, одна и та же картинка в PNG и JPG весит по-разному не из-за «качества», а из-за устройства форматов — прозрачность здесь лишь самая заметная часть различий. Третье: сверху в таблице не названы SVG и AVIF. В векторном SVG прозрачность естественна с самого начала; AVIF альфу тоже поддерживает, но инструменты работают с ним пока менее охотно, чем с WebP.

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

GIF-овская однобитная прозрачность — источник вечных жалоб на цветные ореолы вокруг объектов. Ореол появляется потому, что при сохранении пиксели края запоминают цвет старого фона: перенесли файл на другую подложку — и она «вылезла» вокруг объекта. Полутон на краю GIF выразить не может, подробнее — в FAQ.

Сколько стоит прозрачность в килобайтах

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

Вывод: для вырезанной графики переплата оправдана — прозрачность и есть смысл файла, и WebP позволяет платить за неё вдвое-втрое меньше, чем PNG. Для фотографий альфа превращается в чистый балласт: на прямоугольнике её всё равно никто не увидит, а вес растёт в разы. Из таблицы виден и второй ответ на вопрос «чем заменить тяжёлый PNG»: первым делом пробуйте WebP, а не JPG — JPG заставит отказаться от альфы, WebP — нет. Если вырез всё-таки тяжёлый, смотрите сначала на размер холста: логотип, отображающийся в 200 пикселей, не нужен файлом в 2000.

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

Способ 1. В редакторе

Photoshop: выделите объект («Выделение объектов», для волос и меха — доработка в «Выделение и маска»), добавьте маску слоя и сохраните результат в PNG. С версии 2020 есть ленивый путь — кнопка «Удалить фон» в панели «Свойства»: на простых снимках с однородным фоном она закрывает большинство случаев. Бесплатная альтернатива — GIMP: «Слой → Прозрачность → Добавить альфа-канал», дальше ластик или выделение. Это самый контролируемый вариант: края видно, огрехи правятся. Если фон однотонный, работает и старый приём — выделение по цвету («Цветовой диапазон» в Photoshop, «Выделить по цвету» в GIMP): клик по фону, инверсия, маска. На градиентных фонах он сыпется, но на студийном белом — самый быстрый путь. И главное правило финала: сохранять результат можно только в PNG или WebP — кнопка «Сохранить как JPG» перечеркнёт всю работу.

Сложность начинается на краях. Волосы, мех, дым, стекло и любые ажурные объекты автовыделение проходит грубо, по контуру остаётся светлый ореол. Лечится вручную: увеличьте масштаб до 100%, подберите радиус растушёвки в один-два пикселя и пройдитесь по проблемным участкам кистью по маске. Скучно, зато один раз — и логотип живёт годами.

Способ 2. Онлайн-вырезалки

remove.bg и десятки аналогов вырезают фон нейросетью за несколько секунд — для портретов и товарных фото работает на удивление прилично. Внутри модель сегментации, обученная на миллионах снимков, поэтому с людьми и предметами на ровном фоне она справляется лучше многих новичков. Ломается модель на прозрачных и отражающих предметах — стаканы, лампочки, бутылки, — на пушистых животных и на сложных пересечениях, когда объект сливается с фоном. Порядок работы до безобразия прост: загрузили — через несколько секунд скачали готовый вырез, без выделений и масок. У многих сервисов есть и кисть для ручной доводки прямо на сайте — она нужна в первую очередь для волос и полупрозрачных краёв.

Две честные оговорки. Первая: у нас такого инструмента нет — ConvertHub конвертирует уже готовые файлы, но фон не вырезает. Вторая: файл при этом уезжает на чужой сервер, и если снимок личный, стоит помнить о рисках — мы разбирали их в статье про приватность онлайн-инструментов. Бонусом учтите, что бесплатные тарифы обычно отдают маленькое разрешение, а полное — по подписке; результат в любом случае проверяйте на стопроцентном масштабе, а не на превью. И не относитесь к вырезалке как к чёрному ящику в важном проекте: у всех сервисов время от времени случаются ошибки сегментации, и незамеченный косяк уедет прямиком на главную страницу.

Способ 3. Вообще без прозрачности

Часто она и не нужна. Если логотип всегда живёт на белом сайте, достаточно JPG с белым фоном, который сливается с подложкой. Или положите объект на однотонный фон, совпадающий с местом использования: меньше вес, меньше возни с краями. Я сам сторонник этого пути ровно до момента, когда фон сайта решат сменить на тёмный — вот тогда без честного PNG с альфой не обойтись. Если такой поворот вероятен, исходник с прозрачностью держите при себе, даже если публикуете JPG. Живой пример: логотип в шапке сайта с фоном цвета #1e293b. Вместо выреза кладёте знак на прямоугольник того же цвета и сохраняете JPG — на странице не отличить, а вес как у обычной картинки. Тот же фокус работает для превью товаров: белый фон карточки — часть дизайна, и снимок с собственным белым фоном встанет туда без единой правки.

Почему PNG при конвертации в JPG белеет и как сохранить прозрачность

Механика простая. У JPG нет альфа-канала, поэтому конвертер обязан чем-то занять место прозрачных пикселей. Большинство заливает белым, некоторые библиотеки кладут чёрный — отсюда периодические жалобы «почему мой логотип оказался на чёрном квадрате». Оба поведения формально корректны: спецификация формата просто не спрашивает, что туда положить. Заметьте: белым фон становится не «сам по себе» — это выбор конкретной программы. Два конвертера на одном файле дадут разный результат, поэтому файл после конвертации стоит открыть и посмотреть, а не отправлять вслепую.

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

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

• оставить PNG и при необходимости ужать его без потерь — оптимизация, уменьшение палитры специализированными утилитами (на логотипах с плоскими цветами это почти не видно);
• сконвертировать в WebP — наш PNG в WebP делает это в браузере: альфа-канал сохраняется даже с lossy-сжатием, а файл выходит в разы легче;
• и только если прозрачность точно не нужна — PNG в JPG, заранее зная, что фон зальётся и это необратимо.

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

Про выбор между двумя основными форматами у нас есть отдельная статья — JPG против PNG; прозрачность там один из главных водоразделов.

Где прозрачность действительно нужна, а где нет

Обязательна она там, где изображение ложится на чужой фон: логотипы, иконки, стикеры, водяные знаки, вырезанные персонажи поверх видео, плашки субтитров в монтаже. Стикеры Telegram — кстати, тоже WebP с альфа-каналом, поэтому у них гладкие края на любой теме оформления. Второй случай — одна картинка на разных подложках: товар в каталоге, баннер, макет для печати на футболке. Каждый раз подкладывать фон вручную — путь к зоопарку из десяти версий одного файла. Самая частая бытовая ситуация — аватарки: сервис обрезает квадрат в круг, и без прозрачности по углам неизбежно торчит фон. Полупрозрачный водяной знак поверх фото без альфа-канала тоже не сделать в принципе — он либо сплошной, либо его нет. Правило, если сжать в одну строку: прозрачность нужна тогда, когда фон изображения — чужой.

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

Не нужна прозрачность обычным фотографиям. Фото для печати, фоны, обложки — это прямоугольники, им нечего показывать сквозь себя, а PNG с альфой для фотографии весит в разы больше JPG при том же качестве. Если «фото с прозрачным фоном» лежит на странице, где фон всё равно белый, — это просто потерянные мегабайты.

Отдельная развилка — логотип. Если есть векторный исходник, не мучайтесь с растром: SVG масштабируется под любой экран и весит копейки. Растровый вырез остаётся для случаев, когда вектора нет и уже не будет, а также для площадок, которые принимают только растр. Тот же приём работает в презентациях и документах: логотип на плашке фирменного цвета выглядит аккуратнее «парящего» выреза, если времени чистить края нет.

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

FAQ

Можно ли вернуть прозрачность у JPG?

Нет. Белый (или чёрный) фон стал частью пикселей, данных о том, где он был, в файле нет — разве что ценой повторного выреза, и результат будет зависеть от терпения: в редакторе или онлайн-вырезалкой из способа 2. И совет на будущее: пока исходник с прозрачностью жив — берегите его, всё, что ушло в JPG, обратно не приходит.

Почему после конвертации фон стал чёрным, а не белым?

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

Что выбрать для логотипа на сайте: PNG, WebP или SVG?

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

Почему у прозрачного GIF такие рваные края?

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

Как проверить, есть ли в файле прозрачность?

Откройте его в редакторе, который показывает прозрачные места шахматной сеткой, — GIMP, Photoshop, Figma. Тонкость в том, что картинка может выглядеть «без фона» на белой странице и при этом быть обычным JPG с белой заливкой: сетка сразу покажет, где настоящий альфа-канал, а где его имитация. Открывать файл просто в браузере бессмысленно: фон страницы почти всегда белый, и разницы между «прозрачный» и «залитый белым» вы не увидите. Если редактора под рукой нет, сработает таблица из начала статьи: JPG в ней единственный формат без прозрачности.