Gambar transparan tanpa beban PNG
Selama bertahun-tahun PNG adalah satu-satunya pilihan aman untuk gambar web apa pun yang punya transparansi: foto produk yang dipotong, logo di atas header berwarna, ilustrasi dengan bayangan lembut. JPG sama sekali tidak bisa menyimpan transparansi, jadi desainer menerima file PNG yang besar sebagai harganya. Foto produk potongan berukuran 1500×1500 px sering berbobot 1,5 sampai 3 MB sebagai PNG.
WebP menghapus kompromi itu. Ia mendukung kanal alfa 8-bit penuh dalam mode lossless maupun lossy, sehingga bagian foto dari gambar bisa dikompres seperti JPG sementara transparansinya tetap halus. Foto produk potongan yang sama biasanya menjadi 150 sampai 400 KB, dan karena semua browser saat ini menampilkan WebP, format ini bisa langsung menggantikan PNG di sebagian besar situs web.
PNG mana yang paling diuntungkan
Penghematannya bergantung pada isi PNG, bukan hanya ukuran filenya.
- Konten fotografis dengan transparansi paling diuntungkan: potongan produk, potret dengan background yang dihapus, ilustrasi bertekstur. Penghematan 70 sampai 90 persen adalah hal biasa.
- Tangkapan layar dan mockup UI dengan gradasi, foto, atau bayangan biasanya menyusut separuh atau lebih.
- Ikon datar dan logo sederhana dengan segelintir warna solid hanya sedikit diuntungkan. PNG sudah mengompres gambar seperti ini dengan sangat baik, dan beberapa ikon kecil bahkan bisa sedikit lebih besar. Untuk itu, mempertahankan PNG atau menjalankannya lewat Kompres PNG sering kali pilihan yang lebih baik.
- PNG yang sudah dioptimalkan dengan reduksi palet menghemat lebih sedikit dibanding ekspor baru dari alat desain.
Daftar file menampilkan ukuran asli dan baru untuk setiap gambar, sehingga mudah menemukan mana yang tidak layak dikonversi.
Bagaimana konversi dilakukan
Browser mendekode setiap PNG, menggambarnya di canvas dengan ukuran piksel asli, lalu meng-encode-nya dengan encoder WebP bawaan, di background worker jika browser mendukungnya. Gambar tidak pernah keluar dari perangkat Anda.
Slider "Kualitas", dari 10% sampai 100% dengan 90% sebagai nilai bawaan, mengatur kompresi lossy pada data warna. Masker transparansi dikompres terpisah dari warna dan, dengan encoder browser pada umumnya, tidak terdegradasi oleh slider dengan cara yang sama, sehingga tepi potongan tetap bersih bahkan pada 75%.
Ada detail teknis yang penting untuk sebagian alur kerja: canvas bekerja dengan alfa premultiplied, jadi nilai warna dari piksel yang sepenuhnya transparan dibuang. Ini tidak terlihat di browser atau dokumen. Hal ini baru berpengaruh jika Anda memakai PNG sebagai tekstur game atau masker yang mengandalkan data warna tersembunyi di bawah area transparan; pertahankan file seperti itu sebagai PNG.
Nilai kualitas untuk grafis
Nilai bawaan 90% sengaja lebih tinggi daripada untuk foto, karena konten PNG yang khas, seperti elemen antarmuka, teks, dan garis tajam, lebih cepat menampilkan artefak kompresi dibanding foto.
- 90% untuk logo, tangkapan layar antarmuka, dan ilustrasi berisi teks. Secara visual identik dengan sumbernya di hampir semua kasus.
- 80% untuk potongan foto dan gambar hero yang ukuran filenya penting. Perbedaannya baru terlihat saat diperbesar.
- 95–100% untuk pixel art, grafik dengan garis tipis, dan tangkapan layar teks kecil. Mode lossy WebP menyimpan warna dengan setengah resolusi, yang bisa membuat garis berwarna selebar satu piksel menjadi buram; di ujung atas rentang, efek ini minimal.
Jika Anda berencana mengubah gambar nanti, simpan PNG aslinya. WebP ditujukan untuk salinan final yang dipublikasikan, dan mengonversi WebP lossy kembali dengan Konversi WebP ke PNG menghasilkan file besar tanpa memulihkan detail yang hilang.
Memakai hasilnya di situs
Ganti file gambar dan perbarui ekstensi di referensinya; tidak perlu perubahan markup lain untuk browser saat ini. Beberapa catatan praktis:
- Sesuaikan ukuran gambar dengan ukuran tampilnya sebelum mengonversi. Logo yang ditampilkan selebar 240 px tidak mendapat apa-apa dari ukuran 2400 px.
- Format WebP punya batas keras 16383 px per sisi, jadi tangkapan layar yang sangat panjang atau sprite sheet di atas itu perlu dipotong.
- File hingga 50 MB per file diterima, dan satu batch dikonversi dengan satu pengaturan kualitas dan bisa diunduh sebagai ZIP.
- Chunk teks dan metadata lain di dalam PNG tidak disalin ke WebP.