Imagens pesadas no app: cache, tamanhos e formatos
Fotos em resolução original, sem cache e decodificadas durante a rolagem. Imagens são uma das principais causas de lentidão e consumo de dados em apps.
Por Equipe We Codex3 min de leitura
A câmera de um celular moderno tira fotos de vários megabytes. Quando essas fotos vão direto para a lista do app, cada item exige baixar e decodificar uma imagem enorme para exibir uma miniatura. O resultado: rolagem travada, memória estourando e o plano de dados do usuário indo embora.
Tamanho certo do servidor
O servidor deve oferecer versões redimensionadas: miniatura para listas, média para detalhes, original só quando realmente necessário. Serviços de imagem fazem isso sob demanda.
Formatos modernos
WebP e AVIF reduzem bastante o tamanho em relação ao JPEG — os mesmos ganhos da web (AVIF, WebP e srcset: o guia rápido para imagens leves e nítidas).
Cache no aparelho
Bibliotecas de imagem com cache em disco evitam baixar a mesma foto a cada abertura. expo-image e similares oferecem cache, transições suaves e placeholders.
Placeholders
Um fundo com a cor predominante ou uma versão desfocada minúscula enquanto a imagem carrega evita espaços em branco e mudanças de layout.
Upload pelo usuário
Ao enviar fotos, redimensione e comprima no próprio aparelho antes do upload: menos espera, menos dados e menos armazenamento (Upload de arquivos no backend: tamanho, tipo e armazenamento).
Onde mais pesa
Listas com muitas fotos — marketplaces, catálogos, redes — são os casos críticos (Listas lentas no React Native: FlatList, FlashList e memorização na prática). Imagens grandes também atrasam a abertura do app (App demora para abrir? Onde investigar o tempo de inicialização).
No Kharbox, marketplace de veículos, esse fluxo é central. Veja aplicativos nativos da We Codex ou fale com a gente.
- Imagens
- React Native
- Performance
- Cache
Resolver de vez, com quem faz isso todo dia
Tem um app em mente ou um app que precisa ficar mais rápido?
Este artigo mostra o caminho. A implementação sob medida — o detalhe que muda o resultado no seu caso — é o trabalho da We Codex, empresa de engenharia do grupo Wocom.
Continue lendo
Tudo sobre Mobile- Ler artigo
Mobile3 min
Listas lentas no React Native: FlatList, FlashList e memorização na prática
A lista do seu app engasga ao rolar e fica em branco quando o usuário desce rápido? Veja as causas mais comuns e as correções que devolvem a fluidez.
- Ler artigo
Mobile3 min
App demora para abrir? Onde investigar o tempo de inicialização
Cada segundo de tela de abertura é um usuário a menos. Veja onde investigar quando o app demora para iniciar e o que costuma resolver.
- Ler artigo
Web & Performance3 min
AVIF, WebP e srcset: o guia rápido para imagens leves e nítidas
Imagens são o maior peso da maioria dos sites. Veja como escolher entre AVIF, WebP e JPEG e como servir o tamanho certo para cada tela.