Bei der Arbeit mit Images kann es schnell zu Leistungsproblemen führen, wenn Sie nicht vorsichtig sind. Bei der Arbeit mit großen Bitmaps kann schnell ein OutOfMemoryError
begegnen. Mit den folgenden Best Practices können Sie dafür sorgen, dass Ihre App eine optimale Leistung erzielt.
Laden Sie nur die Größe der Bitmap, die Sie benötigen
Die meisten Smartphones haben hochauflösende Kameras, die große Bilddateien erstellen. Wenn Sie ein Bild auf dem Bildschirm zeigen, müssen Sie entweder die Auflösung des Bildes reduzieren oder es nur bis zur Größe des Bildcontainers laden. Das ständige Laden größerer Bilder als erforderlich kann GPU-Caches erschöpfen, was zu einem weniger leistungsfähigen UI-Rendering führt.
So verwalten Sie Bildgrößen:
- Verkleinern Sie Ihre Bilddateien so klein wie möglich, ohne das Ausgabebild zu beeinträchtigen.
- Sie können Ihre Bilder ins WEBP-Format konvertieren und nicht als JPEG oder PNG verwenden.
- Verwenden Sie kleinere Bilder für verschiedene Bildschirmauflösungen (siehe Tipp 3).
- Verwenden Sie eine Bibliothek zum Laden von Bildern, die das Bild an die Größe der Bildschirmansicht skaliert. Dies kann dabei helfen, die Ladeleistung Ihres 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 nicht verpixelt werden, wenn sie auf verschiedene Größen skaliert werden. Allerdings lässt sich nicht alles als Vektor darstellen – mit einer Kamera aufgenommene Bilder können nicht in einen Vektor umgewandelt werden.
Alternative Ressourcen für verschiedene Bildschirmgrößen bereitstellen
Wenn Sie Bilder mit Ihrer App versenden, sollten Sie Assets unterschiedlicher Größe für unterschiedliche Geräteauflösungen bereitstellen. Dies kann dazu beitragen, die Downloadgröße deiner 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 zur Bereitstellung alternativer Bitmaps für verschiedene Gerätegrößen finden Sie in der Dokumentation zu alternativen Bitmap.
Bei Verwendung von ImageBitmap
vor dem Zeichnen prepareToDraw
aufrufen
Wenn Sie mit ImageBitmap
den Prozess zum Hochladen der Textur in die GPU starten möchten, rufen Sie ImageBitmap#prepareToDraw()
auf, bevor Sie sie tatsächlich zeichnen. Dies hilft der GPU, die Textur vorzubereiten und die Leistung der Darstellung eines visuellen Elements auf dem Bildschirm zu verbessern. Die meisten Bildladebibliotheken führen diese Optimierung bereits durch. Wenn Sie aber selbst mit der Klasse ImageBitmap
arbeiten, sollten Sie dies im Hinterkopf behalten.
Übergeben Sie lieber Int
-DrawableRes
oder eine URL als Parameter an Ihre zusammensetzbare Funktion statt Painter
.
Aufgrund der Komplexität des Umgangs mit Bildern (z. B. das Schreiben einer Gleichheitsfunktion für Bitmaps
wäre rechenintensiv), ist die Painter
API explizit nicht als stabile 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 Ihre zusammensetzbare Funktion zu übergeben, anstatt Painter
als Parameter zu übergeben.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
Speichern Sie eine Bitmap nicht länger als nötig im Speicher.
Je mehr Bitmaps Sie in den Speicher laden, desto wahrscheinlicher ist es, dass nicht genügend Arbeitsspeicher auf dem Gerät zur Verfügung steht. Wenn Sie beispielsweise eine große Liste von zusammensetzbaren Bildern auf dem Bildschirm laden, verwenden Sie LazyColumn
oder LazyRow
, damit beim Scrollen durch eine große Liste Arbeitsspeicher frei wird.
Verpacken Sie keine großen Bilder mit der AAB/APK-Datei
Einer der häufigsten Gründe für eine große Downloadgröße von Apps sind Grafiken, die in der AAB- oder APK-Datei gepackt sind. Verwende das APK-Analysetool, damit dein Paket nicht größer als die erforderlichen Bilddateien wird. Reduzieren 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 „Compose“ speichern
- Jetpack Compose-Phasen