Optimiser les images bitmap

L'utilisation d'images peut rapidement entraîner des problèmes de performances si vous n'y prenez pas garde. Même un petit élément graphique dans un format compressé tel que JPG ou PNG peut se transformer en bitmap volumineux lorsqu'il est décodé pour l'affichage.Si vous n'utilisez pas les éléments graphiques de manière efficace, vous pouvez rencontrer des problèmes de mémoire qui peuvent nuire aux performances de votre application et d'autres applications sur l'appareil. Suivez ces bonnes pratiques pour optimiser les performances de votre application.

Utiliser des bibliothèques de chargement d'images

Vous pouvez améliorer l'efficacité de votre application en utilisant des bibliothèques de chargement d'images telles que Coil (pour les projets Kotlin-first) ou Glide (pour les projets Java). Ces bibliothèques réduisent l'utilisation de la mémoire de votre application en mettant en cache les images, en redimensionnant les éléments graphiques si nécessaire et en recyclant les objets graphiques.

Redimensionner les images si nécessaire

Assurez-vous d'utiliser la taille d'image appropriée à vos besoins. Par exemple, vous ne devez jamais charger une grande image dans une petite miniature. Utilisez plutôt une méthode telle que inSampleSize pour charger une version rééchantillonnée de l'image.

Les bibliothèques de chargement d'images telles que Coil et Glide gèrent automatiquement ce rééchantillonnage par défaut. Vous pouvez configurer leurs stratégies de sous-échantillonnage en utilisant ImageLoader (pour Coil) ou DownsampleStrategy (pour Glide).

Fournissez d'autres ressources pour différentes tailles d'écran

Si vous envoyez des images avec votre application, vous pouvez fournir des éléments de tailles différentes pour différentes résolutions d'appareils. Cela peut réduire la taille du téléchargement de votre application sur les appareils et améliorer les performances, car, sur un appareil de résolution inférieure, une image de résolution inférieure sera téléchargée. Pour en savoir plus sur la fourniture de différents bitmaps pour différentes tailles d'appareils, consultez la documentation sur les différents bitmaps.

Ne pas appliquer de remplissage directement

Vous devrez peut-être parfois ajouter un remplissage à une image. Par exemple, vous pouvez entourer l'image d'une bordure transparente pour le letterboxing. Dans ce cas, n'ajoutez pas le remplissage directement à l'image, ce qui modifierait ses dimensions. Laissez plutôt les dimensions de l'image telles quelles, et ajustez son emplacement à l'écran à l'aide de InsetDrawable. Vous pouvez également ajouter un remplissage dans le composable ou la vue contenant l'image.

Choisir le bon format de pixel

Équilibrez la mémoire et la qualité en choisissant le bon format de pixel. Utilisez RGB_565 lorsque vous n'avez pas besoin de transparence. Ce format utilise la moitié de la mémoire du format ARGB_8888 par défaut.

Dans Glide, vous pouvez configurer cela à l'aide de DecodeFormat. Dans Coil, vous pouvez utiliser la bitmapConfig propriété.

Utiliser des vecteurs si possible

Pour les images composées de formes géométriques, un élément graphique vectoriel est beaucoup plus petit qu'un bitmap et s'adapte en douceur à n'importe quelle densité d'affichage. Si possible, utilisez des éléments tels que ShapeDrawable pour représenter des éléments graphiques.

Libérer et réutiliser les bitmaps si possible

Les fichiers graphiques volumineux peuvent occuper beaucoup de mémoire. Pour réduire leur impact, vous devez libérer ou réutiliser les objets graphiques chaque fois que vous le pouvez.

Si vous utilisez une bibliothèque de chargement d'images, veillez à libérer les bitmaps dans le pool géré de la bibliothèque lorsque vous n'en avez plus besoin. La bibliothèque peut réutiliser les objets si nécessaire et conserve un tampon de mémoire disponible pour les besoins futurs.

Si vous gérez les éléments graphiques manuellement, vous devez libérer les bitmaps lorsque vous avez terminé en appelant Bitmap.recycle et en supprimant immédiatement la référence Bitmap, au lieu de vous fier à la récupération de mémoire.

Autres conseils et astuces

Cette section présente quelques autres façons d'améliorer les performances de votre application lors de la gestion des éléments graphiques.

N'empaquetez pas d'images volumineuses avec votre fichier AAB/APK

L'une des principales causes de la taille importante des téléchargements d'applications est l'empaquetage des éléments graphiques dans le fichier AAB ou APK. Utilisez l'outil analyseur APK pour vous assurer que vous n'empaquetez pas des fichiers image plus volumineux que nécessaire. Réduisez la taille des images, ou placez-les sur un serveur et ne les téléchargez que lorsque cela est nécessaire.

Rechercher les bitmaps redondants

Si vous avez plusieurs copies de la même image, cela gaspille de la mémoire. Vous pouvez utiliser le profileur Android Studio pour identifier les éléments graphiques redondants. Utilisez l'analyseur d'empreinte de la mémoire pour capturer une empreinte de la mémoire, puis filtrez les résultats en sélectionnant le paramètre duplicate bitmaps (bitmaps en double).

Lorsque vous utilisez ImageBitmap, appelez prepareToDraw avant de dessiner

Lorsque vous utilisez ImageBitmap, pour lancer le processus d'importation de la texture dans le GPU, appelez ImageBitmap#prepareToDraw() avant de la dessiner. Cela permet au GPU de préparer la texture et d'améliorer les performances d'affichage d'un élément visuel à l'écran. Bien que la plupart des bibliothèques de chargement d'images effectuent déjà cette optimisation, si vous utilisez la classe ImageBitmap, gardez cela à l'esprit.

Préférez transmettre un Int DrawableRes ou une URL comme paramètres dans votre composable plutôt que Painter

En raison de la complexité de la gestion des images (par exemple, l'écriture d'une fonction égale pour Bitmaps serait coûteuse en termes de calcul), l'API Painter n'est pas explicitement marquée comme stable avec l'annotation @Stable. Les classes instables peuvent entraîner des recompositions inutiles, car le compilateur ne peut pas facilement déterminer si les données ont changé.

Par conséquent, nous vous recommandons de transmettre une URL ou un ID de ressource drawable comme paramètres à votre composable, plutôt que de transmettre un Painter en tant que paramètre.

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

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

}