Guia(2) - Utilize correctamente imagens no seu website

Este é o segundo artigo numa serie de 18 no que respeita à optimização de websites. E é o primeiro que aborda directamente a vertente velocidade!

Qual é a importância das imagens na velocidade de um website? Porque começar pelas imagens?

Será que nos deveriamos preocupar com as imagens num website? Afinal ultimamente costumam ser flash e o javascript, os elementos mais pesados de uma página. Até na publicidade o flash está a ganhar terreno às tradicionais imagens... Porque me estou a preocupar com as imagens?

Talvez porque na maioria dos websites 50 a 90% do seu tamanho se deva às imagens!

Exemplo: Utilizando o Yslow, podemos verificar que peso total do site weblouca.com ronda os 600KB, sendo que destes 600KB, 400KB são imagens. Ou seja 67% do site são imagens! É lógico começar por optimizar algo que representa 67% do tamanho do website!

Diferentes formatos de imagens.

GIF
Formato a morrer? O formato de imagens GIF utiliza uma palete de cores que pode ir até 256, em que cada pixel corresponde a uma cor indexada nessa palete.

O formato GIF suporta animações, e actualmente arrisco dizer, que nos grandes sites só se vê quando aparecem imagens de loading. Suporta ainda transparência.

JPEG
O formato Jpeg não possui as restrições associadas ao formato Gif. Pode conter milhões de cores, mantendo um bom tamanho de imagem. No entanto não suporta transparecia!

PNG
O PNG é decididamente o grande formato:

PNG-8
True Color PNG

_PNG-8
Este formato é muito parecido ao formato Gif, fornecendo na maioria dos casos imagens de menor tamanho. No entanto não suporta animações. O 8 vêm de 8 bits, 2^8=256.

Quando utilizar cada um destes formatos?

JPEG - Para fotos
GIF - Animações
PNG-8 - Para tudo o resto.

Quando for necessário, mais de 256 cores, pode considerar o True Color PNG. No entanto na maioria das vezes o olho humano não nota a diferença. Pode ainda pensar em utilizar JPEG, caso não necessite de transparência. Apesar de que o formato a utilizar é sem duvida o PNG-8.

Optimize as suas imagens GIF!

Como? Converta-as a PNG-8 caso estas não contenham animações.

Reduza o tamanho das suas imagens!

Utilize ferramentas como o site www.smushit.com, para reduzir o tamanho das suas imagens, sem perda de qualidade

Onde realizar o load das imagens?

Faça o load das suas imagens via CSS. Evite, ao máximo, realizar o load das suas imagens directamente no HTML da página.

Utilize CSS Sprites!

As imagens estáticas de um website podem, muitas vezes, serem incluídas numa única imagem maior. O load desta imagem só ocorre uma vez. É mais rápido para o browser descarregar uma imagem maior do que 30 mais pequenas.

Pode ver mais sobre CSS sprites neste artigo. Alias esta técnica é mesmo crucial a qualquer website que se preocupe com o seu desempenho.

Não redimensione as suas imagens no HTML

Por exemplo, se possui uma imagem com 500X500 e desejaria ter uma imagem com 200x200 não faça nada do género <img src="/..." height="200px" width="200px">.

Edite a sua imagem e redimensione-a. Irá reduzir o tamanho da imagem e provavelmente está ficará até com "maior qualidade".

TrackBack URI for this entry