Saluran alfa adalah nilai keempat disimpan dalam piksel yang mengontrol seberapa transparannya, berada di samping nilai merah, hijau, dan biru yang menentukan warnanya. Alpha berjalan dalam rentang yang sepenuhnya tidak terlihat hingga sepenuhnya solid, dengan setiap tingkat transparansi parsial di antaranya. Ini adalah satu-satunya alasan mengapa logo PNG dapat melayang dengan rapi di atas latar belakang apa pun sementara JPG tidak bisa, karena JPG tidak memiliki saluran alfa sama sekali. Transparansi bukanlah tipuan mata atau properti keseluruhan gambar; itu adalah data yang dilampirkan ke setiap piksel individu. Panduan ini menjelaskan apa itu saluran alfa, cara saluran ini menyimpan ratusan tingkat transparansi, perhitungan pengomposisian yang memadukan lapisan transparan, format apa yang mendukungnya, dan apa yang terjadi ketika Anda mengonversi gambar dari satu format ke format lainnya.

Apa sebenarnya saluran alfa itu

Setiap gambar digital adalah kisi-kisi piksel, dan setiap piksel menyimpan angka-angka yang menggambarkannya. Dalam gambar berwarna standar, setiap piksel menampung tiga angka merah, hijau, dan biru. Saluran alfa menambahkan angka keempat yang menjawab pertanyaan berbeda: bukan warna apa piksel ini, tapi berapa banyak yang harus Anda lihat. Sebuah piksel bisa berwarna merah terang dan sepenuhnya solid, merah terang dan setengah tembus pandang, atau merah terang dan sama sekali tidak terlihat. Warnanya tetap sama di ketiga kasus; hanya alpha yang berubah. Pemisahan warna dari opasitas inilah yang memungkinkan adanya transparansi yang fleksibel.

Istilah ini berasal dari karya alpha compositing yang diterbitkan oleh Thomas Porter dan Tom Duff pada tahun 1984, yang meresmikan cara menggabungkan gambar dengan transparansi. Model mereka masih menjadi dasar dari setiap program grafis modern, browser web, dan mesin permainan. Jadi saluran alfa bukanlah sebuah kemudahan baru yang dimasukkan ke dalam format gambar; ini adalah ide berusia puluhan tahun yang secara diam-diam mendukung hampir semua hal yang Anda lihat di layar.

RGBA: nilai keempat di setiap piksel transparan

Ketika sebuah piksel membawa transparansi, ia digambarkan dengan empat nilai, bukan tiga, ditulis sebagai RGBA: merah, hijau, biru, dan alfa. Anda melihat notasi ini di mana-mana dalam desain dan pekerjaan web. Dalam CSS, warna seperti rgba(255, 0, 0, 0.5) berarti merah murni dengan opacity 50 persen. Dalam editor gambar, ide yang sama muncul sebagai penggeser opasitas pada sebuah lapisan. A selalu merupakan nilai opacity, yang dilapiskan di atas warna, bukan dicampur ke dalamnya.

Memisahkan alfa dari masalah warna. Jika transparansi dimasukkan ke dalam nilai warna, warna merah semi-transparan harus disimpan sebagai warna merah muda yang lebih terang, dan Anda tidak akan pernah bisa mendapatkan kembali warna merah asli atau menempatkannya dengan rapi di atas latar belakang gelap. Dengan menyimpan opacity sebagai salurannya sendiri, format ini menjaga warna aslinya tetap utuh dan memungkinkan perangkat lunak memutuskan bagaimana memadukannya dengan apa pun yang ada di belakangnya. Fleksibilitas itulah yang menjadi alasan desainer mengekspor aset dengan saluran alfa daripada mencampurkannya terlebih dahulu ke latar belakang.

Bagaimana alpha menyimpan tingkat transparansi

