Alfa kanalı ne kadar şeffaf olduğunu kontrol eden bir pikselde saklanan dördüncü değerrengini belirleyen kırmızı, yeşil ve mavi değerlerin yanında yer alıyor. Alpha, tamamen görünmezden tamamen katıya kadar bir aralıkta çalışır ve arada her düzeyde kısmi şeffaflık bulunur. PNG logosunun herhangi bir arka plan üzerinde temiz bir şekilde yüzebilmesinin, JPG'nin ise bunu yapamamasının tek nedeni budur, çünkü JPG'nin hiçbir alfa kanalı yok. Şeffaflık bir göz oyunu ya da görüntünün tamamının bir özelliği değildir; her bir piksele eklenen verilerdir. Bu kılavuz, alfa kanalının ne olduğunu, yüzlerce şeffaflık düzeyini nasıl sakladığını, şeffaf katmanları bir araya getiren birleştirme matematiğini, hangi formatların onu desteklediğini ve bir görüntüyü bir formattan diğerine dönüştürdüğünüzde ona ne olacağını açıklamaktadır.

Alfa kanalı gerçekte nedir?

Her dijital görüntü bir piksel ızgarasıdır ve her piksel onu tanımlayan sayıları saklar. Standart renkli bir görüntüde her pikselde kırmızı, yeşil ve mavi olmak üzere üç sayı bulunur. Alfa kanalı farklı bir soruyu yanıtlayan dördüncü bir sayı ekler: Bu pikselin rengi değil, ne kadarını görmelisin. Bir piksel parlak kırmızı ve tamamen düz, parlak kırmızı ve yarı şeffaf veya parlak kırmızı ve tamamen görünmez olabilir. Her üç durumda da renk aynı kalır; yalnızca alfa değişir. Rengin opaklıktan bu şekilde ayrılması, esnek şeffaflığı mümkün kılan şeydir.

Terim, görüntülerin şeffaflıkla nasıl birleştirileceğini resmileştiren, Thomas Porter ve Tom Duff tarafından 1984'te yayınlanan alfa birleştirme çalışmasından geliyor. Modelleri hâlâ her modern grafik programının, web tarayıcısının ve oyun motorunun temelini oluşturmaktadır. Yani alfa kanalı, görüntü formatlarına eklenen yeni bir kolaylık değil; ekranda katmanlı olarak gördüğünüz hemen hemen her şeye sessizce güç sağlayan onlarca yıllık bir fikirdir.

RGBA: her şeffaf pikseldeki dördüncü değer

Bir piksel şeffaflık taşıdığında üç yerine dört değerle tanımlanır ve şu şekilde yazılır: RGBA: kırmızı, yeşil, mavi ve alfa. Bu gösterimi tasarım ve web çalışmalarında her yerde görüyorsunuz. CSS'de rgba(255, 0, 0, 0,5) gibi bir renk yüzde 50 opaklıkta saf kırmızı anlamına gelir. Bir görüntü düzenleyicide aynı fikir, bir katmandaki opaklık kaydırıcısı olarak görünür. A her zaman opaklık değeridir ve rengin içine karışmak yerine üstüne katmanlanır.

Alfayı renklerden ayrı tutmak önemli. Renk değerlerine şeffaflık eklenseydi, yarı şeffaf bir kırmızının daha açık pembe olarak saklanması gerekirdi ve orijinal kırmızıyı hiçbir zaman kurtaramaz veya koyu bir arka plan üzerine temiz bir şekilde yerleştiremezsiniz. Opaklığı kendi kanalı olarak depolayan format, gerçek rengi olduğu gibi tutar ve yazılımın, onu arkasında ne varsa onunla nasıl harmanlayacağına karar vermesine olanak tanır. Bu esneklik, tasarımcıların varlıkları bir arka plana önceden karıştırmak yerine bir alfa kanalıyla dışa aktarmasının nedenidir.

Alfa, şeffaflık düzeylerini nasıl depolar?

