Otimização de Imagens: Seu Site até 60% mais rápido.

O intuito desse artigo é alertar e orientar os desenvolvedores de WebSites quanto ao uso incorreto de imagens.
Já visto em artigos anteriores a importância da Otimização de Imagens para SEO, agora vai uma dica de como a otimização de imagens pode ajudar na velocidade do seu WebSite. Vários testes feitos pela equipe do BrasilSEO comprovam que o uso correto das imagens pode melhorar em até 60% o tempo de carregamento do seu WebSite.

OBS: as respectivas telas desse artigo são do programa Adobe Fireworks CS3 na aba Export.

Formatos de imagens mais utilizados para WEB.

• JPG: A Compactação JPG descarta todas as partes menos significativas da imagem não alterando o modo como ela é percebida pelo olho humano.

• GIF: A compactação GIF cria uma paleta de todas as cores utilizadas em uma imagem e um mapa de onde elas aparecem, com isso, economiza pontos de mesma cor em uma imagem, sua grande vantagem é suportar transparência. Por utilizar no máximo 256 cores não é aconselhado o uso em fotos.

• PNG: Formato que veio pra substituir a GIF. Ele suporta 32 Bits de cores, níveis de transparência, compressão sem perda de qualidade e é capaz de definir o nível de opacidade de cada pixel.

Por que não utilizar PNG?

Como vimos o formato PNG mescla as melhores características da JPG e da GIF e com isso surge a pergunta “Por que então todos os WebSites não utilizam somente PNG?”. Não é utilizado em grande escala o formato PNG devido à incompatibilidade com alguns navegadores, por exemplo, o internet explorer 6.0 ainda muito utilizado não suporta os efeitos de transparência substituindo o mesmo por um campo azulado e quando estamos trabalhando com imagem simples ( baixa quantidade de cores ) o tamanho de uma PNG costuma ficar bem maior do que de uma imagem no formato GIF.

Como corrigir os erros na utilização da PNG.

• Usando JScript

Baixe o arquivo PNGfix.js e adicione o código
<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>

• Usando CSS

Baixe o arquivo iepngfix.htc
Basta colocar o arquivo iepngfix.htc na mesma pasta da sua página. Depois, é só colocar o seguinte parâmetro na classe css do objeto que exibirá a div:
.classe{
behavior: url(iepngfix.htc)
}
O arquivo .htc faz o restante. Você também pode aplicar esse comportamento a todas as imagens, da seguinte maneira:

img{
behavior: url(iepngfix.htc)
}

JPG:

É utilizado para fotos e imagens grandes. Além disso, a jpg tem atributos que ativam o “Progressive browser display”, essa opção ativa a criação de um Buffer na imagem, igual acontece com os vídeos. Vale a pena a ativação dessa opção em imagens importantes do site como Header’s, Banners, e imagens que são utilizadas como plano de fundo, sempre observando o tamanho do arquivo que pode variar com essa opção que, ativada ou desativada, geralmente diminuem quando a imagem tem dimensões grandes e aumentam quando a imagem tem dimensões pequenas devido ao bloco de informações que é alocado para ativação desse recurso.

Outro recurso interessante é a ativação do “Sharpen color edges” ou Arestas Nítidas, esse recurso faz com que os contornos percam o foco. Isso pode economizar muitos Kb em uma imagem.

OBS: você vai notar uma grande perda de qualidade em fontes com fundo vazado e nas cores amarelo e vermelho. Se sua imagem não contem essas características, desative esse recurso.

Utilize uma compressão de 75 ou 80 no campo qualidade podendo variar pra mais ou para menos devido à necessidade.

GIF:

É utilizado para imagens onde não seja necessário uma gama de informações, como por exemplo, em botões, Banners, bordas ou imagens que contenha somente um texto e miniaturas do tipo ícones.Utilize o formato “adaptive” para todos os formatos que não contenha o efeito de degradê lembrando de colocar o numero de cores corretas , mas cuidado para não deformar a imagem ( na figura acima estou utilizando 4 cores ) e use o formato “Exact” para as imagens que contenham degradê.

Ative ou desative a opção “Remove unused colors”. Ela remove as cores que não estão sendo utilizadas na figura. Como por exemplo, os tons muitos parecidos que são utilizados em pequena quantidade na imagem.Ative ou desative a opção “Interlaced browser display”. Ela possui a mesma função do “Progressive browser display” da JPG. Sempre levando em consideração o tamanho do arquivo, uma previa pode ser observada no canto superior do editor de imagem em relação a uma internet de 56kbps dando assim uma visão melhor do tamanho da sua imagem e do tempo de carregamento.

Conclusão.
Segue a baixo um exemplo de como deveria ser a configuração das imagens para um site e suas particularidades.

Utilizei nesta imagem de exemplo uma JPG quality de 75 com “Progressive browser display” e “Sharpen color edges” ligados.

Para o logo quality de 80 e também as duas opções ligadas

Para a miniatura da foto de um dos nossos escritores utilizei uma JPG quality 65 com ambas opções desligadas igualmente utilizada na foto que ilustra o artigo.

Para as GIF’s utilizei o adaptive respectivo a necessidade de cada imagem sempre utilizando a quantidade mínima de cores, em ambas as imagens do nosso site teve a necessidade de utilizar o “Remove unused colors” e desabilitar o “Interlaced browser display”.

Com essas simples trocas agilizei o carregamento do nosso blog em 60%.

Espero que, sabendo da importância e o resultado de uma Otimização de Imagens bem feita, nossa equipe não encontre WebSites tão “pesados” quando navegarmos pelos websites de nossos leitores.

Compartilhe!