Saluran alfa tidak hanya menyimpan atau mematikan. Dalam gambar standar 8-bit, alpha berlaku 256 level berbeda, dari 0 hingga 255. Nilai 0 berarti piksel sepenuhnya transparan dan tidak terlihat, 255 berarti piksel sepenuhnya solid dan buram, dan setiap angka di antaranya menghasilkan transparansi parsial. Nilai 128 membuat piksel kira-kira setengahnya tembus pandang, sehingga latar belakang terlihat tembus pandang dengan kekuatan 50 persen.

256 level inilah yang membuat transparansi terlihat mulus, bukan kasar. Drop shadow memudar secara bertahap karena pikselnya membawa nilai alfa yang menurun ke arah tepi. Efek kaca atau asap berfungsi karena piksel yang berbeda tembus pandang dengan jumlah yang berbeda. Format kelas atas mendorong lebih jauh: penawaran saluran alfa 16-bit 65.536 level untuk pengomposisian profesional, meskipun 8-bit adalah standar untuk gambar web dan mencakup semua kebutuhan mata.

Pengomposisian alfa: matematika yang memadukan lapisan

Ketika piksel transparan berada di atas latar belakang, perangkat lunak harus menentukan warna akhir yang Anda lihat. Ini dilakukan dengan formula pencampuran sederhana. Hasil yang terlihat sama dengan warna latar depan dikali alfa, ditambah warna latar belakang dikalikan satu dikurangi alfa. Sederhananya, piksel yang 70 persen buram menyumbangkan 70 persen warnanya sendiri dan membiarkan 30 persen latar belakang masuk.

Jalankan perhitungan itu di setiap piksel dan Anda akan mendapatkan gabungan yang bersih: logo dipadukan ke foto, teks memudar di video, menu digambar di halaman web. Hal ini terjadi terus-menerus. Setiap kali browser menggambar elemen semi-transparan atau game menampilkan kepulan asap, browser melakukan pengomposisian alfa jutaan kali per detik. Saluran alfa menyediakan nilai opasitas yang dibutuhkan rumus untuk setiap piksel.

Anti-aliasing: mengapa alpha membuat tepian menjadi halus

Salah satu pekerjaan terpenting saluran alfa adalah memproduksi tepi yang bersih dan anti-alias. Perhatikan tepi melengkung pada logo melingkar. Tanpa transparansi, kurva harus dibuat dari piksel persegi keras, sehingga memberikan tampilan bergerigi dan berjenjang. Dengan saluran alfa, piksel di sepanjang tepinya diatur ke transparansi parsial, memadukan bentuk secara bertahap ke apa pun yang ada di belakangnya.

Inilah sebabnya mengapa logo PNG yang dibuat dengan baik terlihat jelas pada halaman putih, halaman gelap, atau foto. Piksel tepi tidak dicat putih atau warna apa pun; sebagian transparan, sehingga menyatu sempurna dengan latar belakang apa pun. Ratakan logo itu menjadi putih, dan piksel tepi yang sama menjadi sebagian putih. Tempatkan versi rata pada latar belakang gelap dan Anda akan melihat lingkaran cahaya pucat jelek, karena campuran halus terkunci pada warna yang salah. Saluran alfa inilah yang membuat edge tetap dapat beradaptasi.

Alfa lurus vs alfa yang dikalikan sebelumnya

Ada dua cara untuk menyimpan warna dan alfa secara bersamaan, dan mengetahui perbedaannya akan mencegah munculnya bug yang membuat frustrasi. Di alfa lurus, nilai warna tetap tidak tersentuh dan alfa tetap terpisah, itulah cara PNG menyimpan transparansi. Di alfa yang dikalikan sebelumnya, nilai warna dikalikan dengan alfa sebelumnya, sehingga 50 persen warna merah transparan sudah disimpan sebagai warna merah yang lebih gelap.

