Optimiser les performances des images

L'utilisation d'images peut rapidement entraîner des problèmes de performances si vous n'y prenez pas garde. Vous pouvez facilement rencontrer une erreur OutOfMemoryError lorsque vous utilisez des fichiers bitmap volumineux. Suivez ces bonnes pratiques pour optimiser les performances de votre application.

Chargez uniquement la taille du bitmap dont vous avez besoin

La plupart des smartphones sont équipés d'un appareil photo haute résolution qui génère des fichiers image volumineux. Si vous affichez une image à l'écran, vous devez soit réduire la résolution de l'image, soit ne la charger qu'à la taille de votre conteneur d'images. Charger constamment des images plus volumineuses que nécessaire peut épuiser les caches GPU, ce qui se traduit par une dégradation des performances d'affichage de l'interface utilisateur.

Pour gérer la taille des images, procédez comme suit :

  • Réduisez au maximum la taille de vos fichiers image (sans que cela n'impacte l'image de sortie).
  • Envisagez de convertir vos images au format WEBP au lieu de JPEG ou PNG.
  • Fournissez des images plus petites pour différentes résolutions d'écran (voir le conseil n° 3).
  • Utilisez une bibliothèque de chargement d'images, qui réduit la taille de l'image pour l'adapter à celle de l'écran. Cela peut améliorer les performances de chargement de votre écran.

Si possible, utilisez des vecteurs plutôt que des bitmaps

Lorsque vous représentez visuellement un élément à l'écran, vous devez décider s'il peut être représenté vectoriellement ou non. Préférez les images vectorielles aux bitmaps, car elles ne se pixelisent pas lorsque vous en changez la taille. Cependant, tout élément ne peut pas être représenté sous forme de vecteur : les images prises avec un appareil photo ne peuvent pas être vectorisées.

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.

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 DrawableRes Int ou une URL comme paramètres dans votre composable plutôt que Painter

La gestion des images étant complexe (par exemple, écrire une fonction égale pour Bitmaps est coûteux en ressources informatiques), l'API Painter n'est pas explicitement marquée comme étant une classe 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, il est préférable 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) {

}

Ne stockez pas de bitmap en mémoire plus longtemps que nécessaire

Plus vous chargez de bitmaps en mémoire, plus vous risquez de manquer de mémoire sur l'appareil. Par exemple, si vous chargez une longue liste de composables Image à l'écran, utilisez LazyColumn ou LazyRow pour vous assurer que la mémoire est libérée lorsque vous faites défiler cette liste.

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'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.

Précédent
Painter personnalisé