Die Arbeit mit Bildern kann schnell zu Leistungsproblemen führen, wenn Sie nicht darauf achten. Bei der Arbeit mit großen Bitmaps können Sie ziemlich leicht auf ein OutOfMemoryError stoßen. Mit diesen Best Practices sorgst du für eine optimale Leistung deiner App.
Laden Sie nur die Bitmap-Größe, die Sie benötigen.
Die meisten Smartphones haben Kameras mit hoher Auflösung, die große Bilddateien erstellen. Wenn Sie ein Bild auf dem Bildschirm zeigen, müssen Sie entweder die Auflösung des Bildes verringern oder das Bild nur so groß wie den Bildcontainer laden. Das ständige Laden größerer als erforderlicher Bilder kann die GPU-Caches erschöpfen, was zu einem weniger leistungsfähigen UI-Rendering führt.
So verwalten Sie die Bildgrößen:
- Skalieren Sie die Bilddateien so klein wie möglich, ohne das Ausgabebild zu beeinträchtigen.
- Konvertieren Sie Ihre Bilder in das WEBP-Format anstelle von JPEG oder PNG.
- Stellen Sie kleinere Bilder für unterschiedliche Bildschirmauflösungen zur Verfügung (siehe Tipp 3).
- Sie können eine Bibliothek zum Laden von Bildern verwenden, die das Bild an die Größe der Bildschirmansicht herunterskaliert. Dies kann dazu beitragen, die Ladeleistung deines Bildschirms zu verbessern.
Verwenden Sie nach Möglichkeit Vektoren über Bitmaps.
Wenn Sie etwas visuell auf dem Bildschirm darstellen, müssen Sie entscheiden, ob es als Vektor dargestellt werden kann oder nicht. Bevorzugen Sie Vektorbilder gegenüber Bitmaps, da sie beim Skalieren an verschiedene Größen nicht verpixelt werden. Allerdings lässt sich nicht alles als Vektor darstellen – mit einer Kamera aufgenommene Bilder können nicht in einen Vektor umgewandelt werden.
Stellen Sie alternative Ressourcen für unterschiedliche Bildschirmgrößen bereit
Wenn Sie mit Ihrer App Bilder versenden, sollten Sie Assets unterschiedlicher Größe für unterschiedliche Geräteauflösungen bereitstellen. Dies kann dazu beitragen, die Downloadgröße Ihrer App auf Geräten zu reduzieren und die Leistung zu verbessern, da auf einem Gerät mit geringerer Auflösung ein Bild mit geringerer Auflösung geladen wird. Weitere Informationen zum Bereitstellen alternativer Bitmaps für verschiedene Gerätegrößen findest du in der Dokumentation zu alternativen Bitmap-Dateien.
Beim Verwenden von ImageBitmap vor dem Zeichnen prepareToDraw aufrufen
Rufen Sie bei Verwendung von ImageBitmap zum Starten des Uploads der Textur auf die GPU ImageBitmap#prepareToDraw() auf, bevor Sie sie zeichnen. Dies hilft der GPU, die Textur vorzubereiten und die Leistung der Anzeige eines visuellen Elements auf dem Bildschirm zu verbessern. Die meisten Bibliotheken zum Laden von Bildern führen diese Optimierung bereits durch. Wenn Sie jedoch selbst mit der Klasse ImageBitmap arbeiten, sollten Sie dies beachten.
Übergeben Sie lieber ein Int-DrawableRes oder eine URL als Parameter an die zusammensetzbare Funktion statt Painter.
Aufgrund der Komplexität der Verarbeitung von Bildern (z. B. wäre das Schreiben einer Gleichheitsfunktion für Bitmaps rechenintensiv), wird die Painter API explizit nicht als Stable-Klasse gekennzeichnet. Instabile Klassen können zu unnötigen Neuzusammensetzungen führen, da der Compiler nicht einfach ableiten kann, ob sich die Daten geändert haben.
Daher ist es besser, eine URL oder eine Drawable-Ressourcen-ID als Parameter an die zusammensetzbare Funktion zu übergeben, anstatt Painter als Parameter zu übergeben.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
Bitmap nicht länger im Arbeitsspeicher speichern, als nötig ist
Je mehr Bitmaps Sie in den Arbeitsspeicher laden, desto wahrscheinlicher ist es, dass nicht genügend Arbeitsspeicher auf dem Gerät vorhanden ist. Wenn Sie beispielsweise eine große Liste zusammensetzbarer Bildelemente auf dem Bildschirm laden, verwenden Sie LazyColumn oder LazyRow, damit beim Scrollen durch eine große Liste Arbeitsspeicher freigegeben wird.
Große Bilder nicht mit der AAB-/APK-Datei verpacken
Eine der häufigsten Ursachen für eine große App-Downloadgröße ist auf Grafiken, die in die AAB- oder APK-Datei gepackt sind. Verwende das APK Analyzer-Tool, um dafür zu sorgen, dass das Paket nicht größer als die erforderlichen Bilddateien ist. Verringern Sie die Größe oder platzieren Sie die Bilder auf einem Server und laden Sie sie nur bei Bedarf herunter.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- ImageBitmap vs. ImageVector {:#bitmap-vs-vector}
- UI-Status in „Compose“ speichern
- Jetpack-Compose-Phasen