Alfa yang dikalikan sebelumnya umum terjadi dalam video, pengomposisian film, dan rendering real-time karena membuat operasi pencampuran tertentu menjadi lebih cepat dan menghindari pinggiran gelap di tepinya. Alfa lurus lebih umum digunakan untuk gambar diam dan aset web karena warna aslinya tetap dapat dipulihkan. Masalah muncul ketika perangkat lunak mengharapkan satu dan menerima yang lain, menghasilkan tepian yang tampak terlalu gelap atau terang. Untuk pekerjaan gambar sehari-hari dengan PNG dan grafik web, Anda berurusan dengan alpha langsung, dan perangkat lunak menanganinya untuk Anda.

Format gambar mana yang mendukung saluran alfa

Tidak semua format dapat menyimpan transparansi, dan inilah detail praktis yang membuat orang bingung selama konversi:

PNG: saluran alfa 8-bit penuh dengan 256 level, standar untuk grafik web transparan.
WebP: saluran alfa penuh dalam mode lossless dan lossy, sekaligus menghasilkan file yang lebih kecil dari PNG.
AVIF: format modern dengan dukungan alfa dan kompresi kuat, berkembang dalam dukungan browser.
GIF: hanya transparansi hidup-mati yang sederhana, tanpa tingkat parsial, sehingga tepinya terlihat kasar.
TIFF dan SVG: keduanya mendukung transparansi, masing-masing digunakan dalam pekerjaan cetak dan vektor.
JPG dan BMP: tidak ada saluran alfa sama sekali, sehingga mereka tidak dapat menyimpan transparansi apa pun.

Kesimpulannya adalah PNG dan WebP adalah pilihan andal Anda ketika transparansi harus dipertahankan, GIF hanya berfungsi untuk potongan yang tajam, dan JPG tidak cocok untuk segala sesuatu yang tembus pandang.

Saluran alfa di web dan di CSS

Di web, saluran alfa muncul di dua tempat: di dalam file gambar dan di dalam nilai warna CSS. PNG atau WebP transparan membawa alfa di dalam file itu sendiri, sehingga melapisi latar belakang halaman mana pun. CSS kemudian menambahkan lapisan kontrol kedua dengan warna rgba() dan hsla() serta properti opacity, yang memungkinkan Anda memudarkan elemen, mewarnai overlay, dan membuat efek kaca tanpa mengedit gambar sama sekali.

Kombinasi inilah yang menyebabkan antarmuka modern terlihat berlapis dan lembut. Bagian pahlawan mungkin menumpuk hamparan gelap semi-transparan di atas foto agar teks putih dapat dibaca, menggunakan CSS alpha, sedangkan logo di atas menggunakan gambar alfa agar terlihat rapi di keduanya. Keduanya mengandalkan ide dasar yang sama: setiap piksel memiliki opasitasnya sendiri, dan browser menggabungkan semuanya secara real-time.

Apa yang terjadi pada alfa saat Anda mengonversi ke JPG

Karena JPG tidak memiliki saluran alfa, mengonversi gambar transparan ke JPG memerlukan keputusan: transparansi harus diganti dengan sesuatu yang solid. Konverter meratakan alfa, mengisi setiap piksel transparan atau semi-transparan dengan warna latar belakang, paling sering berwarna putih. Area tembus pandang menjadi solid, dan tepi halus yang mengandalkan alfa parsial terkunci pada warna isian tersebut.

Inilah sebabnya mengapa sebuah logo bisa berakhir di kotak putih atau hitam setelah konversi, atau menunjukkan lingkaran cahaya samar di sekitar tepinya. Informasi yang dibutuhkan untuk memadukannya dengan latar belakang baru telah hilang, karena JPG tidak punya tempat untuk menyimpannya. Jika Anda memerlukan transparansi untuk bertahan hidup, jawabannya adalah mempertahankan PNG atau mengonversinya ke WebP. Jika Anda benar-benar menginginkan gambar datar, memilih warna isian yang tepat itu penting. Kami konverter memungkinkan Anda memilih warna putih, hitam, atau khusus untuk isian, atau mengekspor WebP untuk mempertahankan saluran alfa sepenuhnya, yang mana panduan latar belakang transparan berjalan melalui.

