Como otimizar a performance das imagens

Trabalhar com imagens pode introduzir problemas de performance rapidamente se você não tomar cuidado. É possível chegar facilmente a um OutOfMemoryError ao trabalhar com bitmaps grandes. Siga estas práticas recomendadas para garantir que o app tenha a melhor performance.

Carregue apenas o tamanho do bitmap necessário

A maioria dos smartphones tem câmeras de alta resolução que produzem arquivos de imagem grandes. Se você estiver mostrando uma imagem na tela, reduza a resolução dela ou apenas carregue a imagem até o tamanho do contêiner da imagem. O carregamento constante de imagens maiores que o necessário pode sobrecarregar os caches da GPU, levando a uma renderização de IU com baixa performance.

Para gerenciar tamanhos de imagem, faça o seguinte:

  • Reduza os arquivos para o menor tamanho possível, sem afetar o resultado que aparece na tela.
  • Converta as imagens para o formato WebP em vez de JPEG ou PNG.
  • Forneça imagens menores para resoluções de tela diferentes. Consulte a Dica 3.
  • Use uma biblioteca de carregamento de imagem, que reduz a imagem para se ajustar ao tamanho da visualização na tela. Assim, você melhora a performance de carregamento da tela.

Use vetores em vez de bitmaps, quando possível

Ao representar algo visualmente na tela, é necessário decidir se o elemento pode ser representado como um vetor. Use imagens vetoriais em vez de bitmaps, porque elas não ficam pixeladas quando são redimensionadas para tamanhos diferentes. No entanto, nem tudo pode ser representado como um vetor. As imagens capturadas com uma câmera não podem ser convertidas em um vetor.

Forneça recursos alternativos para diferentes tamanhos de tela

Se você estiver enviando imagens com seu app, forneça recursos de tamanhos diferentes para resoluções de dispositivo distintas. Isso pode ajudar a reduzir o tamanho do download do app em dispositivos e melhorar a performance, já que uma imagem de resolução menor vai ser carregada em um dispositivo de resolução mais baixa. Para saber mais sobre como fornecer bitmaps alternativos para diferentes tamanhos de dispositivo, consulte a documentação alternativa de bitmap.

Ao usar ImageBitmap, chame prepareToDraw antes de desenhar

Ao usar ImageBitmap, para iniciar o processo de upload da textura para a GPU, chame ImageBitmap#prepareToDraw() antes da renderização real. Isso ajuda a GPU a preparar a textura e melhorar a performance da exibição de uma imagem na tela. A maioria das bibliotecas de carregamento de imagem já faz essa otimização, mas se você estiver trabalhando com a classe ImageBitmap por conta própria, é importante se lembrar disso.

Prefira transmitir um DrawableRes ou um URL Int como parâmetros para o elemento combinável em vez de Painter

Devido às complexidades de lidar com imagens, por exemplo, codificar uma função igual a Bitmaps seria uma opção de computação muito cara, a API Painter não está explicitamente marcada como uma classe estável (link em inglês). As classes instáveis podem levar a recomposições desnecessárias porque o compilador não pode inferir com facilidade se os dados mudam.

É preferível transmitir um URL ou um ID de recurso drawable como parâmetro aos elementos de composição, em vez de transmitir um Painter como parâmetro.

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

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

}

Não armazene um bitmap na memória por mais tempo do que o necessário

Quanto mais bitmaps você carregar na memória, maior vai ser a probabilidade de ficar sem memória no dispositivo. Por exemplo, se você carregar uma lista grande de imagens de composição na tela, use LazyColumn ou LazyRow para garantir que a memória seja liberada ao rolar uma lista grande.

Não empacote imagens grandes com o arquivo AAB/APK

O tamanho grande de download de apps se deve principalmente aos gráficos empacotados dentro do arquivo AAB ou APK. Use a ferramenta APK Analyzer para garantir que você não esteja empacotando arquivos de imagem maiores do que o necessário. Reduza os tamanhos ou considere colocar as imagens em um servidor e só fazer o download delas quando necessário.

Anterior
Painter personalizado