Kanał alfa jest czwarta wartość przechowywana w pikselu, która kontroluje jego przezroczystość, obok wartości czerwonego, zielonego i niebieskiego, które określają jego kolor. Alfa obejmuje zakres od całkowicie niewidocznego do całkowicie stałego, z każdym poziomem częściowej przezroczystości pomiędzy. Jest to jedyny powód, dla którego logo PNG może swobodnie unosić się na dowolnym tle, podczas gdy JPG nie, ponieważ JPG w ogóle nie ma kanału alfa. Przezroczystość nie jest sztuczką oka ani cechą całego obrazu; są to dane dołączone do każdego pojedynczego piksela. W tym przewodniku wyjaśniono, czym jest kanał alfa, w jaki sposób przechowuje setki poziomów przezroczystości, matematykę komponowania polegającą na łączeniu ze sobą przezroczystych warstw, jakie formaty go obsługują i co się z nim dzieje, gdy konwertujesz obraz z jednego formatu na inny.

Czym właściwie jest kanał alfa

Każdy obraz cyfrowy jest siatką pikseli, a każdy piksel przechowuje liczby, które go opisują. W standardowym kolorowym obrazie każdy piksel zawiera trzy liczby: czerwony, zielony i niebieski. Kanał alfa dodaje czwartą liczbę, która odpowiada na inne pytanie: nie jaki kolor ma ten piksel, ale ile z tego powinieneś zobaczyć. Piksel może być jasnoczerwony i całkowicie jednolity, jasnoczerwony i półprzezroczysty lub jasnoczerwony i całkowicie niewidoczny. Kolor pozostaje taki sam we wszystkich trzech przypadkach; zmienia się tylko alfa. To oddzielenie koloru od nieprzezroczystości umożliwia elastyczną przezroczystość.

Termin pochodzi z pracy o kompozycji alfa opublikowanej przez Thomasa Portera i Toma Duffa w 1984 r., która sformalizowała sposób łączenia obrazów z przezroczystością. Ich model do dziś stanowi podstawę każdego współczesnego programu graficznego, przeglądarki internetowej i silnika gry. Zatem kanał alfa nie jest najnowszym udogodnieniem przywiązanym do formatów obrazów; to pomysł sprzed kilkudziesięciu lat, który po cichu zasila prawie wszystko, co widzisz na ekranie.

RGBA: czwarta wartość w każdym przezroczystym pikselu

Kiedy piksel ma przezroczystość, jest opisywany czterema wartościami zamiast trzema, zapisanymi jako RGBA: czerwony, zielony, niebieski i alfa. Tę notację można spotkać wszędzie w projektowaniu i pracy w sieci. W CSS kolor taki jak rgba(255, 0, 0, 0.5) oznacza czystą czerwień przy 50% nieprzezroczystości. W edytorze obrazów ten sam pomysł pojawia się jako suwak krycia na warstwie. A to zawsze wartość krycia, nałożona na kolor, a nie zmieszana z nim.

Oddzielenie alfa od koloru ma znaczenie. Gdyby przezroczystość została wtopiona w wartości kolorów, półprzezroczysta czerwień musiałaby być przechowywana jako jaśniejszy róż i nigdy nie można byłoby odzyskać oryginalnej czerwieni ani umieścić jej czysto na ciemnym tle. Dzięki przechowywaniu krycia jako własnego kanału format zachowuje nienaruszony prawdziwy kolor i pozwala oprogramowaniu decydować, w jaki sposób połączyć go z tym, co znajduje się za nim. Właśnie dzięki tej elastyczności projektanci eksportują zasoby z kanałem alfa, zamiast wstępnie mieszać je z tłem.

Jak alfa przechowuje poziomy przezroczystości

