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

Що таке альфа-канал насправді

Кожне цифрове зображення — це сітка пікселів, і кожен піксель містить числа, які його описують. У стандартному кольоровому зображенні кожен піксель містить три числа для червоного, зеленого та синього кольорів. Альфа-канал додає четверте число, яке відповідає на інше запитання: не якого кольору цей піксель, а скільки з цього ви повинні побачити. Піксель може бути яскраво-червоним і повністю суцільним, яскраво-червоним і наполовину прозорим або яскраво-червоним і зовсім невидимим. Колір залишається однаковим у всіх трьох випадках; змінюється тільки альфа. Саме це відділення кольору від непрозорості робить можливою гнучку прозорість.

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

RGBA: четверте значення в кожному прозорому пікселі

Коли піксель містить прозорість, він описується чотирма значеннями замість трьох, які записуються як RGBA: червоний, зелений, синій і альфа. Ви бачите це позначення всюди в дизайні та веб-роботі. У CSS такий колір, як rgba(255, 0, 0, 0.5), означає чистий червоний колір із 50-відсотковою непрозорістю. У редакторі зображень та сама ідея відображається як повзунок непрозорості на шарі. А завжди означає значення непрозорості, накладене поверх кольору, а не змішане з ним.

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

Як альфа зберігає рівні прозорості

Альфа-канал не просто вмикає або вимикає. У стандартному 8-бітному зображенні зберігається альфа 256 різних рівнів, від 0 до 255. Значення 0 означає, що піксель повністю прозорий і невидимий, 255 означає, що він повністю суцільний і непрозорий, а кожне число між пікселями створює часткову прозорість. Значення 128 робить піксель приблизно наполовину прозорим, дозволяючи фону проглядатися з інтенсивністю 50 відсотків.

Ці 256 рівнів роблять прозорість плавною, а не жорсткою. Тінь поступово тьмяніє, оскільки її пікселі несуть менші значення альфа до краю. Ефект скла чи диму працює, оскільки різні пікселі просвічуються різною кількістю. Високоякісні формати просуваються далі: пропонуються 16-бітні альфа-канали 65 536 рівнів для професійного компонування, хоча 8-біт є стандартним для веб-зображень і охоплює все, що потрібно оку.

Альфа-композиція: математика, яка змішує шари

Коли прозорий піксель розміщується над фоном, програмне забезпечення має визначити остаточний колір, який ви бачите. Це робиться за допомогою простої формули змішування. Видимий результат дорівнює колір переднього плану, помножений на його альфа, плюс колір фону, помножений на один мінус альфа. Простіше кажучи, піксель, непрозорий на 70 відсотків, забезпечує 70 відсотків власного кольору та пропускає 30 відсотків фону.

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

Згладжування: чому альфа робить краї гладкими

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

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

Прямий або попередньо помножений альфа

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

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

Які формати зображень підтримують альфа-канал

Не кожен формат може зберігати прозорість, і це практична деталь, яка збиває людей під час перетворення:

PNG: повний 8-бітний альфа-канал із 256 рівнями, стандарт прозорої веб-графіки.
WebP: повний альфа-канал як у режимах без втрат, так і в режимах із втратами, водночас створюючи менші файли, ніж PNG.
AVIF: сучасний формат із підтримкою альфа-версії та сильним стисненням, що зростає у підтримці браузера.
GIF: лише проста змінна прозорість, без часткових рівнів, тому краї виглядають шорсткими.
TIFF і SVG: обидва підтримують прозорість, що використовується для друку та векторної роботи відповідно.
JPG і BMP: немає альфа-каналу взагалі, тому вони не можуть зберігати будь-яку прозорість.

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

Альфа-канал в Інтернеті та в CSS

В Інтернеті альфа-канал з’являється у двох місцях: у файлах зображень і в значеннях кольорів CSS. Прозорий PNG або WebP містить свою альфа-версію в самому файлі, тому він накладається на фон будь-якої сторінки. Потім CSS додає другий рівень керування з кольорами rgba() і hsla() і властивістю непрозорості, що дозволяє зникати елементам, тонувати накладення та створювати скляні ефекти взагалі без редагування зображень.

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

Що відбувається з альфа-версією під час конвертації у JPG

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

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

Поширені проблеми з прозорістю та як їх уникнути

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

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

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

Часті запитання

Що таке альфа-канал?

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

Що означає RGBA?

RGBA означає червоний, зелений, синій і альфа. Значення альфа встановлює непрозорість пікселя поверх його кольору, тому rgba(255, 0, 0, 0,5) є червоним на рівні 50 відсотків.

Чому PNG має прозорість, а JPG — ні?

Тому що PNG містить альфа-канал, а JPG — ні. Без місця для зберігання попіксельної непрозорості JPG взагалі не може зберігати прозорість.

Скільки рівнів прозорості може зберігати альфа-канал?

256 рівнів у стандартному 8-бітному зображенні, від 0 для невидимого до 255 для суцільного. Професійний 16-розрядний альфа-версія пропонує 65 536 рівнів для точного компонування.

Що відбувається з альфа-каналом, коли я конвертую у JPG?

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

Які формати зображень підтримують альфа-канал?

PNG, WebP, AVIF, TIFF і SVG підтримка альфа-версії з PNG і WebP, що пропонують плавну часткову прозорість. GIF має лише вмикання або вимкнення прозорості, а JPG не має жодної.

Пряма альфа чи попередньо помножена альфа краще?

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

Як зберегти прозорість під час зменшення розміру файлу?

Перетворити в WebP замість JPG. WebP зберігає альфа-канал, зменшуючи розмір на 25–35 відсотків, тому фон залишається прозорим, а файл стає світлішим.