После PNG → JPEG появился чёрный фон: как задать подложку
Если после преобразования PNG в JPEG появился чёрный фон, проверьте, как программа убирает прозрачность. Для непрозрачного результата нужно заранее выбрать подложку и совместить с ней изображение. Простое удаление альфа-канала эту задачу не заменяет. Если фон должен оставаться прозрачным, JPEG для такого результата не подходит.
Получателю нужен файл с фоном или без него?
Начните с назначения картинки. Логотип для размещения на разных цветах и карточка товара с белым прямоугольником требуют разных результатов. Слова «сделать JPG» ещё не описывают внешний вид: нужно договориться, какой цвет заполняет свободное пространство и что произойдёт с тенью вокруг объекта.
Adobe подтверждает различие форматов: PNG поддерживает прозрачность, JPEG её не сохраняет. Поэтому требование «JPEG без фона» следует уточнить до разработки конвертации. Увеличение качества JPEG не добавит ему отсутствующую возможность.
Шахматная сетка не является частью изображения
Редактор может показывать прозрачную область поверх шахматной сетки. Это способ предпросмотра, а не обещание, что другой просмотрщик использует такой же фон. Если вместо сетки открылась чёрная область, сначала выясните: она уже записана в выходной файл или её рисует текущая программа просмотра.
Сравнивайте один и тот же исходник и фактически скачанный результат. В веб-приложении с обработкой изображений миниатюра, большой просмотр и экспорт могут проходить разными путями. Правильная миниатюра не доказывает, что экспорт получил те же настройки подложки.
В Sharp flatten и removeAlpha решают разные задачи
По документации Sharp, flatten совмещает прозрачное изображение с выбранным фоном и затем убирает альфа-канал. Если фон для этой операции не указан, используется чёрный. Для белой подложки её нужно задать явно, например через значение background: «#ffffff», а не полагаться на цвет страницы.
removeAlpha удаляет альфа-канал. Это другое действие, которое не задаёт согласованную композицию на белом или фирменном фоне. Не подменяйте им flatten только потому, что обе операции в итоге дают изображение без прозрачности. Сначала определите нужный внешний вид, затем выбирайте обработку.
Таблица решений для загрузки и экспорта
Ниже собственная матрица требований. Она не описывает поведение всех конвертеров: это задание для конкретного обработчика и набор проверок его результата. Цвет подложки должен быть частью настроек экспорта, если пользователю разрешён выбор.
| Исходник | Что требуется | Подложка | Действие | Что проверить |
|---|---|---|---|---|
| Логотип с прозрачной областью | Наложение на разные страницы | Не фиксировать в файле | Сохранить поддерживающий прозрачность формат | Нет записанного прямоугольника вокруг логотипа |
| Товар с прозрачной областью | Непрозрачный JPEG для каталога | Белая, согласована заранее | Совместить с белым фоном, затем кодировать JPEG | Весь свободный участок белый, края без тёмной каймы |
| Объект с мягкой тенью | JPEG на фирменной карточке | Цвет карточки | Совместить вместе с полупрозрачной тенью | Тень выглядит естественно на выбранном цвете |
| Готовая непрозрачная фотография | Обычный JPEG | Отдельная не нужна | Преобразовать согласно требованиям к фото | Обработчик не добавил лишнюю рамку |
| Уже полученный JPEG с чёрным фоном | Вернуть исходную прозрачность | Из этого файла не определена | Запросить исходник с прозрачностью | Не выдавать добавленный alpha за восстановленный контур |
Почему свободная область исправилась, а кайма осталась
У сглаженного контура и мягкой тени есть полупрозрачные участки. Их нельзя оценивать только по большому пустому углу картинки. После изменения подложки осмотрите контур на увеличении и в реальном размере использования: вокруг объекта не должно появляться чужого по цвету ореола.
Если дефект уже присутствует в исходном материале, настройка выходного фона может не устранить его. Сохраните оригинал и сравните его на светлой и тёмной подложках. Не перекрашивайте все чёрные пиксели в белые: так можно уничтожить детали товара, тёмный текст и полезную тень вместе с нежелательным фоном.
Одного цвета страницы недостаточно
Белая заливка контейнера в браузере меняет просмотр, но сама по себе не меняет содержимое скачиваемой картинки. Пользователь может открыть файл в письме, офисном документе или иной системе. Поэтому фон должен попасть именно в результат конвертации, если договорённость требует непрозрачного файла.
В интернет-магазине отдельно согласуйте оригинал загрузки, изображение карточки и файл для внешней площадки. Разные назначения могут требовать разных вариантов. Исходник с прозрачностью стоит сохранять отдельно от производного JPEG, чтобы следующая выгрузка не начиналась с уже запечённого фона.
Как проверить исправление на маленьком наборе
- Подготовьте разрешённые к использованию примеры: прозрачный логотип, объект с мягким краем, изображение с тенью и обычное непрозрачное фото. Сохраните оригиналы отдельно.
- Для каждого примера запишите требуемый формат, цвет подложки и размеры. Не оставляйте цвет неопределённым словом «обычный».
- Запустите согласованный путь обработки и скачайте именно итоговый файл. Сверьте его формат и внешний вид, а не только имя расширения.
- Откройте результат вне интерфейса загрузки. Осмотрите свободную область, края, мелкий текст и тень.
- Сравните повторный экспорт того же оригинала с другой согласованной подложкой. Новый вариант не должен использовать уже преобразованный JPEG как будто это исходник с прозрачностью.
- Проверьте отдельные пути миниатюры и массовой выгрузки. Исправление одиночного предпросмотра не подтверждает исправление всех файлов.
При автоматизации экспорта полезно хранить рядом с заданием выбранный цвет и назначение результата. Тогда оператор сможет объяснить, почему один вариант белый, другой фирменного цвета, а прозрачный оригинал выглядит иначе. Это также помогает воспроизвести конкретную ошибку без перебора всех настроек.
Что передать разработчику вместо сообщения «PNG сломался»
Нужны исходный файл, полученный результат, выбранный формат, ожидаемый цвет и путь, которым запущена обработка. Уточните, где виден дефект: в миниатюре, после скачивания или только в стороннем просмотрщике. Передавайте учебный пример без закрытых материалов, если ошибка воспроизводится на нём.
Исправление можно принять, когда согласованный набор даёт нужные файлы с правильным фоном и пригодными краями. Оно не подтверждается сменой расширения или исчезновением шахматной сетки. Для повторного использования логотипа на разных цветах сохраняйте вариант с прозрачностью, а непрозрачный экспорт делайте под конкретное назначение.
Вопросы и ответы
Почему у PNG чёрный фон?
Сначала отличите подложку просмотрщика от цвета, записанного при обработке. Если проблема появилась при экспорте, проверьте, сохранилась ли прозрачность или на какой фон её совместили.
Как убрать чёрный фон при convert PNG to JPG?
Если нужна белая подложка, задайте её в операции композиции до получения JPEG. Когда требуется настоящая прозрачность, выбирайте подходящий формат вместо JPEG.
Для чего нужен Sharp flatten?
Он совмещает изображение с фоном и убирает альфа-канал. Укажите согласованный цвет явно; удаление канала через removeAlpha не является заменой этой операции.