Wenn Sie nicht vorsichtig sind, können beim Arbeiten mit Bildern schnell Leistungsprobleme auftreten. Bei der Arbeit mit großen Bitmaps können Sie ziemlich leicht auf ein OutOfMemoryError stoßen. Mit diesen Best Practices können Sie die Leistung Ihrer App optimieren.
Nur die benötigte Größe der Bitmap laden
Die meisten Smartphones haben Kameras mit hoher Auflösung, die große Bilddateien erzeugen. Wenn Sie ein Bild auf dem Bildschirm anzeigen, müssen Sie entweder die Auflösung des Bildes reduzieren oder das Bild nur bis zur Größe des Bildcontainers laden. Das ständige Laden von Bildern, die größer als nötig sind, kann die GPU-Caches erschöpfen und zu einem weniger leistungsfähigen UI-Rendering führen.
So verwalten Sie die Bildgrößen:
- Skalieren Sie Ihre 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 bereit (siehe Tipp 3).
- Sie können eine Bildladebibliothek verwenden, die das Bild an die Größe der Bildschirmansicht herunterskaliert. Dadurch kann die Ladeleistung Ihres Bildschirms verbessert werden.
Nach Möglichkeit Vektoren anstelle von Bitmaps verwenden
Wenn Sie etwas visuell auf dem Bildschirm darstellen, müssen Sie entscheiden, ob es als Vektor dargestellt werden kann oder nicht. Verwenden Sie Vektorbilder anstelle von Bitmaps, da sie nicht zu Pixeln werden, wenn Sie sie auf unterschiedliche Größen skalieren. Nicht alles kann jedoch als Vektor dargestellt werden. Bilder, die mit einer Kamera aufgenommen wurden, können nicht in einen Vektor umgewandelt werden.
Alternative Ressourcen für verschiedene Bildschirmgrößen bereitstellen
Wenn Sie Bilder mit Ihrer App bereitstellen, sollten Sie Assets in verschiedenen Größen 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. So kann die GPU die Textur vorbereiten und die Leistung der Darstellung eines visuellen Elements auf dem Bildschirm 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 stattdessen Int, DrawableRes oder eine URL als Parameter an das Composeable anstelle von Painter.
Aufgrund der Komplexität der Bildverarbeitung (z. B. wäre das Schreiben einer Gleichheitsfunktion für Bitmaps rechenintensiv) ist die Painter API ausdrücklich 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 sollten Sie Ihrem Composeable eine URL oder eine drawable-Ressourcen-ID als Parameter übergeben, anstatt Painter als Parameter zu übergeben.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
Eine Bitmap nicht länger im Arbeitsspeicher speichern, als es erforderlich ist
Je mehr Bitmaps Sie in den Arbeitsspeicher laden, desto wahrscheinlicher ist es, dass der Arbeitsspeicher des Geräts aufgebraucht wird. Wenn Sie beispielsweise eine große Liste von Bildkompositionen auf dem Bildschirm laden, können Sie mit LazyColumn oder LazyRow dafür sorgen, dass beim Scrollen durch eine große Liste Arbeitsspeicher freigegeben wird.
Fügen Sie Ihrer AAB-/APK-Datei keine großen Bilder hinzu.
Eine der Hauptursachen für eine große Downloadgröße von Apps sind Grafiken, die in der AAB- oder APK-Datei verpackt sind. Verwenden Sie das Tool APK-Analysator, um sicherzustellen, dass Sie keine größeren als die erforderlichen Bilddateien verpacken. 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 im Vergleich zu ImageVector {:#bitmap-vs-vector}
- UI-Status in „Schreiben“ speichern
- Jetpack-Compose-Phasen