Reduzir o tamanho das imagens

Já deve ter acontecido com você de colocar uma linda cor grafite no fundo de uma coluna e, quando acessa seu blog na casa do amigo, aquele grafite virou... roxo!!

A leitura das cores nem sempre é a mesma em todos os monitores, por isso, muitas vezes os designers preferem utilizar imagens para os fundos.

O uso de CSS em vez de imagens é sempre mais recomendável para reduzir o tamanho do site e melhorar a velocidade de carregamento, mas com algumas técnicas é possível colocar imagens com uma variação muito pequena de tamanho e carga.

Esta série de posts vai mostrar como colocar imagens em seu blog utilizando técnicas que possibilitam essa otimização.


O tamanho em pixels e a economia em bytes

Corte sempre suas imagens no menor tamanho possível, e utilize as propriedades de background.

O uso da imagem abaixo permite que o body mantenha sempre a cor #141414 em qualquer monitor:


Essa é uma imagem JPG, de 10 pixels x 10 pixels, com 287 bytes. Já é uma imagem pequena, apropriada para ser utilizada como background:


body {
background: #141414 url(http://endereço-da-imagem/body_bg.jpg);
}


Por padrão, como não colocamos as propriedades background de repetição (background-repeat) e posição (background-position), ele se repetirá na horizontal e na vertical e ficará posicionada a partir da esquerda e a partir do topo.

Saiba mais sobre as propriedades background

Poderíamos, entretanto reduzir a imagem ainda mais - para 1 pixel x 1 pixel (283 bytes) - e teríamos o mesmo efeito. Para cada imagem que reduzirmos 2, 3, 4 bytes, ganharemos em velocidade de carregamento.


Vocês provavelmente não conseguirão enxergar bem a imagem acima, mas a repetição fará com que ela preencha todo o body do template.

Outro exemplo - a imagem abaixo desenhei para fazer uma barra de fundo para títulos. Para facilitar o desenho, criei nas medidas 50px × 32px (328 bytes).



.blue-bar {
background: url(http://endereço-da-imagem/top-bg.gif) repeat-x left bottom;
}


Eu não poderia cortar sua altura, pois precisava do gradiende, mas podia reduzir bastante sua largura já que a imagem iria se repetir na horizontal, mantendo o mesmo efeito e salvando 59 bytes:


Imagem de 2px × 32px (269 bytes)

Para imagens de gradiende linear que se repetem na vertical, deve ser aplicado o mesmo raciocínio - utilize a largura que for necessária para cobrir a coluna e diminua a altura ao máximo, deixando que a propriedade background "repeat-y" se encarregue de repetir a imagem.

Depois de cortar suas imagens, verifique novamente o tamanho de seu template. Tenho certeza de que, com isso, você já conseguirá uma grande redução na velocidade de carregamento.

Em resumo:

* Menor tamanho possível em largura e altura para imagens que se repetem na horizontal e vertical;
* Reduza a largura das imagens que se repetem na horizontal;
* Reduza a altura das imagens que se repetem na verti