Otimizar as imagens - tamanho e formato

Como mencionamos, as imagens são geralmente as maiores vilãs no peso de seu blog e, na maioria das vezes, são as imagens nas postagens que "engordam" esse valor.

Se o seu blog for sobre fotografia, design ou qualquer assunto relacionado à imagens, é natural que você queira e precise postar imagens da melhor qualidade. Mas uma grande parte dos blogs não tem necessidade de tanta perfeição.

A escolha correta do tamanho e do formato da imagem, de acordo com sua finalidade, traz os benefícios de economia de banda, mais leveza (e consequentemente uma site mais amigável aos olhos dos crawlers) e menor tempo de carregamento (o que agradará seu leitor).

Tamanho da Imagem

O Blogger redimensiona automaticamente as imagens que você faz upload, para que elas possam se encaixar no tamanho de sua área de postagem. Isso não significa que essa imagem terá apenas o tamanho redimensionado. Se você subir uma imagem de 1024px x 728px para seu post, ainda que o Blogger a transforme numa imagem com largura de 400px, é a imagem original que "pesará" em sua página.

Se você não precisa que seu leitor clique na imagem para amplia-la e ver alguns detalhes, já faça um redimensionamento antes de posta-la, adaptando o tamanho da imagem ao tamanho de sua área de postagem.

Formato do Arquivo

Escolha o tipo e qualidade da imagem de acordo com o uso que fará dela. As imagens de formato PNG, por exemplo, são lindas, maravilhosas, com transparência, etc. É bem provável que você precise delas para botões, backgrounds, e outras imagens em seu template. Mas também é bem provável que elas não farão grande diferença em um post. Portanto, economize nos posts para poder usa-las no template.

Veja abaixo alguns exemplos da mesma imagem, em diversos formatos, e seu respectivo tamanho em bytes:

Imagem original - 800px × 600px (126.641 bytes) - formato JPG

Redimensionadas para 300px x 225px:


Faça a compactação de suas imagens e leve em conta o seguinte:

Imagens GIF: A compactação no formato GIF cria uma paleta das cores utilizadas na imagem e um mapa de onde elas aparecem. Economiza pontos de mesma cor. Sua grande vantagem é suportar transparência, mas utiliza no máximo 256 cores o que é desaconselhável para fotos. Útil para screenshots explicativas, devido às cores chapadas, com mais economia do que em PNG. Imagens com transparência sobre fundo claro tem boa visualização em GIF.

Imagens JPG: Ideal para fotos, ao compactar em formato JPG você descarta todas as partes menos significativas. Geralmente a qualidade de 70 a 80% fica adequada para a maioria das imagens.

Imagens PNG: Utilize onde a transparência em GIF perder qualidade, como botões com bordas arredondadas sobre fundo escuro. O formato PNG suporta 32 Bits de cores e é capaz de definir o nível de opacidade de cada pixel. Em imagens simples, com pouca necessidade de cores, o formato PNG normalmente fica bem maior que uma imagem GIF.

DICA

Para evitar o uso de imagens PNG, habitue-se a fazer um fundo para a imagem com a cor igual a do fundo do local onde ela será colocada.

Exemplo - botão com bordas arredondadas

Otimização

Para poder otimizar suas imagens é imprescindível que você tenha em seu computador um editor de imagens que lhe proporcione as várias alternativas de edição, compactação e otimização de imagens, como o Fireworks (minha sugestão), o OptiPNG, Photoshop, etc.

Existem também otimizadores on line, que não oferecem tantos recursos, mas ajudam, caso você não queira gastar com programas mais completos.


Observação: Veja neste post como o uso excessivo de imagens aumenta o tamanho da página.

Siga as dicas aqui postadas e tente racionalizar - utilize imagens que complementem o conteúdo de seu artigo. Uma a duas imagens decorativas (que não complementam o conteúdo) por post são um artifício para não fazer com que textos longos percam a atratividade. Além de duas imagens sem relação com o conteúdo são desperdício de espaço e de bytes.