Wiki_capa.jpg
ESCOLHENDO O FORMATO CORRETO.

O primeiro passo é a escolha do formato mais adequado a sua necessidade, na hora de salvar a imagem. Atualmente temos 3 principais opções de formato: JPG, PNG e GIF.

 

De forma bem resumida, PNG é o formato que garante melhor qualidade nas imagens e permite trabalhar com áreas transparentes, porém custa um peso maior em relação aos outros formatos.

GIF pode ser estático ou animado. Também aceita transparência e trabalha com variedade limitada de cores (no máx 128 ou 256 cores) portanto é recomendado apenas para imagens com cores mais opacas (sem efeitos, degrades e etc). Quando estático e com poucas cores tem baixo peso, porém quando animado tem um peso maior que os outros formatos, entretanto ainda é uma boa opção para animações curtas, que não exigem serem exibidas em formato de vídeo.

JPG é o formato mais usado para web e tem uma boa relação custo X benefício, pois os editores de imagens, como Photoshop, geram opções na hora de salvar para controlar o peso e a qualidade da imagem resultante.
Nesses editores você tem a opção de “Salvar para Web” que faz uma compactação considerável no peso das imagens, mas além disso existem diversos softwares de fácil acesso que são capazes de enxugar ainda mais o peso do seu arquivo, tornando a imagem significativamente otimizada.

Em 2015 o Google anunciou o seu novo formato de arquivos, o WebP. Este mesmo formato reúne as possibilidades dos outros tipos de arquivos, como transparência, animação e ainda com uma altíssima taxa de compressão sem refletir na qualidade visual das imagens. Seu uso ainda está avançando pela web, de modo que ainda não é compatível com todos os navegadores, contudo é uma grande promessa para o futuro próximo.

Wiki_post-1_01.jpgWiki_post-1_02.gif

 

PRÓXIMAS ETAPAS DE OTIMIZAÇÃO:

Carregamento:
Lembre-se de salvar seus arquivos JPG e PNG no modo “JPG Progressivo” e “PNG Interlaced” pois eles são carregados por porcentagem e não por área. Isso evita que o usuário fique aguardando o carregamento fracionado da imagem. As imagens são exibidas imediatamente pelo navegador em uma versão de visualização, mostrando a imagem inteira com baixa qualidade e aos poucos a porcentagem da qualidade vai crescendo.

Wiki_post-2_01.jpgWiki_post-2_02.jpg

 

Tamanho:
Um erro muito comum e de enorme impacto negativo é o uso de imagens grandes sendo exibidas em um pequeno tamanho. É como você utilizar um outdoor em tamanho real para exibi-lo em um Smartphone!
Isso acontece quando se cadastra uma imagem grande no site e suas dimensões são definidas por códigos CSS ou por um editor da área de conteúdo. Porém nesse caso o navegador precisa carregar internamente a imagem em tamanho grande e depois reduzi-la antes da exibição, prejudicando não só o peso mas a velocidade do carregamento do site.
Portanto utilize softwares de edição de imagem para reduzir os arquivos ao tamanho correto que eles serão exibidos e evite grandes áreas brancas sem utilidade nas imagens.

 

Essas dicas representam apenas uma fração do universo do Web Design, por isso é muito importante que seu e-commerce conte com um bom profissional de criação em sua equipe de marketing ou agência contratada.

 

Alexsandro Santos 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção