Wenn Sie nicht aufpassen, kann die Arbeit mit Bildern schnell zu Leistungsproblemen führen. Bei der Arbeit mit großen Bitmaps kann es schnell zu einem OutOfMemoryError
kommen. Mit diesen Best Practices können Sie die Leistung Ihrer App optimieren.
Nur die benötigte Größe des Bitmaps laden
Die meisten Smartphones haben hochauflösende Kameras, die große Bilddateien erzeugen. Wenn Sie ein Bild auf dem Bildschirm anzeigen, müssen Sie entweder die Auflösung des Bildes verringern 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 GPU-Caches erschöpfen und zu einer weniger leistungsstarken UI-Wiedergabe führen.
So verwalten Sie Bildgrößen:
- Verkleinern Sie Ihre Bilddateien so weit 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 verschiedene Bildschirmauflösungen bereit (siehe Tipp 3).
- Verwenden Sie eine Bibliothek zum Laden von Bildern, die Ihr Bild so skaliert, dass es auf die Größe der Ansicht auf dem Bildschirm passt. Dies kann dazu beitragen, die Ladeleistung Ihres Bildschirms zu verbessern.
Nach Möglichkeit Vektoren anstelle von Bitmaps verwenden
Wenn Sie etwas auf dem Bildschirm visuell darstellen, müssen Sie entscheiden, ob es als Vektor dargestellt werden kann oder nicht. Verwenden Sie lieber Vektorbilder als Bitmaps, da sie nicht verpixelt werden, wenn Sie sie auf verschiedene Größen skalieren. Allerdings kann nicht alles als Vektor dargestellt werden. 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 ausliefern, sollten Sie Assets in verschiedenen Größen für unterschiedliche Geräteauflösungen bereitstellen. So können Sie die Downloadgröße Ihrer App auf Geräten reduzieren und die Leistung verbessern, da auf Geräten mit niedrigerer Auflösung Bilder mit niedrigerer Auflösung geladen werden. Weitere Informationen zum Bereitstellen alternativer Bitmaps für verschiedene Gerätegrößen finden Sie in der Dokumentation zu alternativen Bitmaps.
Wenn Sie ImageBitmap
verwenden, rufen Sie prepareToDraw
vor dem Zeichnen auf.
Wenn Sie ImageBitmap
verwenden, rufen Sie ImageBitmap#prepareToDraw()
auf, bevor Sie die Textur zeichnen, um den Upload auf die GPU zu starten. Dadurch kann die GPU die Textur vorbereiten und die Leistung bei der Darstellung eines Bildes 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 berücksichtigen.
Übergeben Sie lieber Int
DrawableRes
oder eine URL als Parameter an Ihre zusammensetzbare Funktion anstelle von Painter
.
Aufgrund der Komplexität des Umgangs mit Bildern (z. B. wäre das Schreiben einer „equals“-Funktion für Bitmaps
rechenintensiv) ist die Painter
-API ausdrücklich nicht als Stable-Klasse gekennzeichnet. Instabile Klassen können zu unnötigen Neukompositionen führen, da der Compiler nicht einfach ableiten kann, ob sich die Daten geändert haben.
Daher ist es besser, eine URL oder eine ID für eine zeichnungsfähige Ressource als Parameter an Ihr Composable zu übergeben, anstatt ein Painter
als Parameter zu übergeben.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
Bitmap nicht länger als nötig im Arbeitsspeicher speichern
Je mehr Bitmaps Sie in den Arbeitsspeicher laden, desto wahrscheinlicher ist es, dass der Arbeitsspeicher des Geräts nicht ausreicht. Wenn Sie beispielsweise eine lange Liste von Image-Composables auf dem Bildschirm laden, verwenden Sie LazyColumn
oder LazyRow
, um sicherzustellen, dass beim Scrollen einer langen Liste Arbeitsspeicher freigegeben wird.
Große Bilder nicht in Ihr AAB/Ihre APK-Datei einfügen
Eine der häufigsten Ursachen für eine große Downloadgröße von Apps sind Grafiken, die im AAB oder in der APK-Datei enthalten sind. Mit dem APK-Analysetool können Sie prüfen, ob Sie unnötig große Bilddateien in Ihr Paket aufnehmen. Reduzieren Sie die Größe der Bilder oder erwägen Sie, die Bilder auf einem Server zu platzieren und nur bei Bedarf herunterzuladen.
Empfehlungen für dich
- Hinweis: Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- ImageBitmap im Vergleich zu ImageVector {:#bitmap-vs-vector}
- UI-Status in Compose speichern
- Jetpack Compose-Phasen