Alfa kanalı yalnızca açık veya kapalı olarak saklanmaz. Standart 8 bitlik bir görüntüde alfa, 0'dan 255'e kadar 256 farklı seviye. 0 değeri, pikselin tamamen şeffaf ve görünmez olduğu, 255 ise tamamen katı ve opak olduğu ve aradaki her sayının kısmi şeffaflık ürettiği anlamına gelir. 128 değeri, pikselin kabaca yarısının görülmesini sağlar ve arka planın yüzde 50 güçle görünmesini sağlar.

Bu 256 seviye, şeffaflığın sert değil pürüzsüz görünmesini sağlayan şeydir. Alt gölgenin pikselleri kenara doğru azalan alfa değerleri taşıdığından, alt gölge yavaş yavaş kaybolur. Farklı pikseller farklı miktarlarda görüldüğü için cam veya duman efekti işe yarar. Üst düzey formatlar daha da ileri gidiyor: 16 bit alfa kanalları sunuyor 65.536 seviye profesyonel birleştirme için, ancak 8 bit web görüntüleri için standarttır ve gözün ihtiyaç duyduğu her şeyi kapsar.

Alfa birleştirme: katmanları harmanlayan matematik

Saydam bir piksel arka planın üzerine oturduğunda yazılımın gördüğünüz son rengi hesaplaması gerekir. Bunu basit bir karıştırma formülüyle yapar. Görünür sonuç şuna eşittir: ön plan rengi çarpı alfa, artı arka plan rengi çarpı bir eksi bu alfa. Basit bir ifadeyle, yüzde 70'i opak olan bir piksel, kendi renginin yüzde 70'ini oluşturur ve arka planın yüzde 30'unun geçmesine izin verir.

Bu hesaplamayı her pikselde gerçekleştirdiğinizde temiz bir bileşim elde edersiniz: bir fotoğrafın üzerine harmanlanmış bir logo, bir videonun üzerine soluklaştırılmış bir başlık, bir web sayfası üzerine çizilen bir menü. Bu sürekli oluyor. Bir tarayıcı yarı saydam bir öğe çizdiğinde veya bir oyun bir duman bulutu oluşturduğunda, saniyede milyonlarca kez alfa birleştirme işlemi gerçekleştirir. Alfa kanalı, formülün her piksel için ihtiyaç duyduğu opaklık değerini sağlar.

Kenar yumuşatma: alfa neden kenarları pürüzsüz hale getiriyor?

Alfa kanalının en önemli işlerinden biri üretmektir temiz, kenarları yumuşatılmış kenarlar. Dairesel bir logonun kavisli kenarını düşünün. Şeffaflık olmasaydı, eğrinin sert kare piksellerden oluşturulması gerekirdi, bu da ona pürüzlü, merdiven basamaklı bir görünüm kazandırırdı. Bir alfa kanalıyla, kenardaki pikseller kısmi şeffaflığa ayarlanarak şeklin yavaş yavaş arkasında ne varsa harmanlanması sağlanır.

İyi oluşturulmuş bir PNG logosunun beyaz bir sayfada, karanlık bir sayfada veya fotoğrafta net görünmesinin nedeni budur. Kenar pikselleri beyaza veya tek bir renge boyanmaz; kısmen şeffaftırlar, dolayısıyla her arka plana doğru şekilde uyum sağlarlar. Bu logoyu beyaz üzerine düzleştirdiğinizde aynı kenar pikselleri kısmen beyaz olur. Düzleştirilmiş versiyonu koyu bir arka plan üzerine yerleştirdiğinizde çirkin, soluk bir hale görürsünüz çünkü pürüzsüz karışım yanlış renge kilitlenmiştir. Alfa kanalı, kenarın uyarlanabilir olmasını sağlayan şeydir.

Düz ve önceden çarpılmış alfa

Rengi ve alfayı birlikte depolamanın iki yolu vardır ve farkı bilmek, sinir bozucu hataların oluşmasını önler. içinde düz alfa, renk değerlerine dokunulmaz ve alfa tamamen ayrı tutulur; PNG bu şekilde şeffaflığı depolar. içinde önceden çarpılmış alfa, renk değerleri önceden alfa ile çarpılır, böylece yüzde 50'lik şeffaf kırmızı zaten daha koyu bir kırmızı olarak depolanır.

