Apa Itu Saluran Alpha? Bagaimana Transparansi Gambar Sebenarnya Bekerja, Format demi Format

Anda meletakkan PNG "transparan" ke slide gelap dan sebuah persegi putih ikut terbawa. File tersebut baik-baik saja di editor. Jadi apa yang terjadi? Jawabannya ada di saluran keempat yang jarang diperhatikan. Setiap piksel dalam gambar membawa nilai merah, hijau, dan biru, dan pada beberapa format ada angka keempat yang disebut saluran alfa yang menyatakan seberapa banyak piksel tersebut harus tampil.

Panduan ini menjelaskan apa yang disimpan angka tersebut, format mana yang mempertahankannya (PNG dan WebP), mana yang mereduksinya menjadi saklar (GIF), mana yang membuangnya (JPG), dan mengapa SVG bermain dengan aturan berbeda. Sepanjang jalan kami membaca saluran alfa dari tujuh potongan nyata piksel demi piksel, sehingga angka-angka di bawah berasal dari file, bukan teori.

Satu PNG, empat latar. Sepatu sneaker adalah masukan uji yang dihasilkan AI yang dipotong dengan penghapus latar belakang Atlas Cloud; file ditempatkan pada setiap latar tanpa diubah.

Poin Penting

• Saluran alfa adalah saluran keempat yang menyimpan opasitas untuk setiap piksel, dari 0 (sepenuhnya bening) hingga 255 (sepenuhnya solid) pada gambar 8-bit.
• PNG dan WebP mempertahankan saluran alfa penuh. GIF hanya dapat menandai satu warna palet sebagai transparan. JPG tidak menyimpan transparansi sama sekali.
• Atlas Cloud penghapus latar belakang AI gratis mengembalikan PNG transparan pada ukuran piksel yang Anda unggah, diproses di dalam browser Anda.
• Pada tujuh potongan yang diukur, hanya 0,7% hingga 2,2% piksel yang sebagian transparan. Pita tipis itulah tepi anti-alias yang membuat rambut dan garis luar tampak alami.
• PNG yang menampilkan latar putih atau hitam di penampil biasanya belum kehilangan saluran alfanya. Periksa pada latar gelap atau papan catur sebelum mengekspor ulang apa pun.

Apa yang Disimpan Saluran Alfa di Dalam Setiap Piksel

Tanyakan apa itu saluran alfa dan Anda biasanya mendapat metafora. Di sini, inilah angkanya. Spesifikasi PNG dari W3C mendefinisikannya dalam satu kalimat: "Sampel alfa menentukan derajat opasitas piksel, di mana nol berarti sepenuhnya transparan dan nilai maksimum berarti sepenuhnya opak." Pada gambar 8-bit, nilai maksimumnya adalah 255, yang memberikan 256 langkah antara bening dan solid.

PNG juga mengizinkan alfa 16-bit. Spesifikasi mengizinkan kedalaman bit 8 atau 16 untuk kedua tipe warna pembawa alfa, skala abu-abu dengan alfa dan warna sebenarnya dengan alfa, dan saluran alfa 16-bit memiliki 65.536 langkah. Di luar pipeline pengomposisian, 8 bit adalah yang akan Anda temui.

Jadi piksel RGBA adalah empat angka. Tiga menjelaskan warna, satu menjelaskan cakupan. Ubah hanya angka keempat dan warnanya tetap, sementara piksel memudar. Itulah keseluruhan trik di balik tepi rambut yang lembut, bayangan, dan kaca yang membiarkan latar belakang terlihat.

Kata "transparan" menyembunyikan perbedaan penting. Beberapa format menyimpan nilai alfa penuh per piksel, jadi sebuah piksel bisa 37% terlihat. Format lain menyimpan satu tanda ya-atau-tidak: piksel ini digambar, yang itu dilewati. Keduanya disebut transparansi, dan hanya yang pertama dapat memudarkan tepi. Ingat perbedaan ini, karena itulah alasan stiker GIF tampak bergerigi dan potongan PNG tidak.

