Mengoptimalkan performa untuk gambar

Penggunaan gambar dapat menimbulkan masalah performa dengan cepat jika Anda tidak berhati-hati. Anda dapat dengan mudah mengalami OutOfMemoryError saat menangani bitmap berukuran besar. Ikuti praktik terbaik berikut untuk memastikan aplikasi Anda berperforma terbaik.

Hanya memuat ukuran bitmap yang Anda perlukan

Sebagian besar smartphone memiliki kamera beresolusi tinggi yang menghasilkan file gambar besar. Jika menampilkan gambar di layar, Anda harus mengurangi resolusi gambar atau hanya memuat gambar maksimal hingga ukuran penampung gambar. Pemuatan gambar yang lebih besar dari yang diperlukan secara terus-menerus dapat menghabiskan cache GPU, sehingga menyebabkan rendering UI yang berperforma rendah.

Untuk mengelola ukuran gambar:

  • Perkecil skala file gambar Anda sekecil mungkin (tanpa memengaruhi gambar output).
  • Sebaiknya konversi gambar ke format WEBP, bukan JPEG atau PNG.
  • Sediakan gambar yang lebih kecil untuk resolusi layar yang berbeda (lihat Tips #3).
  • Gunakan library pemuatan gambar, yang memperkecil skala gambar Anda agar sesuai dengan ukuran tampilan di layar. Hal ini dapat membantu meningkatkan performa pemuatan layar Anda.

Menggunakan vektor pada bitmap jika memungkinkan

Saat menampilkan sesuatu secara visual di layar, Anda harus memutuskan apakah dapat ditampilkan sebagai vektor atau tidak. Pilih gambar vektor daripada bitmap, karena bitmap tidak mengalami pikselisasi saat Anda menskalakannya ke ukuran yang berbeda. Namun, tidak semuanya dapat ditampilkan sebagai vektor - gambar yang diambil dengan kamera tidak dapat dikonversi menjadi vektor.

Menyediakan resource alternatif untuk berbagai ukuran layar

Jika Anda mengirimkan gambar dengan aplikasi, sebaiknya sediakan aset dengan ukuran yang berbeda untuk resolusi perangkat yang berbeda. Hal ini dapat membantu mengurangi ukuran download aplikasi Anda di perangkat, dan meningkatkan performa karena aplikasi tersebut akan memuat gambar beresolusi lebih rendah di perangkat beresolusi lebih rendah. Untuk informasi selengkapnya tentang cara menyediakan bitmap alternatif untuk berbagai ukuran perangkat, lihat dokumentasi bitmap alternatif.

Saat menggunakan ImageBitmap, panggil prepareToDraw sebelum menggambar

Saat menggunakan ImageBitmap, untuk memulai proses upload tekstur ke GPU, panggil ImageBitmap#prepareToDraw() sebelum benar-benar menggambarnya. Tindakan ini membantu GPU menyiapkan tekstur dan meningkatkan performa tampilan visual di layar. Sebagian besar library pemuatan gambar sudah melakukan pengoptimalan ini, tetapi jika Anda menangani class ImageBitmap sendiri, Anda harus mempertimbangkannya.

Memilih meneruskan Int DrawableRes atau URL sebagai parameter ke composable Anda, bukan Painter

Karena rumitnya menangani gambar (misalnya, menulis fungsi yang setara untuk Bitmaps akan sangat mahal dari segi komputasi), Painter API secara eksplisit tidak ditandai sebagai class Stabil. Class yang tidak stabil dapat menyebabkan rekomposisi yang tidak perlu karena compiler tidak dapat melakukan inferensi dengan mudah jika data telah berubah.

Oleh karena itu, sebaiknya teruskan URL atau ID resource drawable sebagai parameter ke composable Anda, bukan meneruskan Painter sebagai parameter.

// Prefer this:
@Composable
fun MyImage(url: String) {

}
// Over this:
@Composable
fun MyImage(painter: Painter) {

}

Jangan terlalu lama menyimpan bitmap di memori

Makin banyak bitmap yang Anda muat ke dalam memori, makin besar kemungkinan Anda akan kehabisan memori di perangkat. Misalnya, jika memuat daftar besar berisi composable Image di layar, gunakan LazyColumn atau LazyRow untuk memastikan bahwa memori telah dikosongkan saat men-scroll daftar berukuran besar.

Jangan mengemas gambar besar dengan file AAB/APK

Salah satu penyebab utama ukuran download aplikasi yang besar adalah karena grafik dikemas dalam file AAB atau APK. Gunakan alat APK Analyzer untuk memastikan Anda tidak mengemas file gambar yang lebih besar dari yang diperlukan. Kurangi ukuran atau sebaiknya tempatkan gambar di server dan hanya download saat diperlukan.

Sebelumnya
Painter kustom