Cara Menyimpan PNG Transparan Tanpa Tepi Putih

Apa yang sebenarnya disimpan saluran alfa

Piksel PNG menyimpan empat angka: merah, hijau, biru, dan alfa. Alfa adalah opasitas, dari 0 (tak terlihat) hingga 255 (sepenuhnya solid). Detail pentingnya adalah piksel tetap menyimpan nilai RGB-nya bahkan ketika alfa rendah. Sebuah piksel dapat berwarna putih murni dan 90 persen transparan. Anda hampir tidak akan melihatnya — sampai piksel itu digabungkan di atas sesuatu yang gelap, lalu warna putih samar tersebut terlihat.

Setiap masalah tepi putih merupakan variasi hal yang sama: piksel tepi sebagian transparan yang menyimpan warna salah di bawahnya.

Penyebab 1: Tepian antialias bercampur dengan putih

Gambar digital memiliki piksel persegi; objek nyata memiliki tepi melengkung. Antialias menjembatani perbedaan ini dengan membuat piksel di sepanjang tepi menjadi campuran objek dan latar di belakangnya. Piksel yang 40 persen tertutup logo merah pada halaman putih disimpan sebagai merah muda pucat — 40 persen merah dicampur 60 persen putih.

Sekarang hapus latar. Penghapus biasa membersihkan piksel yang sangat mirip warna latar dan mempertahankan sisanya. Piksel merah muda pucat tidak cukup dekat dengan putih murni untuk dihapus, sehingga bertahan pada opasitas penuh, tetap merah muda pucat. Kalikan pada setiap piksel sepanjang garis tepi dan Anda mendapat batas terang satu piksel di seluruh bentuk.

Penghapus yang lebih baik bekerja lebih cerdas: alih-alih pilihan biner simpan atau hapus, piksel diatur menjadi alfa 40 persen dan warna merah dasarnya dicoba dipulihkan. Namun memulihkan warna asli dari campuran merupakan perkiraan, dan seberapa banyak putih yang berhasil dihilangkan menentukan seberapa bersih tepinya.

Penyebab 2: Format membuang kanal alfa

JPEG tidak memiliki kanal alfa. Sama sekali. Format tiga kanal ini dirancang untuk foto, dan tidak ada tempat dalam berkas untuk menyimpan transparansi. Ketika menyimpan gambar transparan sebagai JPG, pengode meratakannya pada latar — hampir selalu putih — dan transparansi hilang permanen.

Di sinilah bencana klasik terjadi. Ekspor PNG bersih, lalu sesuatu mengubahnya ke JPG: CMS mengubah ukuran unggahan, chat memampatkan lampiran, alat desain ekspor pratinjau, klien email. Latar transparan menjadi persegi putih solid, dan menghapus putih lagi memotong tepi terkompresi JPEG yang jauh lebih kacau daripada asli.

Perhatikan baris GIF. Transparansi satu bit berarti setiap piksel sepenuhnya terlihat atau tidak terlihat — tidak ada cakupan parsial, sehingga antialias tidak mungkin dan semua tepi bergerigi. Mengonversi PNG halus ke GIF menukar halo lembut dengan tangga.

Penyebab 3: Pinggiran matte

Beberapa editor menyimpan gambar transparan dengan warna "matte": RGB piksel sepenuhnya transparan diatur ke warna pilihan, biasanya putih, karena dianggap tidak penting saat alfa nol. Biasanya memang demikian. Namun beberapa perender dan kebanyakan operasi pengubahan ukuran meratakan piksel tetangga termasuk nilai RGB-nya, baik dibobot dengan alfa maupun tidak. Pengubahan ukuran naif menarik putih dari piksel tak terlihat dan menyebarkannya ke tepi terlihat.

Itulah alasan gambar sempurna pada ukuran penuh mendapat halo setelah diperkecil menjadi gambar mini. Teknik benar adalah premultiplied alpha, RGB disimpan sudah dikalikan alfa agar perataan benar. Kebanyakan peramban dan engine modern menangani dengan benar; alur lama dan beberapa kode khusus tidak.

Perbaikan menurut urutan preferensi

1. Jangan menciptakan masalah sejak awal

Jika Anda mengendalikan sumber, ini pilihan terbaik sejauh ini. Ekspor karya dari alat pembuatnya dengan latar transparan sejak awal, bukan mengekspor rata pada putih lalu memotong putihnya kembali. Alat vektor, perender 3D, dan aplikasi desain semuanya mendukung ekspor alfa. Setiap langkah penghapusan adalah langkah yang dapat gagal.