Satu istilah lagi yang akan Anda temui di alat video dan game: premultiplied alpha. Dalam file straight (atau unpremultiplied), nilai warna disimpan pada kekuatan penuh dan alfa menskalakannya saat ditampilkan. Dalam file premultiplied, nilai warna sudah dikalikan dengan alfa, sehingga piksel merah yang setengah terlihat disimpan sebagai merah setengah kekuatan. PNG menggunakan jenis straight; spesifikasi menyatakan bahwa nilai warna "tidak dikalikan sebelumnya dengan nilai alfa".

Gagasan ini memiliki jejak dokumen. Memo Alvy Ray Smith tahun 1995 tentang sejarah alfa menyebut dirinya dan Ed Catmull sebagai pencetus konsep ini pada 1970-an di New York Institute of Technology, dan menyebut makalah Porter dan Duff tahun 1984 sebagai yang menarik garis antara dua konvensi tersebut. Untuk pekerjaan web dan cetak sehari-hari, Anda bisa mengabaikan perbedaannya; editor Anda yang menanganinya.

Cara Menyimpan PNG dengan Latar Belakang Transparan

Banyak masalah "ekspor saya tidak transparan" ditentukan sebelum dialog penyimpanan terbuka. Tiga aturan mencakupnya. Lapisan latar belakang harus disembunyikan atau dihapus, sehingga kanvas menampilkan papan catur di editor. Formatnya harus yang memiliki saluran alfa, yang dalam praktik berarti PNG atau WebP.

Dan opsi PNG haruslah jenis 8-bit per saluran, sering dilabeli PNG-24 atau 32-bit, bukan versi palet yang oleh beberapa pengekspor direduksi menjadi transparansi nyala-atau-mati. Spesifikasi PNG memang mengizinkan gambar terindeks membawa "tabel alfa yang mengaitkan sampel alfa dengan setiap entri palet", tetapi Anda tidak dapat mengandalkan setiap alat menggunakannya.

Jalur menu di bawah ini berasal dari dokumentasi masing-masing vendor.

Apa pun alat yang Anda gunakan, lihat hasilnya di atas papan catur sebelum Anda mengunduh. Panel hasil Atlas menampilkan tepatnya itu, sehingga Anda dapat melihat saluran alfa bekerja sebelum file mencapai disk Anda.

Ubah Gambar Apa Pun Menjadi PNG Transparan dalam Satu Klik

Cara tercepat untuk mendapatkan file dengan saluran alfa sungguhan adalah membiarkan model segmentasi membuatnya. Atlas Cloud menjalankan alat penghapus latar belakang di dalam tab browser, salah satu dari sedikit alat AI gratis di situs yang tidak memerlukan akun. Anda seret foto ke dalamnya, klik Run Free, dan unduh hasilnya.

Model berjalan secara lokal melalui WebGPU, dengan fallback WASM pada mesin yang tidak memilikinya, dan kami menyelesaikan potongan dengan jaringan terputus. Tidak ada tanda air dan tidak perlu mendaftar.

Subjeknya tidak terbatas pada potret. Dalam pengujian, foto grup, anjing berbulu panjang, sepatu sneaker putih, tanda tangan tulisan tangan, logo seni garis, dan kemeja putih yang difoto dengan latar dinding putih masing-masing kembali sebagai potongan yang dapat digunakan, logonya dengan ruang negatif terbuka. Jika potongan yang Anda butuhkan ditujukan untuk cetak besar, padukan dengan perbandingan peningkat skala gambar gratis yang kami jalankan, karena saluran alfa ikut diskalakan dengan gambar.

Di Dalam Potongan Nyata: Di Mana Piksel Lembut Berada

Kami membuka tujuh dari keluaran tersebut di Python dan menghitung setiap piksel berdasarkan nilai alfanya. Polanya sama pada ketujuhnya. Antara 60,6% dan 98,4% piksel sepenuhnya transparan, bergantung pada seberapa banyak bingkai yang diisi subjek.

Piksel yang sebagian transparan, yang memiliki alfa antara 8 dan 250, mencakup 0,7% hingga 2,2% dari gambar. Itu adalah pita selebar 1 hingga 3 piksel yang mengelilingi garis luar, dan itulah yang melakukan semua kerja anti-aliasing.

