Прозрачный фон: почему 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; прозрачность там один из главных водоразделов.

Как отправить картинку с прозрачным фоном, чтобы фон остался

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

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

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

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

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

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

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

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

Логотип с прозрачным фоном не работает: 4 причины

Обратная ситуация: прозрачный файл на руках, а на месте использования фон всё равно появился. Прежде чем вырезать заново, проверьте четыре типовых причины. Первая и самая обидная: прозрачности в файле на самом деле нет — перед вами JPG с обычными белыми пикселями вместо фона; на белой странице незаметно, покажет шахматка в редакторе. Вторая: площадка не умеет альфа-канал — старые ридеры PDF и часть CMS выбрасывают прозрачность при отрисовке и генерации превью. Третья: файл по дороге пережал сервис — аватарки и вложения «как фото» перекодируются в JPG с заливкой. Четвёртая: прозрачность настоящая, но края хранят цвет старого белого фона — на тёмной подложке по контуру светится ореол.

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 в ней единственный формат без прозрачности.

Какой формат выбрать, чтобы отправить картинку с прозрачным фоном?

PNG — самый совместимый вариант: альфа-канал в нём понимают все современные сервисы и редакторы. WebP легче в два-три раза и прозрачность несёт так же, но отдельные программы и формы загрузки его не принимают — сомневаетесь, отправляйте PNG. Формат, впрочем, вторичен: картинка, ушедшая «как фото», будет пережата — решает способ отправки, файл или документ.

Почему в Telegram у PNG фон стал чёрным?

Потому что картинка ушла как «Фото»: такие вложения Telegram пережимает и перекодирует в JPG без альфа-канала, а освободившиеся пиксели заливаются чёрным. Сам PNG не пострадал — отправьте тот же файл через скрепку → «Файл», и получатель увидит его без фона.