Kanał alfa nie służy tylko do włączania i wyłączania przechowywania. W standardowym obrazie 8-bitowym alfa utrzymuje się 256 różnych poziomów, od 0 do 255. Wartość 0 oznacza, że piksel jest w pełni przezroczysty i niewidoczny, 255 oznacza, że jest w pełni jednolity i nieprzezroczysty, a każda liczba pomiędzy nimi powoduje częściową przezroczystość. Wartość 128 sprawia, że piksel jest mniej więcej w połowie przezroczysty, co pozwala na prześwitywanie tła z mocą 50%.

Te 256 poziomów sprawia, że przezroczystość wygląda gładko, a nie ostro. Cień zanika stopniowo, ponieważ jego piksele niosą malejące wartości alfa w kierunku krawędzi. Efekt szkła lub dymu działa, ponieważ różne piksele są przezroczyste w różnym stopniu. Wyższe formaty oferują jeszcze więcej: oferują 16-bitowe kanały alfa 65 536 poziomów do profesjonalnego komponowania, chociaż 8-bitowy jest standardem w przypadku obrazów internetowych i obejmuje wszystko, czego potrzebuje oko.

Komponowanie alfa: matematyka, która łączy warstwy

Kiedy przezroczysty piksel znajduje się na tle, oprogramowanie musi ustalić ostateczny kolor, który widzisz. Robi to za pomocą prostej formuły mieszania. Widoczny wynik jest równy kolor pierwszego planu razy jego alfa, plus kolor tła razy jeden minus ta alfa. Mówiąc najprościej, piksel, który jest w 70% nieprzezroczysty, generuje 70% własnego koloru i przepuszcza 30% tła.

Przeprowadź te obliczenia dla każdego piksela, a otrzymasz czysty obraz: logo wtopione w zdjęcie, wyblakły podpis nad filmem, menu narysowane na stronie internetowej. To się dzieje stale. Za każdym razem, gdy przeglądarka rysuje półprzezroczysty element lub gra renderuje kłębek dymu, wykonywana jest kompozycja alfa miliony razy na sekundę. Kanał alfa dostarcza wartość krycia wymaganą przez formułę dla każdego piksela.

Wygładzanie: dlaczego alfa wygładza krawędzie

Jednym z najważniejszych zadań kanału alfa jest produkcja czyste, wygładzone krawędzie. Rozważ zakrzywioną krawędź okrągłego logo. Bez przezroczystości krzywa musiałaby być zbudowana z twardych kwadratowych pikseli, co nadałoby jej postrzępiony, schodkowy wygląd. W przypadku kanału alfa piksele wzdłuż krawędzi są ustawiane na częściową przezroczystość, stopniowo wtapiając kształt w to, co znajduje się za nim.

Dlatego dobrze wykonane logo PNG wygląda wyraźnie na białej stronie, ciemnej stronie lub zdjęciu. Piksele krawędziowe nie są pomalowane na biało ani na żaden inny kolor; są częściowo przezroczyste, dzięki czemu dobrze komponują się z każdym tłem. Spłaszcz to logo na białym, a te same piksele krawędziowe staną się częściowo białe. Umieść spłaszczoną wersję na ciemnym tle, a zobaczysz brzydką bladą aureolę, ponieważ gładka mieszanka została zablokowana w złym kolorze. Kanał alfa zapewnia elastyczność krawędzi.

Prosta vs wstępnie pomnożona alfa

Istnieją dwa sposoby jednoczesnego przechowywania kolorów i alfa, a znajomość różnic zapobiega powstawaniu frustrujących błędów. w prosta alfa, wartości kolorów pozostają niezmienione, a alfa jest całkowicie oddzielona – w ten sposób PNG przechowuje przezroczystość. w wstępnie pomnożona alfa, wartości kolorów są mnożone przez alfa z wyprzedzeniem, więc 50-procentowa przezroczysta czerwień jest już zapisywana jako ciemniejsza czerwień.

