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

    Ainda não encontrou o que está procurando?
    fale com um
    especialista pelo chat
    *De segunda a sexta, das 8h30 às 18h
    fale conosco por telefone
    ¹(11) 3136-0076 ou ²(41)98874 4973
    ¹ De segunda a sexta, das 8h30 às 18h.
    ² 24h para problemas que impeçam fechamento de pedidos.
    fale com um
    especialista pelo chat