Catatan dari tim tentang keahlian, format, dan keputusan kecil di balik hasil yang baik.
Bagaimana WebP mencapai ukuran lebih kecil dari PNG
WebP memakai dua mode kompresi berbeda. Mode lossless memadukan prediksi spasial dan warna dengan tahap pengodean entropi yang lebih canggih daripada DEFLATE milik PNG, mencapai rasio kompresi kira-kira 26 persen lebih baik pada gambar pada umumnya menurut tolok ukur terbit Google. Mode lossy menerapkan transformasi berbasis blok yang mirip kompresi video, dirancang untuk membuang informasi yang secara persepsi tidak relevan sambil mempertahankan apa yang benar-benar dilihat mata. Untuk gambar bertransparansi, WebP memakai sub-kompresi lossless terpisah pada data transparansi sambil menerapkan kompresi lossy pada data RGB, itulah mengapa WebP lossy dengan transparansi bisa kira-kira tiga kali lebih kecil daripada PNG pada kualitas visual setara. DEFLATE milik PNG hanya lossless dan tak bisa memanfaatkan kompromi persepsi yang dimanfaatkan mode lossy. Perbedaan format inilah yang menjelaskan kesenjangannya.
Alpha channel secara rinci
PNG dan WebP sama-sama mendukung transparansi alpha 8-bit, yang berarti tiap piksel bisa menyimpan nilai opasitas dari 0 (sepenuhnya transparan) hingga 255 (sepenuhnya buram). Saat mesin gambar platform menyimpan ulang PNG menjadi WebP, ia membaca nilai RGBA setiap piksel dan meneruskan nilai alpha langsung ke tahap kompresi WebP, di mana keduanya dipertahankan dengan kompresi lossless terlepas dari bagaimana data RGB disimpan. Hasilnya, setiap piksel transparan pada PNG di alpha 0, setiap piksel separuh transparan antara 1 dan 254, dan setiap piksel buram di 255 dipetakan ke keadaan yang persis sama pada WebP. Untuk logo dengan bayangan jatuh lembut atau teks anti-alias di latar transparan, kehalusan tepi bertahan utuh. Ini berbeda dengan JPG, yang tidak punya bidang alpha dalam spesifikasi kontainernya dan harus mengomposit gambar terhadap warna latar sebelum menyimpan.
Core Web Vitals dan pilihan format gambar
Largest Contentful Paint mengukur berapa lama elemen terlihat terbesar pada halaman muncul di viewport. Untuk sebagian besar halaman konten, elemen itu adalah gambar hero, dan Google memakai LCP sebagai sinyal peringkat dalam penilaian Core Web Vitals-nya. Gambar PNG adalah sumber kegagalan LCP yang konsisten karena ukuran filenya, sebab PNG fotografik pada resolusi 4K bisa berbobot beberapa megabita sementara WebP setara pada kualitas hampir lossless biasanya hanya sebagian kecilnya. PageSpeed Insights menandai ini secara khusus pada item audit serve-images-in-next-gen-formats, mencantumkan PNG sebagai format target untuk diganti. Mengonversi PNG yang muncul di jalur render kritis menjadi WebP adalah salah satu perubahan tunggal paling berdaya ungkit untuk memperbaiki kinerja halaman yang terukur. Garis waktu dukungan browser membuatnya aman, dengan Chrome menambahkan WebP pada 2011, Firefox pada 2019, Safari pada 2020, dan Edge sejak pembangunan ulang Chromium-nya.
Hasil lossy dan setelan hampir lossless
Penyimpanan WebP menawarkan parameter kualitas dari 0 sampai 100, di mana nilai lebih tinggi mempertahankan lebih banyak detail dengan ongkos file lebih besar. Alat ini menyimpan pada setelan hampir lossless tetap yang disetel untuk menyeimbangkan kesetiaan visual terhadap ukuran file untuk kategori aset web khas berupa foto, grafik antarmuka, dan ikon. Pada setelan ini, hasilnya secara persepsi tak terbedakan dari PNG sumber pada jarak tampilan layar normal. Secara teknis, sebagian presisi tingkat bit hilang dibanding penyimpanan lossless sejati, yang berarti perbandingan tingkat bita antara piksel WebP yang didekode dan piksel PNG asli akan menunjukkan selisih numerik kecil. Selisih ini berada di bawah ambang persepsi manusia untuk konten fotografik. Untuk pencitraan medis, fotografi satelit, atau pelestarian digital arsip, di mana kesetiaan lossless adalah persyaratan keras, pendekatan yang benar adalah menyimpan PNG dan memakai WebP hanya sebagai ekspor pengiriman, bukan salinan kerja.
Perilaku metadata
Pipeline yang dipakai untuk konversi PNG-ke-WebP menghapus metadata EXIF, IPTC, dan XMP dari hasilnya. Ini sesuai dengan perilaku yang teramati di ketiga mesin browser utama. Profil warna ICC ditangani secara tidak konsisten, di mana Chrome dan Safari mempertahankan tag profil ICC sRGB pada hasil WebP dan Firefox menghapus semua metadata termasuk profil ICC. Hasil bersihnya adalah WebP yang dikonversi aman-sRGB lintas browser, tetapi tag gamut luas seperti Display-P3, Adobe RGB, atau ProPhoto RGB yang ada pada PNG sumber tidak akan bertahan di Firefox. Untuk alur kerja profesional yang sensitif warna, inkonsistensi ini penting, jadi jika hasil akhir butuh kesetiaan profil warna, konversikan dengan alat yang secara eksplisit menulis data ICC, atau terapkan tag profil sebagai langkah pasca-proses memakai editor metadata gambar khusus.
Kapan menyimpan PNG dan kapan WebP memadai
Pohon keputusannya pendek. Jika tujuan akhir gambar adalah halaman web atau aplikasi web, dan lingkungan render adalah browser mana pun sejak 2020, WebP adalah format ekspor yang tepat. Jika gambar perlu dibuka di aplikasi desain seperti Figma, Sketch, atau Affinity Designer, verifikasi dukungan WebP pada versi spesifik yang Anda pakai, sebab dukungannya bervariasi. Jika gambar akan dipakai dalam alur kerja cetak, PNG atau TIFF lebih disukai sebab sebagian besar RIP cetak tidak menangani WebP. Jika gambar akan dikirim lewat surel, PNG lebih aman sebab klien surel terkenal tidak konsisten dengan format modern. Jika gambar akan dipakai sebagai file kerja yang disunting dan disimpan ulang berkali-kali, simpan PNG sebagai master. WebP pada kualitas hampir lossless adalah format pengiriman yang sangat baik, dan PNG adalah format arsip dan penyuntingan yang lebih baik. Alur kerja ideal menyimpan PNG sebagai asli dan mengekspor ke WebP untuk pengiriman web.
