Apa itu alpha channel? Cara kerja transparansi gambar

Setiap piksel dalam gambar biasa dijelaskan oleh tiga angka: seberapa banyak merah, hijau dan biru yang dikandungnya. Itu cukup untuk menentukan warna piksel, tetapi tidak untuk menentukan apakah piksel itu tembus pandang. Alpha channel adalah angka keempat di setiap piksel yang melakukan hal itu: ia menyimpan opasitas, dari transparan penuh sampai tidak tembus pandang sama sekali.

Saat orang membicarakan "PNG dengan background transparan", yang dimaksud adalah gambar dengan alpha channel di mana piksel background-nya punya nilai alpha nol. Panduan ini menjelaskan cara kerja angka itu, dua cara software menyimpannya, kenapa tepi bisa bermasalah, dan cara memeriksa apa yang sebenarnya ada di dalam sebuah file.

RGBA: empat channel per piksel

MDN mendefinisikan alpha channel dengan sederhana: warna tersusun dari channel (merah, hijau dan biru), dan untuk menggambarkan warna "yang sampai batas tertentu memperlihatkan background di baliknya", ditambahkan channel keempat. Gambar dengan keempat channel ini disebut RGBA.

Nilainya bisa ditulis dengan beberapa cara, dan semuanya berarti sama:

Spesifikasi PNG menjelaskannya dengan tepat: nilai alpha nol berarti transparan penuh, nilai maksimum untuk kedalaman bit tersebut berarti tidak tembus pandang sama sekali, dan nilai di antaranya adalah piksel semi-transparan "yang bisa digabungkan dengan gambar background".

Nilai di antara itulah bagian yang penting. Potongan gambar yang bagus bukan sekadar "objek tidak tembus pandang, background transparan". Piksel di sepanjang tepi, terutama di rambut, bulu, kain, kaca dan efek blur gerakan, sebagian transparan, dan itulah yang membuat objek terlihat alami di background baru, bukan seperti digunting.

Cara piksel transparan digambar

Saat sebuah aplikasi menaruh gambar Anda di atas sesuatu yang lain, setiap piksel dicampur dengan apa yang ada di belakangnya. Spesifikasi W3C Compositing and Blending memberikan rumus dasarnya:

result = Cs x as + Cb x ab x (1 - as)

Cs, as = color and alpha of your image (the source)
Cb, ab = color and alpha of what is behind it (the backdrop)

Untuk kasus umum dengan backdrop yang tidak tembus pandang, rumus itu menjadi rata-rata berbobot. Piksel dengan alpha 0.3 menyumbang 30% warnanya sendiri dan meneruskan 70% background.

Straight vs premultiplied alpha

Ada dua cara menyimpan warna piksel yang sebagian transparan, dan mencampuradukkannya adalah sumber klasik munculnya pinggiran gelap atau terang.

Straight alpha (disebut juga unassociated atau non-premultiplied) menyimpan warna seolah-olah piksel itu tidak tembus pandang sama sekali, dan menyimpan opasitasnya secara terpisah. Piksel merah murni yang setengah transparan disimpan sebagai merah 255, hijau 0, biru 0, alpha 128.

Premultiplied alpha (disebut juga associated) menyimpan warna yang sudah dikalikan dengan alpha. Piksel yang sama disimpan sebagai merah 128, hijau 0, biru 0, alpha 128. Seperti yang ditulis spesifikasi PNG, gambar seperti ini "sudah digabungkan dengan background hitam".

Mana yang dipakai sebuah file bergantung pada format dan software-nya:

• PNG selalu memakai straight alpha. Spesifikasinya menyebutkan hal ini secara tegas, dan mencatat bahwa cara ini memudahkan editor mengubah transparansi gambar.
• Pipeline grafis, game engine dan alat compositing video sering memakai premultiplied alpha secara internal, karena perhitungan pencampurannya lebih sederhana dan pemfilteran bekerja lebih baik.

Masalah muncul saat satu program menulis nilai premultiplied dan program lain membacanya sebagai straight. Warna di sepanjang tepi jadi terlalu gelap, menghasilkan garis hitam tipis. Kebalikannya membuat tepi terlalu terang. Jika Anda melihat pinggiran gelap yang konsisten di setiap potongan gambar dari satu alat, ketidakcocokan premultiplication adalah hal pertama yang patut dicurigai.

Kenapa potongan gambar punya halo

Halo adalah pinggiran yang terlihat di sekitar objek dan sebenarnya bukan bagian dari objek itu. Ada empat penyebab umum, dan masing-masing punya solusinya sendiri.

1. Background lama terbawa di piksel tepi

Kamera tidak pernah menangkap batas yang bersih. Sehelai rambut di depan pagar tanaman hijau menghasilkan piksel yang sebagian rambut dan sebagian tanaman. Jika potongan gambar mempertahankan warna asli piksel-piksel itu dan hanya membuatnya semi-transparan, warna hijaunya tetap tercampur. Saat ditaruh di atas putih, objek kini punya cahaya hijau samar.

Solusinya adalah color decontamination: memperkirakan warna foreground yang sebenarnya untuk setiap piksel tepi dan menuliskan warna itu sebagai gantinya. Photoshop menyebutnya Decontaminate Colors di workspace Select and Mask, dan library open-source rembg punya opsi decontaminate yang melakukan hal yang sama. Cara ini mengubah warna tepi, tidak pernah mengubah bentuk mask.

2. Mask terlalu keras