Wstępnie zwielokrotniona alfa jest powszechna w przypadku wideo, kompozycji filmowych i renderowania w czasie rzeczywistym, ponieważ przyspiesza niektóre operacje mieszania i pozwala uniknąć ciemnych obwódek na krawędziach. Prosta alfa jest bardziej powszechna w przypadku obrazów nieruchomych i zasobów internetowych, ponieważ pozwala zachować oryginalne kolory. Problemy pojawiają się, gdy oprogramowanie oczekuje jednego i odbiera drugie, tworząc krawędzie, które wyglądają na zbyt ciemne lub dziwnie jasne. Do codziennej pracy z obrazami w formacie PNG i grafiką internetową masz do czynienia ze zwykłą wersją alfa, a oprogramowanie obsługuje ją za Ciebie.

Które formaty obrazów obsługują kanał alfa

Nie każdy format może przechowywać przezroczystość i jest to praktyczny szczegół, który wprawia ludzi w zakłopotanie podczas konwersji:

PNG: pełny 8-bitowy kanał alfa z 256 poziomami, standard przejrzystej grafiki internetowej.
Internet: pełny kanał alfa zarówno w trybie bezstratnym, jak i stratnym, tworząc jednocześnie mniejsze pliki niż PNG.
AVIF: nowoczesny format z obsługą alfa i silną kompresją, rozwijający się w obsłudze przeglądarek.
GIF: tylko prosta przezroczystość włączania i wyłączania, bez częściowych poziomów, więc krawędzie wyglądają szorstko.
TIFF i SVG: oba obsługują przezroczystość, stosowaną odpowiednio w pracach drukowanych i wektorowych.
JPG i BMP: nie mają w ogóle kanału alfa, więc nie mogą przechowywać żadnej przezroczystości.

Wniosek jest taki, że PNG i WebP to niezawodny wybór, gdy musi przetrwać przezroczystość, GIF działa tylko w przypadku wycięć o ostrych krawędziach, a JPG nie wchodzi w grę w przypadku czegokolwiek przezroczystego.

Kanał alfa w sieci i w CSS

W Internecie kanał alfa pojawia się w dwóch miejscach: wewnątrz plików obrazów i wewnątrz wartości kolorów CSS. Przezroczysty plik PNG lub WebP zawiera alfa w samym pliku, dzięki czemu nakłada się na tło dowolnej strony. Następnie CSS dodaje drugą warstwę kontroli z kolorami rgba() i hsla() oraz właściwością opacity, umożliwiając wygaszanie elementów, przyciemnianie nakładek i tworzenie efektów szkła bez konieczności edytowania obrazów.

Dzięki tej kombinacji nowoczesne interfejsy wyglądają warstwowo i miękko. Sekcja bohatera może nałożyć na zdjęcie półprzezroczystą ciemną nakładkę, aby biały tekst był czytelny przy użyciu CSS alfa, podczas gdy logo na górze wykorzystuje obraz alfa, aby dobrze przylegać do każdego z nich. Obydwa opierają się na tej samej idei: każdy piksel ma swoją własną przezroczystość, a przeglądarka łączy wszystko w całość w czasie rzeczywistym.

Co dzieje się z alfa po konwersji do JPG

Ponieważ JPG nie ma kanału alfa, konwersja przezroczystego obrazu do JPG wymusza decyzję: przezroczystość należy zastąpić czymś solidnym. Konwerter spłaszcza alfa, wypełniając każdy przezroczysty lub półprzezroczysty piksel kolorem tła, najczęściej biały. Przezroczyste obszary stają się jednolite, a gładkie krawędzie, które opierają się na częściowym alfa, zostają zablokowane w tym kolorze wypełnienia.

Właśnie dlatego logo może po konwersji wylądować w białym lub czarnym pudełku lub wykazywać lekką aureolę wokół krawędzi. Zniknęły informacje potrzebne do wtopienia go w nowe tło, ponieważ JPG nie miał gdzie ich przechowywać. Jeśli potrzebujesz przezroczystości, aby przetrwać, odpowiedzią jest zachowanie PNG lub zamiast tego konwersja do WebP. Jeśli naprawdę zależy Ci na płaskim obrazie, wybór odpowiedniego koloru wypełnienia ma znaczenie. Nasz konwerter pozwala wybrać biały, czarny lub niestandardowy kolor wypełnienia lub wyeksportować WebP, aby zachować cały kanał alfa, który przezroczysty przewodnik w tle przechodzi.

