Ottimizzare il rendimento delle immagini

Se non fai attenzione, l'utilizzo delle immagini può introdurre rapidamente problemi di prestazioni. Quando si lavora con bitmap di grandi dimensioni, è abbastanza facile imbattersi in un'OutOfMemoryError. Segui queste best practice per assicurarti che la tua app funzioni al meglio.

Carica solo le dimensioni del bitmap necessarie

La maggior parte degli smartphone è dotata di fotocamere ad alta risoluzione che producono file di immagini di grandi dimensioni. Se mostri un'immagine sullo schermo, devi ridurre la risoluzione dell'immagine o caricarla solo fino alle dimensioni del contenitore dell'immagine. Il caricamento costante di immagini più grandi del necessario può esaurire le cache della GPU, con conseguente rendering dell'interfaccia utente meno efficiente.

Per gestire le dimensioni delle immagini:

• Riduci le dimensioni dei file immagine in modo che siano il più piccoli possibile (senza influire sull'immagine di output).
• Valuta la possibilità di convertire le immagini in formato WEBP anziché JPEG o PNG.
• Fornisci immagini più piccole per diverse risoluzioni dello schermo (vedi il Suggerimento 3).
• Utilizza una libreria di caricamento delle immagini, che riduce le dimensioni dell'immagine in modo che si adatti alle dimensioni della visualizzazione sullo schermo. In questo modo, puoi migliorare le prestazioni di caricamento dello schermo.

Se possibile, utilizza i vettori anziché le bitmap

Quando rappresenti qualcosa visivamente sullo schermo, devi decidere se può essere rappresentato come vettore o meno. Preferisci le immagini vettoriali rispetto alle bitmap, in quanto non vengono pixelate quando le ridimensioni in base a dimensioni diverse. Tuttavia, non tutto può essere rappresentato come vettore: le immagini scattate con una fotocamera non possono essere convertite in vettori.

Fornire risorse alternative per schermi di dimensioni diverse

Se carichi immagini con la tua app, ti consigliamo di fornire asset di dimensioni diverse per risoluzioni del dispositivo diverse. In questo modo puoi ridurre le dimensioni del download dell'app sui dispositivi e migliorare le prestazioni, poiché verrà caricata un'immagine con una risoluzione inferiore su un dispositivo con una risoluzione inferiore. Per ulteriori informazioni su come fornire bitmap alternativi per dispositivi di dimensioni diverse, consulta la documentazione relativa alle bitmap alternativa.

Quando utilizzi ImageBitmap, chiama prepareToDraw prima di disegnare

Quando utilizzi ImageBitmap, per avviare il processo di caricamento della texture sulla GPU, chiama ImageBitmap#prepareToDraw() prima di disegnarla effettivamente. In questo modo, la GPU può preparare la texture e migliorare il rendimento della visualizzazione di un elemento sullo schermo. La maggior parte delle librerie per il caricamento delle immagini esegue già questa ottimizzazione, ma se lavori personalmente con la classe ImageBitmap, tieni presente questo aspetto.

Preferisci trasmettere un DrawableRes o un URL Int come parametri nel componibile anziché Painter

A causa delle complessità di gestione delle immagini (ad esempio, scrivere una funzione uguale per Bitmaps sarebbe computazionalmente dispendiosa), l'API Painter non è esplicitamente contrassegnata come classe stabile. Le classi instabili possono portare a ricostruzioni non necessarie perché il compilatore non può dedurre facilmente se i dati sono cambiati.

Pertanto, è preferibile passare un URL o un ID risorsa drawable come parametri al composable anziché passare un Painter come parametro.

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

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

}

Non memorizzare un bitmap in memoria più a lungo del necessario

Più bitmap carichi in memoria, più è probabile che la memoria del dispositivo si esaurisca. Ad esempio, se carichi sullo schermo un elenco di composabili di immagini di grandi dimensioni, utilizza LazyColumn o LazyRow per assicurarti che la memoria venga liberata quando scorri un elenco di grandi dimensioni.

Non pacchettizzare immagini di grandi dimensioni con il file AAB/APK

Una delle principali cause delle dimensioni elevate dei download delle app è dovuta alle immagini che vengono impacchettate all'interno del file AAB o APK. Utilizza lo strumento APK Analyzer per assicurarti di non includere nel pacchetto file di immagini di dimensioni maggiori di quelle richieste. Riduci le dimensioni o valuta la possibilità di posizionare le immagini su un server e scaricarle solo quando necessario.