A maior parte do tráfego de download consiste em imagens. Sendo assim, quanto menor for o número de imagens para download, melhor será a experiência de rede oferecida pelo app aos usuários. Esta página traz orientações sobre como tornar os arquivos de imagem menores e otimizados para a rede.
Sobre os formatos de imagem
Os apps Android geralmente usam imagens em um ou mais dos seguintes formatos de arquivo: AVIF, PNG, JPG e WebP. Para cada um desses formatos, há etapas que você pode seguir para reduzir o tamanho das imagens.
AVIF
O Android 12 (API de nível 31) e versões mais recentes são compatíveis com imagens que usam o formato de arquivo de imagem AV1 (AVIF). O AVIF é um formato de contêiner para imagens e sequências de imagens codificadas com AV1. O AVIF aproveita o conteúdo codificado nos frames da compactação de vídeo. Isso melhora muito a qualidade da imagem, mantendo o mesmo tamanho de arquivo que os formatos de imagem mais antigos, como JPEG. Para ver informações detalhadas sobre as vantagens desse formato, consulte a postagem do blog (link em inglês) de Jake Archibald.
PNG
Uma solução para tornar seus arquivos PNG menores é reduzir o número de cores exclusivas usadas em cada linha de pixels que compõe a imagem. Ao usar menos cores, você melhora o potencial de compactação em todos os outros estágios do pipeline.
A redução do número de cores exclusivas faz muita diferença, porque a efetividade da compressão PNG é parcialmente uma função do grau de variação de cores entre pixels vizinhos. Assim, a redução do número de cores exclusivas em todas as linhas das imagens PNG pode ajudar a reduzir o tamanho dos arquivos relacionados.
Ao decidir se você deve ou não adotar essa estratégia, lembre-se de que essa redução equivale efetivamente à aplicação de um estágio de codificação com perdas à imagem. No entanto, uma ferramenta de codificação pode não ser um bom indicador da gravidade de erros aparentemente pequenos para o olho humano. Portanto, faça esse trabalho manualmente para garantir o equilíbrio correto entre compactação eficiente e qualidade de imagem aceitável.
Há duas abordagens particularmente úteis que você pode adotar: dar preferência a formatos indexados e aplicar a quantização vetorial.
Dar preferência a formatos indexados
Toda tentativa de redução de cor precisa começar com a otimização das cores para o uso do formato INDEXED ao exportar a imagem como um arquivo PNG. O modo de cor INDEXED funciona por meio da seleção das 256 melhores cores a serem usadas e da substituição de todos os valores de pixel por índices nessa paleta de cores. O resultado é uma redução de 16 milhões (possíveis) de cores para apenas 256 cores: de 3 (sem transparência) ou 4 (com transparência) bytes por pixel para 1 byte por pixel. Essa mudança é o primeiro passo de uma redução significativa no tamanho do arquivo.
A Figura 1 mostra uma imagem e a variante indexada correspondente.
Figura 1. Uma imagem antes e depois da conversão para o formato INDEXED.
A Figura 2 mostra a paleta de cores da imagem na Figura 1:
Figura 2. Paleta de cores da imagem na Figura 1.
A representação da imagem em uma paleta melhora significativamente o tamanho do arquivo. Por isso, vale a pena investigar se a maioria das imagens pode ser convertida.
É claro que nem todas as imagens podem ser representadas com precisão com apenas 256 cores. Algumas, por exemplo, podem precisar de 257, 310, 512 ou 912 cores para ter uma aparência correta. Nesses casos, a quantização vetorial também pode ser útil.
Quantização vetorial
"Quantização vetorial" (VQ, na sigla em inglês) é uma forma melhor de descrever o processo de criação de uma imagem indexada. A VQ serve como um processo de arredondamento de números multidimensionais. Nesse processo, todas as cores da imagem são agrupadas com base em semelhança. Todas as cores de um determinado grupo são substituídas por um único valor de ponto central, o que minimiza o erro das cores nessa célula (ou "site" se você está usando a terminologia de Voronoi). Na Figura 3, os pontos verdes representam as cores de entrada, e os pontos vermelhos são os pontos centrais que substituem as cores de entrada. Cada célula é delimitada por linhas azuis.
Figura 3. Uso da quantização vetorial nas cores de uma imagem.
O resultado do uso da VQ em uma imagem reduz o número de cores exclusivas, substituindo cada grupo de cores por uma única cor com qualidade visual muito semelhante.
Essa técnica também permite definir o número máximo de cores exclusivas na sua imagem. Por exemplo, a Figura 4 mostra a cabeça de um papagaio em 16,7 milhões de cores (24 bits por pixel, ou bpp) junto com uma versão que permite o uso de apenas 16 cores exclusivas (3 bpp).
Figura 4. Imagem antes e depois do uso da quantificação vetorial.
De imediato, é possível ver que há uma perda de qualidade. A maioria das cores gradientes foi substituída, transmitindo um efeito de color banding à imagem. Essa imagem precisa de mais de 16 cores exclusivas.
A configuração de uma etapa de VQ no pipeline pode ajudar a ter uma ideia melhor do número real de cores exclusivas usadas pela imagem e a reduzi-lo significativamente. Há uma série de ferramentas disponíveis que ajudam a implementar essa técnica.
JPG
Se você está usando imagens JPG, há diversas mudanças pequenas que podem proporcionar uma economia significativa no tamanho do arquivo. São elas:
- Produzir um arquivo menor usando diferentes métodos de codificação (sem afetar a qualidade).
- Ajustar levemente a qualidade para melhorar a compactação.
O uso dessas estratégias pode resultar em reduções de até 25% no tamanho do arquivo.
Não esqueça que as ferramentas de exportação de fotos podem inserir metadados desnecessários (como informações de GPS) nas suas imagens. Use pelo menos as ferramentas existentes para ajudar a remover essas informações dos seus arquivos.
WebP
WebP é um formato de imagem mais recente compatível com o Android 4.2.1 (API de nível 17). Esse formato proporciona compactação superior sem perda e com perda para imagens na Web. Com o WebP, os desenvolvedores podem criar imagens menores e mais detalhadas. Os arquivos de imagem WebP sem perda são, em média, 26% menores que os arquivos PNG. Esses arquivos de imagem também são compatíveis com transparência (conhecidas também como "canal Alfa") a um custo de apenas 22% mais bytes.
Imagens WebP com perda são 25% a 34% menores que as imagens JPG semelhantes com índices de qualidade SSIM semelhantes. Para os casos em que a compactação RGB com perda é aceitável, o WebP com perda também é compatível com transparência, produzindo, em geral, arquivos três vezes menores que arquivos PNG.
Para saber mais sobre o WebP, visite o site do WebP.
Você pode converter as imagens BMP, JPG, PNG ou GIFs estáticos que estão em uso para o formato WebP usando o Android Studio. Para ver mais informações, consulte Criar imagens WebP usando o Android Studio.
Como selecionar um formato
Formatos de imagem diferentes são adequados para tipos de imagens distintos. Os formatos JPG e o PNG têm processos de compactação muito diferentes e produzem resultados bastante diversos.
A escolha entre PNG e JPG geralmente se resume à complexidade da própria imagem. A Figura 5 mostra duas imagens que variam muito de acordo com o esquema de compactação usado pelo desenvolvedor. A imagem à esquerda tem muitos pequenos detalhes e, portanto, é compactada de forma mais eficiente com JPG. A imagem à direita, com execuções da mesma cor, é compactada com mais eficiência com PNG.
Figura 5. Casos adequados para JPG e PNG.
O WebP como formato pode ser compatível com os modos com e sem perda, o que o torna um substituto ideal para os formatos PNG e JPG. É preciso lembrar apenas que ele só é nativamente compatível com dispositivos com o Android 4.2.1 (API de nível 17) e versões mais recentes. Felizmente, a grande maioria dos dispositivos atende a esse requisito.
A Figura 6 mostra uma visualização simples para ajudar você a decidir qual esquema de compactação usar.
Figura 6. Como decidir sobre um esquema de compactação.
Determinar valores de qualidade ideais
Você pode usar técnicas diferentes para atingir o equilíbrio certo entre compactação e qualidade da imagem. Uma técnica usa valores escalares e, portanto, funciona apenas para JPG e WebP. A outra aproveita a biblioteca do Butteraugli e pode ser usada em todos os formatos de imagem.
Valores escalares (somente JPG e WebP)
As vantagens do JPG e do WebP vêm do fato de que você pode usar um valor escalar para equilibrar qualidade e tamanho do arquivo. O segredo é descobrir o valor de qualidade correto para sua imagem. Um nível de qualidade muito baixo produz um arquivo pequeno, afetando a qualidade da imagem. Um nível de qualidade alto demais aumenta o tamanho do arquivo sem proporcionar benefícios perceptíveis para o usuário.
A solução mais simples é escolher e usar um valor não máximo. No entanto, lembre-se de que o valor de qualidade afeta cada imagem de forma diferente. Por exemplo, embora uma qualidade de 75% ofereça uma boa aparência na maioria das imagens, em alguns casos esse mesmo valor não terá o mesmo efeito. Teste o valor máximo escolhido em comparação com uma amostra representativa de imagens. Além disso, faça todos os testes nas imagens originais, não nas versões compactadas.
Para grandes aplicativos de mídia que enviam e reenviam milhões de JPGs por dia, o ajuste manual de cada recurso é inviável. Para superar esse desafio, especifique vários níveis diferentes de qualidade de acordo com a categoria da imagem. Por exemplo, defina a qualidade para miniaturas como 35%, uma vez que uma imagem menor oculta mais artefatos de compactação.
Butteraugli
O projeto Butteraugli é uma biblioteca para testar o limite de erro psicovisual de uma imagem: o ponto em que o usuário começa a notar a degradação da imagem. Em outras palavras, esse projeto tenta quantificar a distorção de uma imagem compactada.
O Butteraugli permite definir uma meta para a qualidade visual e executar compactações PNG e JPG, bem como WebP com e sem perda. Em seguida, escolha a imagem com o melhor equilíbrio entre tamanho de arquivo e nível do Butteraugli. A Figura 7 mostra um exemplo de como o Butteraugli foi usado para determinar o nível mínimo de qualidade JPG antes que a distorção visual fosse alta o suficiente para que o usuário notasse um problema. O resultado foi uma redução de aproximadamente 65% no tamanho do arquivo.
Figura 7. Uma imagem antes e depois do uso da tecnologia Butteraugli.
O Butteraugli permite prosseguir com base na saída ou na entrada. Ou seja, você pode procurar a configuração de qualidade mais baixa antes que o usuário veja uma distorção perceptível na imagem resultante ou definir níveis de distorção de imagem de maneira iterativa para saber quais são os níveis de qualidade associados.
Tamanhos de exibição
É tentador manter uma única resolução de uma imagem em um servidor. Quando um dispositivo acessa a imagem, o servidor a exibe nessa resolução e deixa a redução de tamanho para o dispositivo.
Essa solução é conveniente para o desenvolvedor, mas pode ser problemática para o usuário. Isso acontece porque a solução força o usuário a fazer o download de muito mais dados do que o necessário. Em vez disso, armazene vários tamanhos de imagens e exiba o tamanho mais apropriado para um caso de uso específico. Por exemplo, a exibição de uma imagem em miniatura real em vez de exibir e reduzir uma versão em tamanho original consome muito menos largura de banda da rede.
Essa abordagem oferece uma boa velocidade de download e é mais vantajosa para os usuários que têm planos de dados limitados. Além disso, a imagem ocupa menos espaço no dispositivo e na memória principal. No caso de imagens grandes, como aquelas em 4K, essa abordagem também evita que o dispositivo precise redimensioná-las antes do carregamento.
A implementação dessa abordagem requer um serviço de imagem de back-end para disponibilizar imagens em várias resoluções com armazenamento em cache adequado. Existem alguns serviços podem ajudar nessa tarefa. Por exemplo, o App Engine vem com o recurso de redimensionamento de imagem já instalado.