Önceden çoğaltılmış alfa, videoda, film birleştirmede ve gerçek zamanlı işlemede yaygındır çünkü belirli karıştırma işlemlerini daha hızlı hale getirir ve kenarlarda koyu saçaklanmayı önler. Düz alfa, orijinal rengin kurtarılabilir kalmasını sağladığı için durağan görüntüler ve web varlıkları için daha yaygındır. Yazılım birini bekleyip diğerini aldığında sorunlar ortaya çıkıyor ve kenarlar çok karanlık veya garip bir şekilde parlak görünüyor. PNG ve web grafikleriyle günlük görüntü çalışmaları için düz alfa ile uğraşırsınız ve yazılım bunu sizin için halleder.

Hangi görüntü formatları alfa kanalını destekler?

Her format şeffaflığı depolayamaz ve dönüşüm sırasında insanları şaşırtan pratik detay da budur:

PNG: Şeffaf web grafikleri için standart olan 256 seviyeli tam 8 bitlik alfa kanalı.
WebP: PNG'den daha küçük dosyalar üretirken hem kayıpsız hem de kayıplı modlarında tam bir alfa kanalı.
AVIF: Tarayıcı desteğinde büyüyen, alfa desteği ve güçlü sıkıştırmaya sahip modern bir format.
GIF: kısmi seviyeler olmadan yalnızca basit açma veya kapama şeffaflığı, böylece kenarlar pürüzlü görünür.
TIFF ve SVG: her ikisi de sırasıyla baskı ve vektör çalışmalarında kullanılan şeffaflığı destekler.
JPG ve BMP: hiçbir alfa kanalı olmadığından herhangi bir şeffaflığı depolayamazlar.

Buradan çıkarılacak sonuç, şeffaflığın hayatta kalması gerektiğinde PNG ve WebP'nin güvenilir seçimleriniz olduğu, GIF'in yalnızca keskin kenarlı kesikler için çalıştığı ve JPG'nin şeffaf herhangi bir şey için masadan kalktığıdır.

Web'deki ve CSS'deki alfa kanalı

Web'de alfa kanalı iki yerde görünür: görüntü dosyalarının içinde ve CSS renk değerlerinin içinde. Şeffaf bir PNG veya WebP, alfa değerini dosyanın kendisinde taşır, böylece herhangi bir sayfa arka planı üzerinde katmanlanır. Daha sonra CSS, rgba() ve hsla() renkleri ve opacity özelliği ile ikinci bir kontrol katmanı ekleyerek, görüntüleri hiç düzenlemeden öğeleri soluklaştırmanıza, katmanları renklendirmenize ve cam efektleri oluşturmanıza olanak tanır.

Bu kombinasyon, modern arayüzlerin katmanlı ve yumuşak görünmesinin nedenidir. Bir kahraman bölümü, beyaz metni okunabilir hale getirmek için CSS alfa kullanarak fotoğrafın üzerine yarı şeffaf, koyu bir kaplama yerleştirebilir; üstteki logo ise her ikisine de temiz bir şekilde oturmak için görüntü alfa kullanır. Her ikisi de aynı temel fikre dayanıyor: Her piksel kendi opaklığını taşıyor ve tarayıcı her şeyi gerçek zamanlı olarak bir araya getiriyor.

JPG'ye dönüştürdüğünüzde alfaya ne olur?

JPG'nin alfa kanalı olmadığından, şeffaf bir görüntüyü JPG'ye dönüştürmek bir kararı zorlar: şeffaflığın sağlam bir şeyle değiştirilmesi gerekir. Dönüştürücü her şeffaf veya yarı şeffaf pikseli bir arka plan rengiyle doldurarak alfayı düzleştirir, çoğunlukla beyazdır. Şeffaf alanlar katı hale gelir ve kısmi alfaya dayanan pürüzsüz kenarlar bu dolgu rengine kilitlenir.

Bir logonun dönüşümden sonra beyaz veya siyah bir kutuda kalmasının veya kenarlarında soluk bir hale görünmesinin nedeni tam olarak budur. Onu yeni bir arka planla harmanlamak için gereken bilgi gitti çünkü JPG'nin onu saklayacak yeri yoktu. Hayatta kalmak için şeffaflığa ihtiyacınız varsa, çözüm PNG'yi korumak veya bunun yerine WebP'ye dönüştürmektir. Gerçekten düz bir görüntü istediğinizde doğru dolgu rengini seçmek önemlidir. Bizim dönüştürücü dolgu için beyaz, siyah veya özel bir renk seçmenize veya alfa kanalını tamamen korumak için WebP'yi dışa aktarmanıza olanak tanır; şeffaf arka plan kılavuzu içinden geçiyor.

