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 Int
DrawableRes
ou um URL 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.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- ImageBitmap x ImageVector {:#bitmap-vs-vector}
- Salvar o estado da interface no Compose
- Fases do Jetpack Compose