Considere usar imagens WebP em aplicativos Mobile
Quando um aplicativo começa a crescer, atingindo diversos públicos e consequentemente diversos smartphones, é inevitável que a preocupação com o tamanho dos arquivos do build final chegue também.
Há algum tempo venho fazendo pesquisas que possibilitem diminuir o tamanho dos aplicativos com os quais trabalho. Existem várias estratégias que podemos adotar, mas hoje vamos falar especificamente de imagens e como você pode as tornar muito mais leves, mantendo uma experiência de qualidade para seus usuários.
Descobertas
Recentemente descobri um formato de imagem do qual eu ainda não havia trabalhado o WebP.
O WebP é um formato que já existe há algum tempo — foi lançado pelo Google em 2010 — , mas só recentemente tem visto uma adoção em maior escala. Ele é capaz de produzir arquivos em qualidade semelhante ao JPEG ocupando um espaço significantemente menor; além disso, é capaz de unir vantagens de outros formatos como o PNG (suporte a transparências) e GIF (animações).
Curiosidade : Para se ter uma ideia, o Facebook adotou o WebP após perceber que as imagens ocupavam um espaço de 25% a 35% menor após conversão para o formato; o Google — que inclui suporte à tecnologia no Chrome desde 2012 — afirma que o YouTube carrega 10% mais rápido em navegadores capazes de ler WebP.
Mãos a obra
Criei um aplicativo simples que exibe 3 feeds. Dentro deste app temos três pastas para suportar as nossas imagens.
A ideia é que possamos fazer uma comparação entre peso da imagem x qualidade.
— originals contém as imagens em seu peso e formatos originais.
— eighty conterá imagens com 80% de sua qualidade em formato WebP.
— fifty conterá imagens com 50% de sua qualidade em formato WebP.
Comprimindo
Para comprimir uma imagem neste formato existem diversas formas:
- Conversores online — https://anywebp.com/convert-to-webp.html;
- Plugins figma— Existe um plugin da Figmatic “TinyImage for Figma” muito bom porém requer uma licença após 15 exportações gratuitas. Os usuários tem pedido bastante a inclusão deste suporte nativamente no Figma. Vamos acompanhando pelo fórum se teremos novidades nas próximas atualizações;
- Skecth — o export da ferramenta já traz nativamente suporte para a extensão;
- Android Studio — A documentação é excelente acesse aqui ;
- Photoshop — Para versões acima da 23.2 o suporte é nativo, a baixo dessa versão é necessário trabalhar com um plugin chamado WebPShop;
- Command line.
Neste artigo nosso foco será a análise dos benefícios da compressão e conversão para essa extensão, então vamos utilizar command line.
Instalação
Instale o conversor webp conforme o seu sistema operacional.
MacOs
brew install webp
Linux
sudo apt-get install -y webp
Comprimindo
Para efetuar a conversão e compressão você usar o comando cwebp.
Entendendo o comando
- cwebp => Conversor
webp; - -q => Define a qualidade de compressão, a escala varia entre 0 a 100. O valor considerado padrão é 75%.
- 80 => acompanha o -q e se refere a porcentagem da qualidade da compressão da imagem.
- -o => Define que será realizada uma conversão com perdas.
Para ficar mais palpável, segue imagens de como seria o mesmo fluxo via android studio.
Executei comando acima para cada uma das imagens com as variações de 80% e 50% das qualidades e coloquei nas respectivas pastas:
Caso queira automatizar este processo você pode criar um script que procura todas as imagens de uma determinada extensão e converte para WebP com qualidade desejada.
Abaixo um exemplo de comando. Você pode executar dentro do diretório do seu projeto para que todas as imagens png do projeto tenham uma versão em WebP.
Para entender mais detalhes sobre cada parte do comando recomendo esta leitura.
Analisando
Faremos a comparação dos resultados em duas etapas, uma analisando a redução do peso e a outra a qualidade visual das imagens.
Redução do peso
Execute um flutter build com a extensão de sua preferência (apk, aab, ipa), utilizando a flag — analyze-size. Para este exemplo eu utilizei:
Após finalizar o build, em seu terminal aparecerá uma mensagem como esta:
To analyze your app size in Dart DevTools, run the following command:
flutter pub global activate devtools; flutter pub global run devtools
— appSizeBase=apk-code-size-analysis_12.json
Execute o comando para abrir o devtools com o arquivo de análise gerado no build e você obterá em seu navegador o seguinte dash:
Por ele é possível navegar nas dependências e analisar os pesos de cada uma. Esse processo me ajuda muito a encontrar grandes vilões que estão deixando meus arquivos finais mais pesados. No caso das imagens elas se encontram no caminho assets/flutter_assets/assets/images.
O Resultado
Agora conseguimos ter uma comparação entre os tamanhos das imagens originais e suas compressões em 80% e 50% nas conversões.
Na pasta originals as imagens possuem 947.6 KB, comparado com as outras duas pastas temos uma redução fantástica de mais de 87% do peso, isso considerando que este é um projeto apenas com 3 imagens em cada pasta, imagina o efeito em projetos de produção.
Qualidade
Comparando a qualidade e experiência visual do usuário nos 3 feeds, percebemos que mesmo após a compressão a entrega de qualidade continua extremamente satisfatória.
Conclusão
Vale muito a pena utilizar WebP com compressão de qualidade . Além de ajudar muito no tamanho do aplicativo, padronizamos as extensões de imagens.
Sabe mais coisas sobre esse assunto e gostaria de contribuir? Deixe um comentário e vamos trocando experiências.