Kerudung tipis itu mengajarkan sesuatu yang tidak akan disampaikan definisinya saja. Saluran alfa dapat menyimpan transparansi sebagian, namun kerudung itu kembali dengan hanya 0,73% piksel yang sebagian transparan, garis luar tipis yang sama seperti sepatu sneaker. Kainnya sendiri ditulis sebagai solid, dengan dedaunan hijau di belakangnya menyatu ke warnanya. Bentuk terjaga, transparansi sebagian hilang. File yang memiliki saluran alfa tidak memberi tahu apa pun tentang apakah model memilih menggunakan bagian tengah rentang.

Pengamatan teknis kecil untuk yang penasaran: pada ketujuh file, piksel subjek solid berada di alfa 254 bukan 255, perbedaan yang tidak dapat ditampilkan layar mana pun. Pada PNG ukuran penuh yang kami periksa, setiap piksel yang sepenuhnya transparan membawa nilai warna yang sama, hitam polos, sehingga file tidak menyimpan latar belakang tersembunyi yang bisa bocor kembali sebagai pinggiran.

Format Gambar Mana yang Mendukung Transparansi

Lima format mencakup hampir setiap file yang akan Anda terima. Mereka menyimpan transparansi dalam empat cara berbeda, dan perbedaannya menentukan apakah tepi dapat memudar, apakah file dapat beranimasi, dan seberapa besar ukurannya.

Apakah JPG Mendukung Transparansi?

Tidak. Panduan format gambar MDN menyatakannya dengan jelas: "JPEG tidak mendukung saluran alfa." Format ini menyimpan tiga saluran warna dan tidak ada lagi, jadi saat Anda menyimpan gambar berlapis sebagai JPG, editor harus meratakannya ke suatu warna terlebih dahulu, biasanya putih. Putih itu kemudian menjadi piksel biasa, dan ikut bersama subjek ke mana pun file pergi.

Inilah juga sebabnya unduhan "JPG transparan" bukan seperti yang diklaim. Entah file itu sebenarnya PNG dengan ekstensi yang salah, atau papan catur yang Anda lihat dilukis ke dalam piksel. Mengganti nama .jpg menjadi .png mengubah label pada kotak, bukan isinya. Jika Anda memerlukan transparansi, JPG harus dibuka, latar belakang dihapus, dan hasilnya disimpan ke format yang dapat menyimpan saluran alfa.

GIF Transparan: Satu Warna, Tepi Keras

Transparansi GIF berasal dari revisi 89a format tersebut, dan usianya terlihat. Spesifikasi GIF89a menambahkan Graphic Control Extension dengan Transparency Index, dijelaskan seperti ini: "Transparency Index sedemikian rupa sehingga ketika ditemui, piksel yang bersangkutan pada perangkat tampilan tidak diubah dan pemrosesan berlanjut ke piksel berikutnya." Satu entri dalam tabel warna dinyatakan tembus pandang. Setiap piksel lainnya digambar pada kekuatan penuh.

Itu membuat transparansi GIF menjadi urusan 1-bit. Piksel entah dilewati atau dicat, dan dengan palet paling banyak 256 warna tidak ada ruang untuk tepi setengah terlihat. Letakkan potongan GIF pada latar yang berbeda dari latar saat dibuat, dan garis luarnya bertingkat seperti tangga, sering kali dengan pinggiran pucat di tempat piksel anti-alias dipaksa menjadi solid.

Kami mengonversi potongan sepatu sneaker ke GIF dengan ambang alfa 128, default yang biasa, dan memperbesar wilayah tali yang sama tiga kali. Sisi 8-bit memudar melintasi dua atau tiga piksel. Sisi GIF semuanya sudut siku-siku. Jika Anda memerlukan GIF transparan untuk klien yang tidak menerima format lain, buatlah di atas warna latar tempat GIF itu akan ditempatkan, agar pinggirannya menyatu, bukan menyala.