Yaygın şeffaflık sorunları ve bunlardan nasıl kaçınılacağı

Çoğu şeffaflık baş ağrısı, matlaştırma adı verilen bir adımla alfa kanalının yanlış renge karşı düzleştirilmesine kadar uzanır. İşte olağan suçlular:

Beyaz veya kara kutu: JPG'ye dönüştürülmüş şeffaf bir PNG, arka planını düz bir renkle doldurur. Dolguyu hedefle eşleştirin veya şeffaflığı koruyun.
Kenar halesi veya saçak: Beyaz üzerine matlaştırılan ve ardından koyu bir arka plan üzerine yerleştirilen logo, soluk bir dış hat gösteriyor. Matlaştırılmış orijinal şeffaf dosyadan doğru renge yeniden dışa aktarın veya dosyayı şeffaf tutun.
Karanlık saçak: genellikle düz ve önceden çarpılmış alfa uyumsuzluğu. Doğru alfa türüyle yeniden dışa aktarma sorunu düzeltir.
Düzenlemeden sonra şeffaflığın kaybolması: katmanları düzleştirmek veya JPG olarak kaydetmek alfayı atar. Katmanlı veya PNG bir ana kopyayı saklayın.

Bunların neredeyse tamamını engelleyen kural: Düzleştirmeden önce arka plana karar verin ve temiz bir şekilde yeniden dışa aktarabilmeniz için hala alfa kanalına sahip olan orijinal bir dosyayı saklayın.

Sık sorulan sorular

Alfa kanalı nedir?

Alfa kanalı şeffaflığı kontrol eden piksel başına bir değerTamamen görünmezden tamamen katıya kadar, bir pikselin rengini belirleyen kırmızı, yeşil ve mavinin yanında depolanır.

RGBA'nın anlamı nedir?

RGBA'nın açılımı kırmızı, yeşil, mavi ve alfa. Alfa değeri pikselin renginin üstüne opaklığını ayarlar, dolayısıyla rgba(255, 0, 0, 0,5) yüzde 50'de kırmızıdır.

PNG'de neden şeffaflık varken JPG'de yok?

Çünkü PNG bir alfa kanalı içerir ve JPG içermez. Piksel başına opaklığı depolayacak bir yer olmadan, JPG hiçbir şekilde şeffaflığı tutamaz.

Bir alfa kanalı kaç düzeyde şeffaflık depolayabilir?

Standart 8 bitlik bir görüntüde 256 seviyeGörünmez için 0'dan katı için 255'e kadar. Profesyonel 16 bit alfa, hassas birleştirme için 65.536 seviye sunar.

JPG'ye dönüştürdüğümde alfa kanalına ne olur?

Düzleştirilmiştir. Saydam alanlar düz renkle dolar, genellikle beyazdır çünkü JPG'nin opaklık verilerini saklamanın bir yolu yoktur.

Hangi görüntü formatları alfa kanalını destekler?

PNG, WebP, AVIF, TIFF ve SVG pürüzsüz kısmi şeffaflık sunan PNG ve WebP ile alfa desteği. GIF'in yalnızca açık veya kapalı şeffaflığı vardır ve JPG'de yoktur.

Düz alfa mı yoksa önceden çarpılmış alfa mı daha iyi?

İkisi de evrensel olarak daha iyi değildir; farklı işlere uygundurlar. Düz alfa, renklerin kurtarılabilir olmasını sağlar ve durağan görüntülere uygundur; önceden çoğaltılmış alfa, video ve gerçek zamanlı işlemede harmanlamayı hızlandırır.

Dosya boyutunu küçültürken şeffaflığı nasıl koruyabilirim?

Şuna dönüştür: JPG yerine WebP. WebP, boyutu yüzde 25 ila 35 oranında keserken alfa kanalını korur, böylece arka plan şeffaf kalır ve dosya daha açık renkte olur.