Jika membuat gambar dengan model AI, minta latar transparan secara eksplisit, atau warna latar yang tidak muncul pada subjek. Magenta cerah adalah pilihan tradisional: tidak ada objek alami berwarna demikian, sehingga pemisahannya jelas.

2. Hapus latar belakang dengan warna pembanding yang kontras

Halo putih ada karena latar putih. Jika subjek di magenta atau hijau neon, piksel tepi sisa berwarna magenta atau hijau — mungkin lebih buruk terlihat, tetapi jauh lebih mudah dideteksi dan dikoreksi karena warna sangat berbeda dari apa pun pada subjek.

Alat kami Penghapus Latar Belakang bekerja dengan mengambil sampel piksel sudut untuk mengenali warna latar dan menghapus piksel yang cocok, lalu mengekspor PNG transparan. Alat menangani latar rata dan solid dengan baik — foto produk di atas putih, logo pada satu warna, grafis hasil ekspor alat. Alat tidak dirancang untuk foto berlatar ramai atau gradasi; pendekatan segmentasi subjek lebih tepat.

3. Susutkan alfa satu piksel

Jika halo sudah tertanam, perbaikan paling sederhana yang andal adalah mengecilkan sedikit area terlihat agar cincin terkontaminasi berada di luar. Dalam editor: muat kanal alfa sebagai seleksi, susutkan satu piksel, balikkan seleksi, lalu hapus. Dalam istilah Photoshop, ini Layer → Matting → Defringe, yang kira-kira melakukannya otomatis; GIMP memiliki Layer → Transparency → Threshold Alpha dan opsi remove-antialiasing Script-Fu.

Komprominya nyata: Anda menghapus satu piksel detail tepi asli. Pada logo 2000 piksel tak terlihat. Pada ikon 32 piksel, satu piksel tiga persen lebar dan bentuk tampak menipis. Sesuaikan perbaikan dengan gambar.

4. Warnai ulang tepi, bukan menghapusnya

Lebih baik untuk gambar kecil. Alih-alih menghapus cincin semitransparan, ganti RGB-nya dengan warna yang seharusnya — warna piksel bagian dalam yang berdekatan — sambil membiarkan alfa tetap sama. Tepi mempertahankan kelembutan dan bentuknya; hanya kontaminasinya hilang. Defringe Photoshop dengan radius kecil mendekati hasil ini, dan mudah diterapkan langsung jika Anda bekerja dengan kode pada data gambar canvas.

5. Gabungkan dengan warna tujuan

Terkadang jawaban jujur adalah tidak membutuhkan transparansi. Jika logo hanya muncul pada satu latar yang diketahui, ratakan pada warna tepat itu dan kirim gambar biasa. Tanpa alfa, halo, atau risiko format. Ini bukan sekadar siasat, melainkan menyadari transparansi hanya layak dengan kompleksitasnya ketika latar benar-benar bervariasi.

Memeriksa pekerjaan Anda

Sebelum menganggap potongan selesai, periksa daftar ini. Hanya memerlukan satu menit dan menangkap hampir semua masalah.

1. Lihat pada latar hitam dan putih. Halo akan terlihat jelas pada salah satu dari keduanya. Pratinjau papan catur dalam editor dapat menipu karena abu-abu sedang menyamarkan pinggiran terang maupun gelap.
2. Lihat pada 100 persen dan setelah diperkecil. Halo yang hanya muncul saat gambar diskalakan menunjukkan pinggiran matte pada tahap pengubahan ukuran, bukan masalah berkas.
3. Pastikan berkas benar-benar PNG atau WebP. Periksa ekstensi dan byte sebenarnya, bukan hanya keterangan CMS. Berkas bernama logo.png yang pernah melewati pipeline JPEG merupakan kegagalan umum dan membingungkan.
4. Uji di tujuan sebenarnya. Peramban, engine game, dan alur cetak menggabungkan gambar dengan cara berbeda. Satu-satunya pengujian yang menentukan adalah di tempat gambar benar-benar digunakan.
5. Periksa lapisan tak sengaja yang memenuhi kanvas. Lapisan latar yang hampir tidak terlihat pada opasitas 1 persen tidak tampak dalam editor, tetapi akan menghasilkan lapisan warna samar pada hasil ekspor.

Pertanyaan yang sering diajukan