Sebagian besar traffic download terdiri dari gambar. Akibatnya, semakin kecil Anda dapat membuat gambar yang dapat didownload, semakin baik pengalaman jaringan yang dapat diberikan aplikasi Anda kepada pengguna. Artikel ini memberikan panduan cara membuat file gambar yang lebih kecil dan lebih sesuai untuk jaringan.
Tentang format gambar
Aplikasi Android biasanya menggunakan gambar yang berada dalam satu atau beberapa format file berikut: AVIF, PNG, JPG, dan WebP. Untuk setiap format ini, ada langkah-langkah yang dapat Anda ambil untuk mengurangi ukuran gambar.
AVIF
Android 12 (API level 31) dan gambar dukungan yang lebih tinggi yang menggunakan Format File Gambar (AVF) AV1. AVIF adalah format penampung untuk gambar dan urutan gambar yang dienkode menggunakan AV1. Cara ini memanfaatkan konten enkode intra-frame dari kompresi video. Proses ini akan meningkatkan kualitas gambar untuk ukuran file yang sama secara signifikan jika dibandingkan dengan format gambar lama, seperti JPEG. Untuk melihat lebih dalam tentang manfaat format ini, lihat postingan blog dari Jake Archibald.
PNG
Kunci untuk membuat file PNG yang lebih kecil adalah mengurangi jumlah warna unik yang digunakan di setiap baris piksel yang menyusun gambar. Dengan menggunakan lebih sedikit warna, Anda meningkatkan potensi kompresi di semua tahapan lain dalam pipeline.
Mengurangi jumlah warna unik menjadi pembeda signifikan karena efektivitas kompresi PNG sebagian merupakan fungsi dari sejauh mana warna-warna piksel yang berdekatan secara horizontal berbeda. Dengan demikian, mengurangi jumlah warna unik di setiap baris gambar PNG dapat membantu mengurangi ukuran file.
Saat memutuskan apakah akan menerapkan strategi ini atau tidak, Anda perlu mengingat bahwa mengurangi jumlah warna unik berarti menerapkan tahap encoding lossy pada gambar. Namun, alat encoding mungkin bukan merupakan penilai yang baik dari seberapa buruk error kecil akan tampak oleh mata manusia. Oleh karena itu, Anda harus melakukan pekerjaan ini secara manual untuk membantu memastikan keseimbangan yang tepat antara kompresi yang efisien dan kualitas gambar yang dapat diterima.
Ada dua pendekatan yang sangat berguna: menggunakan format INDEXED dan menerapkan kuantisasi vektor.
Menggunakan format INDEXED
Setiap upaya untuk mengurangi warna harus dimulai dengan mencoba mengoptimalkan warna sehingga Anda dapat menggunakan format INDEXED saat mengekspor gambar sebagai PNG. Mode warna INDEXED berfungsi dengan memilih 256 warna terbaik yang akan digunakan, dan mengganti semua nilai piksel dengan indeks ke dalam palet warna tersebut. Hasilnya adalah pengurangan warna dari 16 juta (potensial) menjadi hanya 256 warna: dari 3 (tanpa transparansi) atau 4 (dengan transparansi) byte per piksel menjadi 1 byte per piksel. Perubahan ini merupakan pengurangan ukuran file langkah pertama yang signifikan.
Gambar 1 menunjukkan gambar dan varian terindeksnya.
Gambar 1. Gambar sebelum dan sesudah konversi ke format INDEXED.
Gambar 2 menunjukkan palet warna untuk gambar dalam Gambar 1:
Gambar 2. Palet warna untuk gambar dalam Gambar 1.
Merepresentasikan gambar sebagai gambar palet akan sangat membantu mengurangi ukuran file secara signifikan. Oleh karena itu, sebaiknya selidiki apakah sebagian besar gambar Anda dapat dikonversi.
Tentu saja, tidak semua gambar dapat direpresentasikan secara akurat dengan 256 warna saja. Beberapa gambar, misalnya, mungkin perlu 257, 310, 512, atau 912 warna agar tampak benar. Dalam kasus semacam ini, kuantisasi vektor juga dapat membantu.
Kuantisasi vektor
Proses pembuatan gambar terindeks dapat dijelaskan dengan lebih baik melalui kuantisasi vektor (VQ). VQ berfungsi sebagai proses pembulatan angka multidimensi. Dalam proses ini, semua warna dalam gambar dikelompokkan berdasarkan kesamaannya. Untuk kelompok tertentu, semua warna dalam kelompok tersebut diganti dengan satu nilai titik tengah, yang meminimalkan error warna di sel tersebut (atau "site", jika Anda menggunakan terminologi Voronoi). Dalam Gambar 3, titik hijau merepresentasikan warna input, dan titik merah adalah titik tengah yang mengganti warna input. Setiap sel dibatasi oleh garis biru.
Gambar 3. Menerapkan kuantisasi vektor ke warna dalam gambar.
Penerapan VQ pada gambar mengurangi jumlah warna unik, dengan mengganti setiap kelompok warna dengan satu warna yang kualitas visualnya "sangat mendekati".
Teknik ini juga memungkinkan Anda menentukan jumlah maksimum warna unik dalam gambar. Misalnya, Gambar 4 menunjukkan kepala burung beo dalam 16,7 juta warna (24 bit per piksel, atau bpp) bersama versi yang hanya mengizinkan penggunaan 16 warna unik (3 bpp).
Gambar 4. Gambar sebelum dan sesudah menerapkan kuantifikasi vektor.
Anda dapat langsung melihat bahwa ada penurunan kualitas; sebagian besar warna gradien telah diganti dan terdapat efek garis warna (banding effect) pada gambar. Gambar ini memerlukan lebih dari 16 warna unik.
Menetapkan langkah VQ di pipeline dapat membantu Anda mendapatkan gambaran lebih baik tentang jumlah sebenarnya warna unik yang digunakan gambar Anda, dan dapat membantu Anda menguranginya secara signifikan. Ada sejumlah alat yang dapat Anda gunakan untuk membantu menerapkan teknik ini.
JPG
Jika menggunakan gambar JPG, Anda dapat melakukan beberapa perubahan kecil yang berpotensi menghemat ukuran file secara signifikan. Ini mencakup:
- Memproduksi ukuran file yang lebih kecil melalui berbagai metode encoding (tanpa memengaruhi kualitas).
- Sedikit menyesuaikan kualitas agar menghasilkan kompresi yang lebih baik.
Penerapan strategi ini sering kali dapat mengurangi ukuran file hingga 25%.
Saat memilih alat, ingatlah bahwa alat ekspor foto dapat memasukkan metadata yang tidak perlu, seperti informasi GPS, ke gambar Anda. Setidak-tidaknya, cobalah memanfaatkan alat yang ada untuk menghilangkan informasi ini dari file Anda.
WebP
WebP adalah format gambar baru yang didukung mulai dari Android 4.2.1 (API level 17). Format ini memberikan kompresi lossless dan lossy yang superior untuk gambar di web. Dengan WebP, developer dapat membuat gambar yang lebih kecil dan lebih kaya. File gambar WebP flossless rata-rata 26% lebih kecil daripada PNG. File gambar ini juga mendukung transparansi (disebut juga saluran alfa) dengan hanya berukuran 22% byte lebih besar.
Gambar WebP lossy berukuran 25-34% lebih kecil daripada gambar JPG yang sebanding pada indeks kualitas SSIM yang setara. Untuk kasus ketika kompresi RGB lossy dapat diterima, WebP lossy juga mendukung transparansi, yang biasanya menghasilkan ukuran file 3 kali lebih kecil daripada PNG.
Untuk informasi selengkapnya tentang WebP, kunjungi situs WebP.
Anda dapat mengonversi gambar BMP, JPG, PNG, atau GIF statis yang ada ke format WebP menggunakan Android Studio. Untuk mengetahui informasi selengkapnya, lihat Membuat Gambar WebP Menggunakan Android Studio.
Memilih format
Format gambar yang berbeda cocok untuk jenis gambar yang berbeda. JPG dan PNG memiliki proses kompresi yang sangat berbeda, dan menghasilkan hasil yang sangat berbeda pula.
Keputusan antara PNG dan JPG sering kali bergantung pada kerumitan gambar itu sendiri. Gambar 5 menunjukkan dua gambar yang cukup berbeda, bergantung pada skema kompresi mana yang diterapkan developer. Gambar di sebelah kiri memiliki banyak detail kecil, dan akibatnya terkompresi lebih efisien dengan JPG. Gambar di sebelah kanan, dengan warna yang sama, terkompresi lebih efisien dengan PNG.
Gambar 5. Kasus yang sesuai untuk JPG vs PNG
WebP sebagai format dapat mendukung mode lossy dan lossless, yang menjadikannya sebagai pengganti ideal untuk PNG dan JPG. Satu-satunya hal yang perlu diingat adalah bahwa WebP hanya memiliki dukungan native di perangkat yang menjalankan Android 4.2.1 (API level 17) dan yang lebih tinggi. Untungnya, sebagian besar perangkat memenuhi persyaratan tersebut.
Gambar 6 memberikan visualisasi sederhana untuk membantu Anda memutuskan skema kompresi mana yang akan digunakan.
Gambar 6. Menentukan skema kompresi
Menentukan nilai kualitas optimal
Ada beberapa teknik yang dapat Anda gunakan untuk mencapai keseimbangan yang tepat antara kompresi dan kualitas gambar. Teknik pertama menggunakan nilai skalar dan oleh karena itu hanya berfungsi untuk JPG dan WebP. Teknik lainnya memanfaatkan library Butteraugli, dan dapat digunakan untuk semua format gambar.
Nilai skalar (khusus JPG dan WebP)
Keunggulan format JPG dan WebP adalah bahwa Anda dapat menggunakan nilai skalar untuk menyeimbangkan kualitas dengan ukuran file. Caranya adalah dengan mencari tahu nilai kualitas yang benar untuk gambar Anda. Tingkat kualitas yang terlalu rendah akan menghasilkan file yang kecil dengan mengorbankan kualitas gambar. Tingkat kualitas yang terlalu tinggi akan meningkatkan ukuran file tanpa memberikan manfaat nyata kepada pengguna.
Solusi yang paling simpel adalah memilih nilai non-maksimum, dan menggunakan nilai tersebut. Namun, perhatikan bahwa nilai kualitas memengaruhi setiap gambar secara berbeda. Misalnya, meskipun kualitas 75% mungkin terlihat baik-baik saja pada sebagian besar gambar, ada beberapa kasus saat tingkat kualitas tersebut tidak berfungsi dengan baik. Anda harus memastikan untuk menguji nilai maksimum yang Anda pilih berdasarkan sampel representatif gambar. Selain itu, pastikan untuk menjalankan semua pengujian terhadap gambar asli, bukan versi terkompresi.
Untuk aplikasi media berukuran besar yang mengupload dan mengirim ulang jutaan JPG setiap hari, penyetelan untuk setiap aset tidaklah praktis. Anda dapat mengatasi kesulitan ini dengan menentukan beberapa tingkat kualitas berbeda sesuai kategori gambar. Misalnya, Anda dapat menetapkan 35% sebagai setelan kualitas untuk thumbnail, karena gambar yang lebih kecil akan menyembunyikan lebih banyak artefak kompresi.
Butteraugli
Project Butteraugli adalah library untuk menguji Psychovisual Error Threshold sebuah gambar: titik di mana pengguna mulai melihat degradasi gambar. Dengan kata lain, project ini mencoba mengukur seberapa terdistorsi gambar terkompresi Anda.
Dengan Butteraugli, Anda dapat menetapkan sasaran kualitas visual, kemudian menjalankan kompresi PNG, JPG, WebP lossy, dan WebP lossless. Selanjutnya Anda dapat memilih gambar yang memberikan keseimbangan terbaik antara ukuran file dan tingkat Butteraugli. Gambar 7 menunjukkan contoh bagaimana Butteraugli digunakan untuk menemukan tingkat kualitas JPG minimal sebelum distorsi visual cukup tinggi sehingga pengguna bisa merasakan adanya masalah; hasilnya adalah pengurangan ukuran file sekitar 65%.
Gambar 7. Gambar sebelum dan sesudah penerapan teknologi Butteraugli.
Butteraugli memungkinkan Anda melanjutkan berdasarkan input atau output. Artinya, Anda dapat menemukan setelan kualitas terendah sebelum pengguna merasakan distorsi yang nyata dalam gambar yang dihasilkan, atau Anda dapat secara iteratif menyetel tingkat distorsi gambar untuk mempelajari tingkat kualitas terkaitnya.
Ukuran penayangan
Anda mungkin tergoda untuk hanya mempertahankan satu resolusi gambar di server. Saat perangkat mengakses gambar, server akan menayangkannya dalam satu resolusi dan menyerahkan tugas penurunan skala (downscaling) ke perangkat.
Solusi ini praktis bagi developer, tetapi tidak selalu menyenangkan bagi pengguna. Alasannya, solusi ini memaksa pengguna menggunakan lebih banyak data daripada yang diperlukan untuk mendownload gambar. Sebagai gantinya, sebaiknya Anda menyimpan beberapa ukuran gambar dan menyajikan ukuran yang paling sesuai untuk kasus penggunaan tertentu. Misalnya, untuk thumbnail, menayangkan thumbnail yang sebenarnya, daripada menayangkan dan menurunkan skala (downscaling) versi ukuran penuh, memerlukan bandwidth jaringan yang jauh lebih sedikit.
Pendekatan ini bagus untuk kecepatan download, dan lebih murah bagi pengguna yang mungkin menggunakan paket data terbatas atau berbayar. Dengan pendekatan ini, gambar tidak akan memakan banyak ruang di perangkat dan memori utama. Untuk gambar berukuran besar, seperti gambar 4K, pendekatan ini juga menghindarkan perangkat dari keharusan mengubah ukuran gambar sebelum memuatnya.
Untuk menggunakan pendekatan ini, Anda harus memiliki layanan gambar backend yang menyediakan gambar dalam berbagai resolusi dengan caching yang tepat. Ada sejumlah layanan yang dapat membantu untuk tugas ini. Misalnya, App Engine dilengkapi dengan fungsi pengubah ukuran gambar yang sudah terinstal.