Cómo optimizar el rendimiento de las imágenes

Trabajar con imágenes puede generar problemas de rendimiento con rapidez si no tienes cuidado. Con facilidad, puedes encontrarte con OutOfMemoryError cuando trabajas con mapas de bits grandes. Sigue estas prácticas recomendadas para asegurarte de que tu app tenga el mejor rendimiento.

Solo carga el tamaño del mapa de bits que necesitas

La mayoría de los smartphones tienen cámaras de alta resolución que producen archivos de imagen grandes. Si muestras una imagen en la pantalla, debes reducir la resolución de la imagen o solo cargarla hasta el tamaño del contenedor de imágenes. La carga constante de imágenes más grandes que las necesarias puede agotar las cachés de GPU, lo que genera una renderización de la IU menos eficaz.

Para administrar los tamaños de imagen, haz lo siguiente:

  • Reduce la escala de tus archivos de imagen para que sean lo más pequeños posible (sin afectar la imagen de salida).
  • Considera convertir tus imágenes al formato WEBP en lugar de JPEG o PNG.
  • Proporciona imágenes más pequeñas para diferentes resoluciones de pantalla (consulta la Sugerencia n.º 3).
  • Usa una biblioteca de carga de imágenes, que reduce la escala de la imagen para que se ajuste al tamaño de la vista en la pantalla. Esto puede ayudar a mejorar el rendimiento de carga de la pantalla.

Usa vectores sobre mapas de bits siempre que sea posible

Cuando representas algo visualmente en la pantalla, debes decidir si se puede representar como un vector o no. Opta por las imágenes vectoriales en lugar de mapas de bits, ya que no se pixelan cuando cambias las escalas a diferentes tamaños. Sin embargo, no todo se puede representar como un vector: las imágenes tomadas con una cámara no se pueden convertir en un vector.

Proporciona recursos alternativos para diferentes tamaños de pantalla

Si envías imágenes con tu app, considera proporcionar elementos de diferentes tamaños para diferentes resoluciones de dispositivo. Esto puede ayudar a reducir el tamaño de descarga de la app en dispositivos y mejorar el rendimiento, ya que cargará una imagen de menor resolución en un dispositivo de menor resolución. Para obtener más información sobre cómo proporcionar mapas de bits alternativos para diferentes tamaños de dispositivos, consulta la documentación de mapas de bits alternativos.

Cuando uses ImageBitmap, llama a prepareToDraw antes de dibujar

Cuando uses ImageBitmap, para comenzar el proceso de carga de textura en la GPU, llama a ImageBitmap#prepareToDraw() antes de dibujarla. Esto ayuda a la GPU a preparar la textura y mejorar el rendimiento de mostrar una imagen en la pantalla. La mayoría de las bibliotecas de carga de imágenes ya realizan esta optimización, pero, si trabajas con la clase ImageBitmap, es una cuestión que debes tener en cuenta.

Prefere pasar un Int DrawableRes o una URL como parámetros a tu elemento componible en lugar de Painter.

Debido a las complejidades de lidiar con imágenes (por ejemplo, escribir una función equals para Bitmaps sería costoso desde el punto de vista del procesamiento), la API de Painter no está explícitamente marcada como clase Stable. Las clases inestables pueden generar recomposiciones innecesarias porque el compilador no puede deducir con facilidad si los datos cambiaron.

Por lo tanto, es preferible pasar una URL o un ID de recurso de elementos de diseño como parámetros al elemento componible, en lugar de pasar Painter como parámetro.

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

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

}

No almacenes un mapa de bits en la memoria durante más tiempo del necesario

Cuantos más mapas de bits cargues en la memoria, más probable será que te quedes sin memoria en el dispositivo. Por ejemplo, si cargas una lista grande de elementos componibles Image en la pantalla, usa LazyColumn o LazyRow para asegurarte de que se libere memoria cuando te desplazas por una lista grande.

No empaquetes imágenes grandes con el archivo AAB o APK

Una de las principales causas del tamaño grande de descarga de apps se debe a los gráficos que se empaquetan dentro del archivo AAB o APK. Usa la herramienta Analizador de APK para asegurarte de no empaquetar archivos de imagen más grandes de lo necesario. Reduce los tamaños o considera colocar las imágenes en un servidor y descargarlas solo cuando sea necesario.

Anterior
Pintor personalizado