Чому прозорий PNG стає чорним або білим і як цього уникнути

Прозорий PNG стає чорним або білим, коли програма зберігає його як JPG або коли застосунок перекодовує файл, адже JPG не має альфа-каналу для зберігання прозорості. Програма мусить підставити колір під прозорі пікселі. Вона або заливає їх білим, або залишає кольорові значення, які зберігаються в пікселях, а це часто чорний. Якщо файл має лишатися прозорим, зберігайте його як PNG або WebP. Якщо ж потрібен JPG, виберіть фон самі до збереження.

Видалити фонПотрібно прибрати фонБезкоштовно

Що таке прозорість у PNG

PNG може зберігати альфа-канал разом із значеннями червоного, зеленого й синього кольорів кожного пікселя. Альфа показує, наскільки піксель непрозорий. Повністю прозорий піксель показує те, що лежить під зображенням, наприклад колір сторінки або фон документа. Змішуванням займається переглядач, тому той самий файл виглядає правильно і на білій сторінці, і на темній.

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

Чому він стає чорним або білим

Коли конвертер відкидає альфа-канал, він мусить вирішити, яким стане кожен колишній прозорий піксель. Поширені два варіанти:

• Збережений колір. Прозорий піксель усе ще має значення червоного, зеленого та синього, а в багатьох вирізаних зображеннях ці значення чорні. Конвертер, який просто відкидає альфа-канал, зберігає їх, і фон виглядає чорним.
• Заливка кольором. Інші конвертери спочатку заливають фон, зазвичай білим, і накладають зображення зверху. Інструмент конвертації працює саме так: збереження як JPG заповнює прозорі ділянки білим, і інструмент пише про це поруч із елементами керування.

Застосунки додають ще один варіант. Форми завантаження, чат-застосунки та поштові клієнти часто перекодовують зображення перед показом, і деякі конвертують їх у JPG. Результат залежить від застосунку, тож той самий PNG може виглядати правильно в одному місці та чорним в іншому.

Зберегти прозорість або вибрати фон

Вирішіть, який із двох результатів вам потрібен:

Вам потрібно	Збережіть як	Результат
Вирізане зображення для сайту або дизайну	PNG або WebP	Прозорість збережено
Те саме вирізане зображення на однотонному фоні	JPG	Колір фону, який ви обрали

Щоб зберегти прозорість, відкрийте інструмент конвертації і виберіть PNG, а там, де браузер може зберегти WebP, — WebP. Обидва формати зберігають прозорі ділянки. Інструмент стиснення теж зберігає прозорість: він записує прозоре зображення як WebP або як PNG у браузерах, які не вміють записувати WebP, наприклад у Safari.

Якщо спершу треба створити прозорість, скористайтеся інструментом видалення фону. Він запускає модель штучного інтелекту у вашому браузері, а вибір під час завантаження визначає формат:

1. Залишите прозорість, і інструмент збереже PNG.
2. Виберіть білий, колір або розмиття, і він збереже JPG із цим фоном.

Якщо форма вимагає JPG, виберіть фон на етапі вирізання. Не залишайте це конвертеру, який може обрати чорний.

Перевірте, чи збереглася прозорість

Перш ніж довіряти конвертованому файлу, відкрийте його на двох фонах. Розмістіть його на білій веб-сторінці та на темній або на кольоровому слайді чи в документі. Якщо на обох фонах зображення показує однаковий фон, файл не має прозорості, а колір запечено. Якщо навколишній колір змінюється, прозорість збереглася.

Редактори показують прозорість по-різному. Багато графічних редакторів малюють за прозорими ділянками сіро-білу шахівницю, тоді як прості переглядачі можуть показувати чорний або білий. Шахівниця означає лише те, що там нічого немає, а не є візерунком на зображенні. Перевіряйте файл у програмі, де його використовуватимете, і вважайте будь-який інший перегляд орієнтовним.

Обирайте заливку свідомо

Коли результатом має бути JPG, визначте фон раніше, ніж це зробить конвертер. Білий пасує до сторінки або документа, який білий. Суцільний колір пасує до фірмового блоку чи кольорової сторінки, і він має збігатися з фоном сторінки за зображенням, щоб м'які краї зливалися з ним. Опція розмиття в інструменті видалення фону заповнює фон м'якою розмитою копією тієї самої фотографії, що для фотографій може виглядати природніше, ніж однотонна заливка. Оберіть варіант, що відповідає місцю, де буде зображення, і перевірте його саме там.

Як це зробити у fixmint

1. Збережіть оригінальний прозорий PNG і не зберігайте його як JPG, бо JPG відкидає прозорість.
2. Для сайту або дизайну сконвертуйте його в PNG або WebP, щоб прозорі ділянки залишилися порожніми.
3. Якщо потрібен JPG, накладіть фон самі. Інструмент видалення фону може поставити за об'єктом фон White, Colour або Blur, і зберегти JPG.
4. Перш ніж використовувати файл, відкрийте його на двох фонах. Якщо навколишній колір змінюється, прозорість збереглася. Наостанок стисніть його, якщо форма задає обмеження розміру.

Особливі випадки

• М'які краї. Волосся, тіні та скло мають частково прозорі пікселі, які ще несуть колір старого фону. На новому фоні можуть з'явитися світла або темна облямівка. Використовуйте вирізання з чистими краями або оберіть колір фону, близький до оригінального.
• JPG не може зберегти прозорість. Якщо форма приймає лише JPG, прозорість треба замінити кольором. Жодне налаштування JPG цього не змінить.
• Перевіряйте там, де його використовуватимуть. Дивіться файл у місці призначення, наприклад у формі, на сторінці чи в застосунку. Попередній перегляд може мати інший фон, ніж реальне місце.
• Вибір формату. Для графіки в мережі звичайний вибір — PNG. JPG, PNG і WebP порівнює їх докладніше. Якщо файл WebP не відкривається в застосунку, дивіться чому не відкривається зображення WebP.