Transparansi WebP pada File Lossy dan Lossless

WebP adalah format yang akhirnya memberikan saluran alfa pada kompresi lossy. Dokumentasi kompresi Google menjelaskan "mode WebP lain yang memungkinkan penyandian lossy untuk saluran RGB dan penyandian lossless untuk saluran alfa", dan referensi cwebp-nya menetapkan kualitas alfa default pada 100, yang berarti bidang alfa disimpan secara lossless kecuali Anda meminta sebaliknya.

Halaman ikhtisar Google menempatkan WebP lossless 26% lebih kecil daripada PNG, mengatakan transparansi menambah sekitar 22% dalam byte, dan menempatkan WebP lossy dengan transparansi biasanya 3x lebih kecil daripada PNG.

Angka kami sendiri berada di kisaran itu. Kami mengambil potongan 2048 x 1152 langsung dari penghapus latar belakang, PNG 1.211 KB, dan menyimpannya ulang dengan Pillow pada pengaturan default.

WebP lossless keluar pada 660 KB, 46% lebih kecil, dan setiap nilai alfa cocok persis dengan PNG. WebP lossy pada kualitas 80 keluar pada 124 KB, dan bidang alfanya masih identik byte per byte dengan aslinya. Satu-satunya yang berubah adalah data warnanya. Untuk penyajian potongan di web, biasanya itulah file yang Anda inginkan. Untuk salinan master yang akan terus Anda edit, tetap gunakan PNG atau WebP lossless.

Latar Belakang Transparan SVG: Tidak Ada Latar yang Perlu Dihapus

SVG tidak memiliki latar belakang untuk dibuat transparan, karena memang tidak pernah punya. File SVG adalah daftar instruksi menggambar: gambar lingkaran ini di sini, isi dengan warna ini. Tidak ada apa pun dalam daftar itu yang mengecat kanvas kecuali Anda menambahkan persegi yang menutupinya. Saat SVG tampak memiliki latar putih, Anda sedang melihat halaman atau penampil di belakangnya.

Transparansi di dalam SVG diatur per elemen. Referensi MDN menjelaskan nilai fill none sebagai tidak mengecat isian, sehingga bagian dalam bentuk tetap bening. Atribut fill-opacity hanya memudarkan cat di dalam bentuk, sedangkan opacity memudarkan seluruh elemen, termasuk goresan.

Dua hal sering membuat orang tersandung. Foto raster yang disematkan dalam SVG melalui elemen image mempertahankan saluran alfa apa pun yang dimiliki foto itu, jadi JPG di dalam SVG tetap membawa kotak putihnya. Dan menjalankan foto melalui pengonversi raster-ke-SVG tidak menghapus latar belakang; ia menjiplak latar belakang menjadi bentuk bersama segala hal lainnya.

Mengapa PNG Saya Tidak Transparan?

Lakukan pemeriksaan ini secara berurutan. File yang lolos pemeriksaan pertama tidak perlu diperbaiki sama sekali.

Penampil mengecat latar belakangnya. Penampil gambar harus meletakkan sesuatu di belakang piksel transparan, dan banyak yang memilih putih atau hitam. File tidak berubah; hanya tampilannya. Buka PNG yang sama di aplikasi desain, tab browser dengan halaman gelap, atau slide dengan isian gelap. Jika kotak itu hilang, berhenti di sini.

File tidak memiliki saluran alfa. JPG yang diganti nama menjadi .png, tangkapan layar dari gambar transparan, atau file yang melewati aplikasi perpesanan atau CMS yang menyandinya ulang semuanya akan tampak opak karena memang begitu. Periksa mode gambar. Di Photoshop, panel Channels harus mencantumkan saluran Alpha; di Windows, Properties > Details menunjukkan kedalaman bit 32 untuk PNG RGBA, bukan 24; di Python, Image.open("file.png").mode mengembalikan RGBA. Jika alfa hilang, kembali ke file berlapis asli dan ekspor lagi.