Jika mask hanya punya piksel yang sepenuhnya tidak tembus pandang dan sepenuhnya transparan, tepinya terlihat bergerigi, dan antialiasing apa pun di foto asli meninggalkan garis warna background selebar satu piksel di sekeliling objek. Objek yang lembut seperti rambut memerlukan mask lembut dengan nilai di antara yang sesungguhnya.

3. Warna tersembunyi di piksel transparan

Piksel dengan alpha nol tetap punya nilai merah, hijau dan biru di file straight alpha. Anda tidak bisa melihatnya, tetapi mengubah ukuran atau mem-blur gambar mencampur piksel yang bersebelahan, dan jika warna tersembunyi itu putih atau hitam, warnanya merembes ke tepi yang terlihat. Library gambar yang bagus menghindari ini dengan melakukan premultiply sebelum mengubah ukuran, lalu mengembalikannya sesudahnya.

4. Gambar diratakan ke sebuah warna

GIF dan PNG palet sering hanya mendukung transparansi nyala atau mati, sehingga alat melakukan antialiasing tepi terhadap warna matte, biasanya putih, sebelum menyimpan. Gambar itu terlihat bagus di atas putih dan menampilkan pinggiran putih di atas warna yang lebih gelap. Jika potongan gambar Anda akan ditaruh di background gelap, ekspor dengan alpha penuh.

Mask, matte dan alpha: istilahnya

Istilah-istilah ini tumpang tindih dan sering dipakai secara longgar. Berikut arti yang biasanya dimaksud:

• Alpha channel: nilai opasitas yang disimpan di dalam file gambar, satu per piksel.
• Mask: gambar grayscale yang mengatur bagian mana dari gambar lain yang terlihat. Di layer mask Photoshop, putih memperlihatkan dan hitam menyembunyikan, sedangkan abu-abu terlihat sebagian. Mask bisa diedit tanpa menyentuh piksel asli, itulah sebabnya para profesional hapus background dengan mask, bukan dengan menghapus piksel.
• Matte: istilah film dan compositing untuk ide yang sama, yaitu gambar grayscale yang menentukan apa yang dipertahankan. "Matting" adalah masalah menghitung matte yang lembut dan akurat untuk tepi yang sulit seperti rambut.
• Trimap: peta kasar tiga zona (pasti foreground, pasti background, tidak yakin) yang dipakai sebagian algoritma matting sebagai titik awal.
• Mask biner atau keras: hanya hitam dan putih, tanpa abu-abu. Cukup untuk kotak dan logo, buruk untuk rambut.
• Potongan gambar (cut-out): hasil akhirnya, yaitu warna objek ditambah alpha channel.

Mask dan alpha channel menyimpan informasi yang sama. Banyak alat memungkinkan Anda mengekspor salah satunya: PNG transparan dengan alpha di dalamnya, atau gambar mask hitam putih terpisah yang bisa Anda terapkan sendiri di editor atau alat video.

Format mana yang bisa menyimpan alpha

Untuk perbandingan lengkap format-format ini, lihat PNG vs JPEG vs WebP.

Cara memeriksa apakah gambar punya transparansi

File berakhiran .png bukan bukti bahwa gambar itu transparan. Banyak PNG sepenuhnya tidak tembus pandang, dan sebagian gambar "transparan" yang ditemukan di internet sebenarnya JPEG dengan papan catur abu-abu dan putih yang tercetak di pikselnya. Berikut cara memeriksa yang bisa diandalkan.

Dengan mata

Taruh gambar di background gelap dan di background terang, misalnya di slide atau aplikasi desain. Potongan gambar yang asli memperlihatkan warna background di sekitar objek pada kedua kasus. Jika Anda masih melihat papan catur, itu bagian dari gambar, bukan transparansi.

Dengan ImageMagick

# Does the file have an alpha channel at all?
identify -format "%A\n" photo.png

# Is it fully opaque anyway? (true means no visible transparency)
identify -format "%[opaque]\n" photo.png

%A melaporkan channel transparansi (kata yang dicetak berbeda antara ImageMagick 6 dan 7), dan %[opaque] menghitung apakah setiap piksel sepenuhnya tidak tembus pandang. Yang Anda harapkan adalah ada alpha channel dan hasilnya false.

Dengan Python dan Pillow

from PIL import Image

im = Image.open("photo.png")
print(im.mode)                    # RGBA or LA means an alpha channel
print(im.has_transparency_data)   # True if the file carries any transparency info

if "A" in im.getbands():
    lo, hi = im.getchannel("A").getextrema()
    print("alpha range:", lo, hi)  # lo == 255 means nothing is transparent

Pemeriksaan extrema menangkap kasus umum file RGBA yang setiap pikselnya tidak tembus pandang.

Saat platform mengabaikan alpha

Beberapa tempat membuang atau mengabaikan transparansi. Etsy menyatakan PNG transparan tidak didukung dan area transparan bisa tampil hitam, dan marketplace seperti Amazon dan Walmart memang meminta gambar utama dengan background putih bersih. Dalam kasus seperti itu, ratakan sendiri potongan gambar ke warna background agar hasilnya Anda yang mengatur. Di website Anda sendiri, di slide dan di aplikasi desain, pertahankan alpha-nya.

Mendapatkan alpha channel yang bersih dengan cepat

Jika Anda butuh potongan gambar dengan tepi lembut, bukan mask keras, removebackground.dev menghasilkan file PNG atau WebP transparan dengan alpha channel penuh, dan API-nya juga bisa mengembalikan mask grayscale secara terpisah.