Di Google, kami selalu mencari cara untuk membuat halaman web dimuat lebih cepat. Salah satu cara untuk melakukan hal ini adalah dengan membuat gambar web lebih kecil. Gambar mencakup 60%-65% byte di sebagian besar halaman web dan ukuran halaman adalah faktor utama dalam total waktu rendering. Ukuran halaman sangat penting untuk perangkat seluler, karena gambar yang lebih kecil menghemat bandwidth dan masa pakai baterai.
WebP adalah format gambar baru yang dikembangkan oleh Google dan didukung di Chrome, Opera, dan Android yang dioptimalkan untuk memungkinkan gambar yang lebih cepat dan lebih kecil di Web. Gambar WebP berukuran sekitar 30% lebih kecil dibandingkan gambar PNG dan JPEG yang memiliki kualitas visual yang setara. Selain itu, format gambar WebP juga memiliki kesamaan fitur dengan format lainnya. API ini mendukung:
Kompresi lossy: Kompresi lossy didasarkan pada encoding key frame VP8. VP8 adalah format kompresi video yang dibuat oleh On2 Technologies sebagai penerus format VP6 dan VP7.
Kompresi lossless: Format kompresi lossless dikembangkan oleh tim WebP.
Transparansi: Saluran alfa 8-bit berguna untuk gambar grafis. Saluran Alfa dapat digunakan bersama dengan RGB lossy, fitur yang saat ini tidak tersedia dengan format lainnya.
Animasi: Mendukung gambar animasi berwarna asli.
Metadata: Mungkin memiliki metadata EXIF dan XMP (misalnya digunakan oleh kamera).
Profil Warna: Mungkin memiliki profil ICC tersemat.
Karena kompresi gambar yang lebih baik dan dukungan untuk semua fitur ini, WebP dapat menjadi pengganti yang sangat baik untuk sebagian besar format gambar: PNG, JPEG, atau GIF. Yang lebih penting, tahukah Anda bahwa WebP memberikan peluang pengoptimalan gambar baru, seperti dukungan untuk gambar lossy dengan transparansi? Ya! WebP adalah format gambar Swiss Army.
Jadi, bagaimana keajaiban ini dilakukan? Mari kita lihat ke balik layar.
WebP lossy
Kompresi lossy WebP menggunakan metodologi yang sama seperti VP8 untuk memprediksi frame (video). VP8 didasarkan pada prediksi blok dan seperti codec berbasis blok lainnya, VP8 membagi frame menjadi segmen yang lebih kecil yang disebut macroblock.
Dalam setiap makroblok, encoder dapat memprediksi informasi gerakan dan warna redundan berdasarkan blok yang diproses sebelumnya. Bingkai gambar adalah "kunci" dalam arti hanya menggunakan piksel yang sudah didekode di lingkungan spasial terdekat dari setiap macroblok, dan mencoba mengisi bagian yang tidak diketahui dari mereka. Hal ini disebut coding prediktif (lihat coding intra-frame video VP8).
Data redundan kemudian dapat dikurangi dari blok, sehingga menghasilkan kompresi yang lebih efisien. Hanya ada perbedaan kecil, yang disebut sisa, untuk ditransmisikan dalam bentuk terkompresi.
Setelah dikenai transformasi invertibel secara matematis (DCT yang terkenal, singkatan dari Discrete Cosine Transform), residualnya biasanya berisi banyak nilai nol, yang dapat dikompresi dengan jauh lebih efektif. Hasilnya kemudian dikuantisasi dan dikodekan dengan entropi. Yang menarik, langkah kuantisasi adalah satu-satunya di mana bit dibuang lossy (telusuri pembagian dengan QPj dalam diagram di bawah). Semua langkah lainnya tidak dapat dibalik dan lossless.
Diagram berikut menunjukkan langkah-langkah yang diperlukan dalam kompresi lossy WebP. Fitur yang membedakan dibandingkan dengan JPEG dilingkari dengan warna merah.
WebP menggunakan kuantisasi blok dan mendistribusikan bit secara adaptif di berbagai segmen gambar: bit yang lebih sedikit untuk segmen entropi rendah dan bit yang lebih tinggi untuk segmen entropi yang lebih tinggi. WebP menggunakan Encoding entropi aritmetika, mencapai kompresi yang lebih baik dibandingkan encoding Huffman yang digunakan dalam JPEG.
Mode Intra-Prediksi VP8
Mode intra-prediksi VP8 digunakan dengan tiga jenis makroblok:
- luma 4x4
- 16x16 luma
- Kroma 8x8
Empat mode intra-prediksi yang umum digunakan bersama oleh makroblok ini:
H_PRED (prediksi horizontal). Mengisi setiap kolom blok dengan salinan kolom kiri, L.
V_PRED (prediksi vertikal). Mengisi setiap baris blok dengan salinan dari baris di atas, A.
DC_PRED (Prediksi DC). Mengisi blok dengan satu nilai menggunakan rata-rata piksel pada baris di atas A dan kolom di sebelah kiri L.
TM_PRED (Prediksi TrueMotion). Mode yang mendapatkan namanya dari teknik kompresi yang dikembangkan oleh On2 Technologies. Selain baris A dan kolom L, TM_PRED menggunakan piksel P di atas dan di sebelah kiri blok. Perbedaan horizontal antara piksel di A (dimulai dari P) disebarkan menggunakan piksel dari L untuk memulai setiap baris.
Diagram di bawah mengilustrasikan berbagai mode prediksi yang digunakan dalam kompresi lossy WebP.
Untuk blok luma 4x4, ada enam mode intra tambahan yang mirip dengan V_PRED dan H_PRED, tetapi hal tersebut berkaitan dengan memprediksi piksel ke arah yang berbeda. Detail selengkapnya tentang mode ini dapat ditemukan di Panduan Bitstream VP8.
Kuantisasi Blok Adaptif
Untuk meningkatkan kualitas gambar, gambar disegmentasikan ke dalam area yang memiliki fitur yang terlihat mirip. Untuk setiap segmen ini, parameter kompresi (langkah kuantisasi, kekuatan pemfilteran, dll.) disesuaikan secara independen. Hal ini menghasilkan kompresi yang efisien dengan mendistribusikan ulang bit ke tempat yang paling berguna. VP8 memungkinkan maksimal empat segmen (batasan bitstream VP8).
Mengapa WebP (lossy) Lebih Baik daripada JPEG
Coding prediksi adalah alasan utama WebP lebih unggul daripada JPEG. Kuantisasi adaptif blok juga membuat perbedaan besar. Pemfilteran membantu pada kecepatan bit sedang/rendah. Encoding aritmetika Boolean memberikan perolehan kompresi sebesar 5%-10% dibandingkan dengan encoding Huffman.
WebP Tanpa Kerugian
Encoding lossless WebP didasarkan pada transformasi gambar menggunakan beberapa teknik yang berbeda. Kemudian, coding entropi dilakukan pada parameter transformasi dan data gambar yang ditransformasi. Transformasi yang diterapkan pada gambar mencakup prediksi spasial piksel, transformasi ruang warna, menggunakan palet muncul secara lokal, mengemas beberapa piksel menjadi satu piksel, dan penggantian alfa. Untuk coding entropi, kami menggunakan varian coding LZ77-Huffman, yang menggunakan encoding 2D untuk nilai jarak dan nilai renggang yang ringkas.
Transformasi Predictor (Spasial)
Prediksi spasial digunakan untuk mengurangi entropi dengan memanfaatkan fakta bahwa piksel yang berdekatan sering kali berkorelasi. Dalam transformasi prediktor, nilai piksel saat ini diprediksi dari piksel yang telah didekode (dalam urutan garis pemindaian), dan hanya nilai residu (aktual - diprediksi) yang dienkode. Mode prediksi menentukan jenis prediksi yang akan digunakan. Gambar dibagi menjadi beberapa area persegi dan semua piksel dalam satu persegi menggunakan mode prediksi yang sama.
Ada 13 kemungkinan mode prediksi berbeda. Yang umum adalah piksel kiri, atas, kiri atas, dan kanan atas. Sisanya adalah kombinasi (rata-rata) dari kiri, atas, kiri atas, dan kanan atas.
Transformasi Warna (de-korelasi)
Tujuan transformasi warna adalah untuk mendekorasi nilai R, G, dan B dari setiap piksel. Transformasi warna mempertahankan nilai hijau (G) apa adanya, mengubah merah (R) berdasarkan warna hijau, dan mengubah biru (B) berdasarkan warna hijau lalu berubah menjadi merah.
Seperti halnya transformasi prediktor, pertama-tama gambar dibagi menjadi blok dan mode transformasi yang sama digunakan untuk semua piksel dalam blok. Untuk setiap blok, ada tiga jenis elemen transformasi warna: green_to_red, green_to_blue, dan red_to_blue.
Mengurangi Transformasi Hijau
"Kurangi transformasi hijau" akan mengurangi nilai hijau dari nilai merah dan biru setiap piksel. Jika transformasi ini ada, decoder harus menambahkan nilai hijau menjadi merah dan biru. Ini adalah kasus khusus dari transformasi dekorasi warna umum di atas, cukup sering untuk menyebabkan pemotongan.
Transformasi Pengindeksan Warna (palette)
Jika tidak ada banyak nilai piksel unik, mungkin akan lebih efisien untuk membuat array indeks warna dan mengganti nilai piksel dengan indeks array. Transformasi pengindeksan warna mencapai hal ini. Transformasi pengindeksan warna memeriksa jumlah nilai ARGB unik dalam gambar. Jika angka tersebut lebih rendah dari nilai minimum (256), array nilai ARGB tersebut akan dibuat, yang kemudian digunakan untuk mengganti nilai piksel dengan indeks yang sesuai.
Pengkodean Cache Warna
Kompresi WebP lossless menggunakan fragmen gambar yang sudah terlihat untuk merekonstruksi piksel baru. Aplikasi ini juga dapat menggunakan palet lokal jika tidak ditemukan kecocokan yang menarik. Palet ini terus diperbarui untuk menggunakan kembali warna terkini. Pada gambar di bawah, Anda dapat melihat cara kerja cache warna lokal yang diupdate secara bertahap dengan 32 warna yang baru-baru ini digunakan saat pemindaian berjalan ke bawah.
Referensi Mundur LZ77
{i>Backward reference <i}adalah tuple kode panjang dan jarak. Panjang menunjukkan jumlah piksel dalam urutan garis pemindaian yang akan disalin. Kode jarak adalah angka yang menunjukkan posisi piksel yang terlihat sebelumnya, tempat piksel akan disalin. Nilai panjang dan jarak disimpan menggunakan kode awalan LZ77.
Coding awalan LZ77 membagi nilai bilangan bulat besar menjadi dua bagian: kode awalan dan bit tambahan. Kode awalan disimpan menggunakan kode entropi, sedangkan bit tambahan disimpan sebagaimana adanya (tanpa kode entropi).
Diagram di bawah mengilustrasikan LZ77 (varian 2D) dengan pencocokan kata (bukan piksel).
WebP lossy dengan Alfa
Selain WebP lossy (warna RGB) dan WebP lossless (RGB lossless dengan alfa), ada mode WebP lain yang memungkinkan encoding lossy untuk saluran RGB dan encoding lossless untuk saluran alfa. Kemungkinan tersebut (RGB lossy dan alfa lossless) tidak tersedia saat ini pada format gambar apa pun yang sudah ada. Saat ini, webmaster yang membutuhkan transparansi harus mengenkode gambar secara lossless dalam format PNG, yang akan menyebabkan penggelembungan ukuran yang signifikan. WebP alfa mengenkode gambar dengan bit per piksel yang rendah dan memberikan cara yang efektif untuk mengurangi ukuran gambar tersebut. Kompresi lossless pada saluran alfa hanya menambahkan 22% byte daripada encoding WebP lossy (kualitas 90).
Secara keseluruhan, mengganti PNG transparan dengan WebP lossy+alpha akan memberikan penghematan ukuran rata-rata 60-70%. Hal ini telah dikonfirmasi sebagai fitur yang sangat menarik untuk situs seluler yang kaya ikon (misalnya, everything.me ).
