Чому ваш прозорий PNG стає білим (і як це виправити)

Ви вирізали фото товару, зберегли PNG зі справді прозорим фоном і вставили його в слайд. А він приїхав у білому прямокутнику. Або в презентації виглядав як треба, а в експортованому PDF побілів.

Файл майже напевно в порядку. Прозорість живе рівно доти, доки кожна програма між вами й глядачем погоджується її нести, — а кілька з них мовчки цього не роблять. Ніхто вас не попереджає, бо з погляду програми нічого не зламалося. Майже всі випадки пояснює одне правило.

У JPEG немає альфа-каналу

PNG уміє зберігати значення альфи поруч із кольором кожного пікселя. Альфа — це непрозорість: нуль означає повністю прозорий піксель, максимум — повністю суцільний. Саме вона й робить вирізку вирізкою.

У JPEG відповідника немає. У ньому просто немає місця, де могло б жити «цей піксель порожній», тож будь-що, що перекодовує зображення в JPEG, мусить вирішити, чим заповнити те, де була прозорість. Воно накладає вашу вирізку на суцільний колір, впаює той колір у пікселі й відкидає альфу. На виході — цілком коректне зображення вашого товару на кольоровому прямокутнику.

Той колір зазвичай білий. Деякі інструменти заливають натомість чорним, і тоді скарга протилежна: чорний прямокутник навколо об’єкта. Один схожий випадок узагалі не є сплющуванням — темний логотип, який зникає в поштовому клієнті з темною темою. Там прозорість працює рівно так, як задумано, а крізь неї просто просвічує темний фон. Лікується це світлою підкладкою під знаком або світлою версією самого знака, а не повторним експортом.

Де альфа виживає, а де гине

Замість запам’ятовувати застосунки, навчіться помічати крок перекодування: щоразу, коли програма читає ваші пікселі й записує їх наново, ваш альфа-канал іде на переговори. Вирізка, вставлена в слайд і згодом експортована, — той варіант, з яким стикається більшість.

• Вставлення в документ чи слайд. Word і PowerPoint зазвичай зберігають прозорість на екрані; проблема рідко буває у вставленні — вона в експорті.
• Будь-яке «Зберегти як JPEG». Гарантована втрата, включно з тихими випадками: інструмент пропонує «оптимізувати для вебу» й обирає JPEG за вас.
• PDF і передача в друк. PDF несе прозорість ще від PDF 1.4, і більшість повсякденних експортерів її зберігає. Ризик сидить у друкарських пресетах: старіші допечатні стандарти на кшталт PDF/X-1a не допускають живої прозорості — версія 2001 року побудована на PDF 1.3, де моделі прозорості немає взагалі, а версія 2003 року забороняє її прямо, — тож усе прозоре сплющується об сторінку. Якщо друкарня називає пресет, спитайте, що він робить із прозорістю.
• Пошта. Зображення в тілі листа деякі поштові редактори перекодовують на виході, а на вході воно може йти крізь проксі зображень; поведінка залежить від клієнта, тож це варто перевірити, а не припускати. Вкладення доходить неушкодженим куди надійніше.
• Завантаження в чати, соцмережі та вітрини. Ці конвеєри перекодовують усе, щоб заощадити трафік або звести все до одного формату, хай що ви надіслали.

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

Тридцятисекундний тест перед відправленням

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

1. Покладіть зображення на щось яскраве. У своєму слайді чи графічному редакторі намалюйте пурпуровий прямокутник і покладіть вирізку зверху. Будь-який білий, який ви там побачите, — впаяний у файл.
2. Підтвердьте справжній формат. Файл на ім’я logo.png може виявитися перейменованим JPEG. І Windows, і macOS визначають тип файлу за розширенням, тож хибно названий файл усе одно значиться як PNG. Відкрийте його в графічному редакторі й подивіться, який формат показано там, або чисто перезбережіть як PNG зі свого дизайн-інструмента.
3. Перевіряйте канал, а не файл. Надішліть одне зображення точно тим маршрутом, яким воно піде: напишіть листа собі, опублікуйте в тестовому приватному акаунті, проженіть одну позицію крізь завантажувач вітрини.

Якщо перший крок пройдено, а третій провалено, — файл у порядку, а сплющує його канал.

Коли перестати боротися й просто обрати колір

Для призначень, які сплющують, обирайте колір заливки самі. Експортуйте вирізку вже на тому кольорі, який вам потрібен, — і жодного рішення про накладання не залишиться нікому іншому.

Саме для цього й існує редактор у remover.bg: щойно фон прибрано, поставте об’єкт на суцільний колір, власний відтінок чи власну фотографію й додайте тінь, щоб він не виглядав приклеєним. Тримайте прозорий PNG як майстер-файл, а кожну сплющену копію вважайте файлом для доставки.

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

Два файли, одне рішення

Тримайте прозорий майстер і робіть сплющену копію для кожного місця, яке її вимагає, — на кольорі, який обрали ви. Білий прямокутник ніколи не був вадою вашої вирізки: це програма відповіла на питання, якого ви й не помітили, що вона його ставить.