Tepinya keras atau berpinggiran. Garis luar yang bertingkat seperti tangga menunjukkan transparansi 1-bit, dan pinggiran pucat atau berwarna menunjukkan piksel tepi yang masih membawa warna latar lama. Uji dinding merah kami menunjukkan bagaimana itu terjadi: dengan kemeja putih di depan dinding merah jenuh, 69% piksel tepi semitransparan condong ke merah, dan pada latar baru pita itu terbaca sebagai pinggiran. Perbaikannya adalah ekspor ulang dengan alfa 8-bit dan tanpa warna matte, dan, untuk potongan, latar netral pada foto asli atau penyusutan masker 1 piksel.

Papan catur tertanam di dalamnya. Skalakan gambar. Jika kotak abu-abu dan putih ikut membesar dan mengecil bersama gambar, itu piksel. Gambar pratinjau dari situs stok sering seperti ini. Unduh file aslinya, atau potong latar belakangnya lagi.

Pertanyaan yang Sering Diajukan

Apakah saluran alfa sama dengan masker lapisan?

Keduanya bersaudara. Bantuan Photoshop dari Adobe menjelaskan saluran alfa sebagai seleksi yang disimpan sebagai masker skala abu-abu yang dapat diedit di panel Channels, dan masker lapisan bekerja dengan cara yang sama di dalam editor. Perbedaannya adalah apa yang bertahan saat ekspor. Masker lapisan adalah alat pengeditan yang hidup di PSD. Saluran alfa yang ditulis ke PNG atau WebP adalah hasil yang telah diratakan dari setiap masker, dan itulah transparansi yang benar-benar dibaca aplikasi lain.

Berapa banyak tingkat transparansi yang dimiliki saluran alfa 8-bit?

256, dari 0 (sepenuhnya transparan) hingga 255 (sepenuhnya opak). Saluran alfa 16-bit, yang juga didukung PNG, memiliki 65.536. GIF memiliki dua: digambar atau dilewati.

Bisakah saya menambahkan saluran alfa ke JPG?

Tidak, selama file tetap JPG, karena formatnya tidak punya tempat untuk menyimpannya. Buka file, pisahkan subjek dari latar belakang, dan simpan hasilnya sebagai PNG atau WebP. Alat potong berbasis browser di Atlas Cloud melakukan konversi dalam satu langkah: JPG masuk, PNG transparan keluar, gratis digunakan dan tanpa login.

Apakah transparansi WebP berfungsi di setiap browser?

Versi terkini dari browser utama merender WebP dengan alfa, dan tabel kompatibilitas MDN untuk format ini adalah tempat untuk memastikan dukungan bagi versi lama yang masih perlu Anda layani. Jika audiens legacy penting, sajikan PNG sebagai fallback melalui elemen picture.

Mengapa PNG transparan saya memiliki halo putih?

Piksel di sepanjang tepi sebagian transparan, dan warnanya masih membawa latar dari mana mereka dipotong. Pada aslinya yang putih, pita itu tampak seperti halo putih begitu Anda menempatkan potongan pada sesuatu yang gelap. Ekspor ulang dengan alfa 8-bit dan matte diatur ke none, atau susutkan seleksi satu piksel sebelum menyimpan.

Kesimpulan

Transparansi adalah sebuah angka. Setiap piksel dalam PNG atau WebP RGBA membawa nilai alfa dari 0 hingga 255, dan begitu itu dipahami, format lain akan dengan sendirinya menjadi jelas: GIF memiliki satu tanda nyala-mati, JPG tidak punya apa-apa, dan SVG tidak memiliki latar yang perlu dihapus sejak awal. Tujuh potongan yang kami ukur menempatkan seluruh tepi anti-alias dalam pita 0,7% hingga 2,2% dari gambar, tepatnya bagian yang dibuang oleh format 1-bit.

Jika Anda datang ke sini untuk bertanya apa itu saluran alfa karena file menolak menjadi transparan, periksa penampilnya dulu, lalu mode file, lalu tepinya. Dan jika Anda memerlukan saluran alfa yang bersih tanpa membuka editor, penghapus latar belakang berbasis browser akan memberikannya kepada Anda dalam satu PNG, pada ukuran piksel yang Anda mulai.