Masalah umum transparansi dan cara menghindarinya

Kebanyakan masalah transparansi disebabkan oleh saluran alfa yang diratakan dengan warna yang salah, sebuah langkah yang disebut matting. Berikut adalah penyebab umum:

Kotak putih atau hitam: PNG transparan yang dikonversi ke JPG mengisi latar belakangnya dengan warna solid. Cocokkan isian dengan tujuan, atau pertahankan transparansi.
Tepi halo atau pinggiran: logo yang ditempelkan pada warna putih kemudian ditempatkan pada latar belakang gelap menunjukkan garis tepi pucat. Ekspor ulang dari file transparan asli dengan warna yang benar, atau biarkan tetap transparan.
Pinggiran gelap: sering kali merupakan ketidakcocokan alfa lurus versus pra-penggandaan. Mengekspor ulang dengan tipe alfa yang benar akan memperbaikinya.
Transparansi hilang setelah diedit: meratakan lapisan atau menyimpan saat JPG membuang alfa. Pertahankan master berlapis atau PNG.

Aturan yang mencegah hampir semua hal ini: tentukan latar belakang sebelum Anda meratakannya, dan simpan file asli yang masih memiliki saluran alfa sehingga Anda dapat mengekspor ulang dengan bersih.

Pertanyaan yang sering diajukan

Apa itu saluran alfa?

Saluran alfa adalah nilai per piksel yang mengontrol transparansi, dari yang sepenuhnya tidak terlihat hingga yang sepenuhnya padat, disimpan bersama dengan warna merah, hijau, dan biru yang menentukan warna piksel.

Apa artinya RGBA?

RGBA adalah singkatan dari merah, hijau, biru, dan alfa. Nilai alpha menetapkan opacity pixel di atas warnanya, sehingga rgba(255, 0, 0, 0.5) berwarna merah pada 50 persen.

Mengapa PNG memiliki transparansi tetapi JPG tidak?

Karena PNG menyertakan saluran alfa dan JPG tidak. Tanpa tempat untuk menyimpan opasitas per piksel, JPG tidak dapat menyimpan transparansi sama sekali.

Berapa tingkat transparansi yang dapat disimpan oleh saluran alfa?

256 level dalam gambar standar 8-bit, dari 0 untuk tidak terlihat hingga 255 untuk padat. Alfa 16-bit profesional menawarkan 65.536 level untuk komposisi yang bagus.

Apa yang terjadi pada saluran alfa ketika saya mengonversi ke JPG?

Itu diratakan. Area transparan terisi dengan warna solid, biasanya berwarna putih, karena JPG tidak memiliki cara untuk menyimpan data opacity.

Format gambar manakah yang mendukung saluran alfa?

PNG, WebP, AVIF, TIFF, dan SVG mendukung alfa, dengan PNG dan WebP menawarkan transparansi parsial yang mulus. GIF hanya memiliki transparansi aktif atau nonaktif, dan JPG tidak memilikinya.

Apakah alfa lurus atau alfa yang dikalikan lebih baik?

Tidak ada yang lebih baik secara universal; mereka cocok dengan pekerjaan yang berbeda. Alfa lurus menjaga warna tetap dapat dipulihkan dan menyesuaikan gambar diam, sementara alfa yang dikalikan sebelumnya mempercepat pencampuran dalam video dan rendering real-time.

Bagaimana cara menjaga transparansi saat mengurangi ukuran file?

Konversikan ke WebP, bukan JPG. WebP mempertahankan saluran alfa sambil memotong ukuran sebesar 25 hingga 35 persen, sehingga latar belakang tetap tembus pandang dan file menjadi lebih ringan.