Typowe problemy z przejrzystością i sposoby ich uniknięcia

Większość problemów związanych z przejrzystością ma swoje źródło w spłaszczeniu kanału alfa w stosunku do niewłaściwego koloru, co nazywa się matowaniem. Oto typowi winowajcy:

Białe lub czarne pudełko: przezroczysty plik PNG przekonwertowany do formatu JPG wypełnia tło jednolitym kolorem. Dopasuj wypełnienie do miejsca docelowego lub zachowaj przezroczystość.
Aureola krawędziowa lub frędzle: logo zmatowione na biało, a następnie umieszczone na ciemnym tle ma blady kontur. Wyeksportuj ponownie z oryginalnego przezroczystego pliku zmatowionego do odpowiedniego koloru lub zachowaj przezroczystość.
Ciemne frędzle: często niedopasowanie proste i wstępnie pomnożone alfa. Ponowny eksport z poprawnym typem alfa rozwiązuje ten problem.
Utracona przezroczystość po edycji: spłaszczanie warstw lub zapisywanie, ponieważ JPG odrzuca alfa. Zachowaj wzorzec warstwowy lub PNG.

Zasada, która zapobiega prawie wszystkiemu: zdecyduj o tle przed spłaszczeniem i zachowaj oryginalny plik, który nadal ma swój kanał alfa, abyś mógł go ponownie wyeksportować w czysty sposób.

Często zadawane pytania

Co to jest kanał alfa?

Kanał alfa jest wartość na piksel, która kontroluje przezroczystość, od całkowicie niewidocznego do całkowicie stałego, przechowywane wraz z czerwienią, zielenią i błękitem, które określają kolor piksela.

Co oznacza RGBA?

RGBA oznacza czerwony, zielony, niebieski i alfa. Wartość alfa ustawia przezroczystość piksela na jego kolor, więc rgba(255, 0, 0, 0.5) ma kolor czerwony w 50 procentach.

Dlaczego PNG ma przezroczystość, ale JPG nie?

Ponieważ PNG zawiera kanał alfa, a JPG nie. Bez miejsca do przechowywania krycia na piksel JPG nie może w ogóle zachować przezroczystości.

Ile poziomów przezroczystości może przechowywać kanał alfa?

256 poziomów w standardowym 8-bitowym obrazie, od 0 dla niewidocznego do 255 dla stałego. Profesjonalna 16-bitowa wersja alfa oferuje 65 536 poziomów umożliwiających precyzyjną kompozycję.

Co dzieje się z kanałem alfa po konwersji do formatu JPG?

Jest spłaszczony. Obszary przezroczyste wypełniają się jednolitym kolorem, zwykle biały, ponieważ JPG nie ma możliwości przechowywania danych dotyczących krycia.

Które formaty obrazów obsługują kanał alfa?

PNG, WebP, AVIF, TIFF i SVG obsługuje wersję alfa, z PNG i WebP oferującymi płynną częściową przezroczystość. GIF ma tylko włączoną lub wyłączoną przezroczystość, a JPG nie ma żadnej.

Czy lepsza jest prosta alfa czy wstępnie pomnożona alfa?

Żadne z nich nie jest powszechnie lepsze; pasują do różnych prac. Prosta alfa umożliwia odzyskanie kolorów i pasuje do nieruchomych obrazów, podczas gdy wstępnie pomnożona alfa przyspiesza łączenie wideo i renderowanie w czasie rzeczywistym.

Jak zachować przezroczystość podczas zmniejszania rozmiaru pliku?

Konwertuj na WebP zamiast JPG. WebP utrzymuje kanał alfa, zmniejszając rozmiar o 25–35 procent, dzięki czemu tło pozostaje przezroczyste, a plik staje się jaśniejszy.