Di Google, kami terus mencari cara untuk membuat halaman web dimuat lebih cepat. Salah satu cara untuk melakukan hal ini adalah dengan membuat gambar web lebih kecil. Gambar terdiri hingga 60%-65% byte di sebagian besar halaman web dan ukuran halaman merupakan 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. Ukuran gambar WebP sekitar 30% lebih kecil dibandingkan dengan gambar PNG dan JPEG dengan kualitas visual yang setara. Selain itu, format gambar WebP juga memiliki fitur setara dengan format lain. Fitur ini mendukung:
Kompresi yang kalah: Kompresi lossy didasarkan pada encoding key key VP8. VP8 adalah format kompresi video yang dibuat oleh On2 Technologies sebagai penerus format VP6 dan VP7.
Kompresi loses: Format kompresi lossy dikembangkan oleh tim WebP.
Transparansi: Saluran alfa 8 bit berguna untuk gambar grafis. Saluran Alfa dapat digunakan bersama dengan RGB lossy, sebuah fitur yang saat ini tidak tersedia dengan format lainnya.
Animasi: Fitur ini mendukung gambar animasi warna asli.
Metadata: Aplikasi mungkin memiliki metadata EXIF dan XMP (misalnya, digunakan oleh kamera).
Profil Warna: Profil ini mungkin memiliki profil ICC yang disematkan.
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. Lebih baik lagi, tahukah Anda bahwa WebP memungkinkan peluang pengoptimalan gambar baru, seperti dukungan untuk gambar lossy dengan transparansi? Ya! WebP adalah pisau Format Swiss Swiss.
Jadi, bagaimana keajaiban ini dilakukan? Mari kita lanjutkan dan cari tahu di balik layar.
WebP turun
Kompresi lossy WebP menggunakan metodologi yang sama seperti VP8 untuk memprediksi frame (video). VP8 didasarkan pada prediksi blok dan seperti codec berbasis blok mana pun, VP8 membagi frame menjadi segmen yang lebih kecil yang disebut makroblok.
Dalam setiap makroblock, encoder dapat memprediksi informasi gerakan dan warna yang berlebihan berdasarkan blok yang diproses sebelumnya. Bingkai gambar adalah "key" dalam hal itu berarti hanya menggunakan piksel yang sudah didekode dalam lingkungan spasial langsung dari setiap blok makro, dan mencoba mengisi bagian yang tidak dikenal tersebut. Ini disebut coding prediktif (lihat encoding intra-frame video VP8).
Data redundan kemudian dapat dikurangkan dari blok, sehingga menghasilkan kompresi yang lebih efisien. Kita hanya memiliki sedikit perbedaan, yang disebut residual, untuk ditransmisikan dalam bentuk terkompresi.
Setelah mengalami transformasi inversi matematis (DCT yang terkenal, yang merupakan singkatan dari Discrete Cosine Transform), residunya biasanya berisi banyak nilai nol, yang dapat dikompresi jauh lebih efektif. Hasilnya kemudian dikuantisasi dan dikodekan dengan entropi. Lucunya, langkah kuantisasi adalah satu-satunya yang membuat bit menjadi lossy-ly (telusuri pembagian dengan QPj dalam diagram di bawah). Semua langkah lainnya dapat dibalikkan dan tanpa kehilangan.
Diagram berikut menampilkan langkah-langkah yang terlibat 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: lebih sedikit bit untuk segmen entropi rendah dan bit lebih tinggi untuk segmen entropi lebih tinggi. WebP menggunakan encoding entropi Aritmetika, mencapai kompresi yang lebih baik dibandingkan dengan encoding Huffman yang digunakan dalam JPEG.
Mode Intra-prediksi VP8
Mode intra-prediksi VP8 digunakan dengan tiga jenis blok makro:
- 4x4 luma
- 16x16 luma
- Kroma 8x8
Empat mode intra-prediksi umum digunakan bersama oleh blok makro ini:
H_PRED (prediksi horizontal). Mengisi setiap kolom blok dengan salinan kolom kiri, L.
V_PRED (prediksi vertikal). Mengisi setiap baris blok dengan salinan baris di atas, A.
DC_PRED (prediksi DC). Mengisi blok dengan satu nilai menggunakan rata-rata piksel di 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 (mulai dari P) disebarkan menggunakan piksel dari L untuk memulai setiap baris.
Diagram di bawah menggambarkan berbagai mode prediksi yang digunakan dalam kompresi lossy WebP.
Untuk blok luma 4x4, ada enam mode intra tambahan yang serupa dengan V_PRED dan H_PRED, tetapi itu sesuai dengan memprediksi piksel dalam arah yang berbeda. Detail selengkapnya tentang mode ini dapat ditemukan di Panduan Bitstream VP8.
Kuantisasi Blok Adaptif
Untuk meningkatkan kualitas gambar, gambar disegmentasikan ke area yang memiliki fitur serupa. Untuk setiap segmen ini, parameter kompresi (langkah kuantisasi, kekuatan pemfilteran, dll.) disetel secara independen. Cara 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 menang dari JPEG. Blokir kuantisasi adaptif juga membuat perbedaan besar. Pemfilteran membantu pada kecepatan bit menengah/rendah. Encoding aritmetika Boolean memberikan peningkatan kompresi 5%-10% dibandingkan dengan encoding Huffman.
WebPless
Encoding WebP-lossless didasarkan pada transformasi gambar menggunakan beberapa teknik yang berbeda. Selanjutnya, coding entropi dilakukan pada parameter transformasi dan data gambar yang ditransformasi. Transformasi yang diterapkan ke gambar mencakup prediksi spasial piksel, transformasi ruang warna, menggunakan palet yang muncul secara lokal, memaketkan 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 Prediktor (Spasial)
Prediksi spasial digunakan untuk mengurangi entropi dengan memanfaatkan fakta bahwa piksel di dekatnya sering dikorelasikan. Dalam transformasi prediktor, nilai piksel saat ini diprediksi dari piksel yang sudah didekode (dalam urutan baris pemindaian), dan hanya nilai sisa (sebenarnya yang diprediksi) yang dienkode. Mode prediksi menentukan jenis prediksi yang akan digunakan. Gambar dibagi menjadi beberapa wilayah persegi dan semua piksel dalam satu persegi menggunakan mode prediksi yang sama.
Ada 13 mode prediksi yang berbeda. Yang umum adalah piksel kiri, atas, kiri atas & kanan atas. Sisanya adalah kombinasi (rata-rata) dari kiri, atas, kiri atas, dan kanan atas.
Transformasi Warna (de-korelasi)
Tujuan transformasi warna adalah mendekorasi nilai R, G, dan B dari setiap piksel. Transformasi warna mempertahankan nilai hijau (G) sebagaimana adanya, berubah menjadi merah (R) berdasarkan hijau, dan berubah menjadi biru (B) berdasarkan hijau lalu berdasarkan merah.
Seperti halnya transformasi prediktor, pertama-tama gambar dibagi menjadi beberapa blok dan mode transformasi yang sama digunakan untuk semua piksel dalam sebuah blok. Untuk setiap blok, ada tiga jenis elemen transformasi warna: hijau_ke_merah, hijau_ke_biru, dan merah_ke_biru.
Kurangi Transformasi Hijau
"kurangi transformasi hijau" mengurangi nilai hijau dari nilai merah dan biru setiap piksel. Jika transformasi ini ada, decoder perlu menambahkan nilai hijau ke merah dan biru. Ini adalah kasus khusus dari transformasi dekorasi warna umum di atas, yang cukup sering untuk mendapatkan batas waktu.
Transformasi Pengindeksan Warna (palet)
Jika tidak ada banyak nilai piksel unik, mungkin lebih efisien untuk membuat array indeks warna dan mengganti nilai piksel dengan indeks array. Transformasi pengindeksan warna mencapai ini. Transformasi pengindeksan warna akan memeriksa jumlah nilai ARGB unik dalam gambar. Jika angka tersebut berada di bawah nilai minimum (256), sistem akan membuat array nilai ARGB tersebut, yang kemudian digunakan untuk mengganti nilai piksel dengan indeks yang sesuai.
Coding Cache Warna
Kompresi WebP lossy menggunakan fragmen gambar yang sudah dilihat untuk merekonstruksi piksel baru. Fitur ini juga dapat menggunakan palet lokal jika tidak ditemukan kecocokan yang menarik. Palet ini terus diperbarui untuk menggunakan kembali warna terbaru. Pada gambar di bawah, Anda dapat melihat cara kerja cache warna lokal yang diupdate secara bertahap dengan 32 warna yang baru digunakan saat pemindaian menurun.
Referensi Mundur LZ77
Referensi mundur adalah tuple kode panjang dan jarak. Panjang menunjukkan berapa banyak piksel dalam urutan baris pemindaian yang akan disalin. Kode jarak adalah angka yang menunjukkan posisi piksel yang sebelumnya terlihat, tempat piksel akan disalin. Nilai panjang dan jarak disimpan menggunakan coding 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 apa 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 lossy (RGB tanpa kerugian dengan alfa), ada mode WebP lain yang memungkinkan encoding lossy untuk saluran RGB dan encoding lossy untuk saluran alfa. Kemungkinan tersebut (alfa RGB dan alfa tanpa pengurangan) saat ini tidak tersedia dengan format gambar apa pun yang sudah ada. Saat ini, webmaster yang membutuhkan transparansi harus mengenkode gambar secara nirsentuh di PNG, sehingga menyebabkan ukuran yang sangat besar. WebP alfa mengenkode gambar dengan bit per piksel yang rendah dan memberikan cara yang efektif untuk mengurangi ukuran gambar tersebut. Kompresi tanpa kehilangan saluran alfa hanya menambahkan 22% byte melalui encoding WebP lossy (kualitas 90).
Secara keseluruhan, mengganti PNG transparan dengan WebP lossy+alpha akan menghemat ukuran rata-rata 60-70%. Ini telah dikonfirmasi sebagai fitur menarik yang hebat untuk situs seluler yang kaya ikon (misalnya, things.me).
