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.

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. 

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.