Imagens e formatos de arquivos

Além de padronizar imagens, é importante observar que existem alguns formatos de imagens com diferentes características, usos e compressões.

Os formatos mais conhecidos são:

JPG: Usado para fotos reais. Formato mais conhecido e usado na Web e mobile. Existem diferentes padrões de cores e codificações, sendo o recomendado por compatibilidade e desempenho: cores RGB e compressão 80%. Caso a imagem esteja com mais de 100 KB ou 200 KB, provavelmente o formato não está sendo usado corretamente.

Observação: NÃO é recomendado o uso de imagens não-RGB, como CMYK (usado em gráficas/impressão).

PNG: Usado para gráficos vetoriais e não fotos. Diferente de JPG, o formato PNG suporta transparência (canal alpha). Pode ser usado em ícone de "pastas" e outras configurações, observando que PNG não é ideal para fotos reais por ficar muito grande e sem compressão. Caso um ícone tenha mais do que 50 KB ou 100 KB, provavelmente o formato não é o ideal.

GIF: Único formato universal que suporta animações, mas não é ideal para fotos (produtos) por ser limitado a 256 cores. Para animações recomenda-se vídeos (MP4) que podem ser online ou híbrido de online e offline. 

Quando usar JPG: Em fotos de produtos, padronizando formato/proporção para uma melhor visualização, otimizando o arquivo para melhor utilização dos usuários e aparelhos. Em ícones como em pastas, caso o visual seja "realista", parecido com uma foto e não um ícone.

Os aplicativos possuem suporte a adicionar bordas arredondadas e sombra. Caso seja preciso aplicar algum efeito em fotos reais, pode ser feito em software, e não usar PNG em fotos reais.

Quando usar PNG:Nunca em fotos reais, e sim em ícones/gráficos, suportando canal de transparência. Como observado acima, os aplicativos suportam configurações para bordas com arredondamento, sombra, entre outros. Nunca é uma boa opção usar fotos no formato PNG. 

Sobre compressão JPG: Este formato foi criado especificamente para ter algum nível de compressão, retirando detalhes da imagem que não são visíveis. A imagem "crua" (raw) é usada para edição de imagens, mas para uso em Web/mobile é recomendado uma compressão que varia entre 75% e 85%, reduzindo em centenas de vezes o tamanho da imagem (arquivo).

Um exemplo de imagem "raw" (sem compressão): 407 KB

• https://negotti-hc.s3.amazonaws.com/exemplos/15.jpg

Um exemplo da mesma imagem para Web/mobile (80%): 76 KB (5x menor)

• https://negotti-hc.s3.amazonaws.com/exemplos/15-Otimizado.jpg

Imagens devem ter algum nível de compressão entre 75%-85%, mantendo imagens cruas apenas para edição. Em software de edição como Photoshop, ao exportar, têm opção "Web" que sugere uma compressão para a imagem.

Destacamos que não existe relação entre a dimensão (1024x1024, 1000x500, etc.) da imagem com sua compressão. A imagem pode ser grande ou pequena, mas a compressão é aplicada na exportação para retirar detalhes não perceptíveis (como WAV e MP3, que é a versão comprimida).

Outras referências sobre compressão JPG:

• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#otimizacao_de_imagens_de_raster
• https://sirv-cdn.sirv.com/Examples/test-girl.jpg?quality=80 (exemplo: 80%)
• https://sirv-cdn.sirv.com/Examples/test-girl.jpg?quality=90 (exemplo: 90%)
• Essential Image Optimization (eBook)

Acesse aqui para saber mais sobre outros formatos de arquivos suportados pelo sistema. 

Sobre otimizações automatizadas em imagens

Para uma melhor performance em dispositivos arquivos de imagens não otimizados ou maiores que o recomendado são otimizadas de forma automatizada para no máximo 2200 pixels de largura ou altura e 92% de compressão.

Sugestões de aplicativos e APIs

Recomenda-se que as imagens já sejam exportadas (Photoshop, Pixelmator, etc.) no formato correto otimizado. No entanto, sendo necessário otimizar imagens é possível utilizar algumas opções disponíveis de softwares.

• Squoosh
• ImageOptim (Mac)
• ImageOptim (API)
• ImageOptim (Web)
• FileOptimizer (Windows)
• Trimage (Linux)
• Outros

Outras sugestões gerais

Algumas sugestões extras não restritas aos formatos de imagens:

1. Evite utilizar nomes com caracteres especiais (acentos, pontuações, etc.) pois, embora sejam suportados, podem ocorrer problemas na integração com outros sistemas e Web.
2. Prefira padronizar nomes em relação a produtos/variantes (p.ex., codigoproduto.jpg).
3. Mantenha maiúsculas e minúsculas padronizado (como jpg e JPG) pois existem sistemas que ignoram a diferença e outros sistemas que não (como Linux e servidores HTTP).
4. Evite informações descritivas (promoção, numerações, destaques, etc.) na imagem dos produtos, pois isto é possível ser aplicado por software dinamicamente, de forma otimizada e transparente mantendo as imagens limpas e otimizadas, respeitando a possíveis regras, traduções, entre outros.
5. Utilize sempre a extensão correta (jpg, png, mp4, etc.) de forma padronizada.