super tutorial: Retirando as imagens do body

No post de introdução falei da importância de manter estilos dentro de e conteúdo dentro de . Isso se aplica muito às imagens, pois é um hábito colocá-las na frente de links ou como o próprio link.

Essa dica é baseada em alguns fatores principais:

Os mecanismos de busca irão varrer seu conteúdo dentro da tag . Imagens que não tenham relação com o conteúdo de seu blog (títulos, descrição, palavras-chaves, textos nos posts, etc) podemos dizer que serão consideradas "encheção de linguiça" (não achei termo melhor prá explicar :o );
A estruturação do código HTML fica mais limpo;
O arquivo CSS é carregado e mantido no cache desde a primeira visita do leitor, e isso diminui o tempo de carregamento das outras páginas;
As imagens na CSS permitem maior flexibilidade para escrever os estilos, possibilitando redução de código; evitam uso de tags e atributos obsoletos como , , , etc

Essas dicas servem apenas para imagens decorativas (fundos, botões, ícones, setas, bullets); as imagens relacionadas ao conteúdo devem ser colocadas dentro do HTML, utilizando corretamente a tags "alt" e "title" (isso fica para um próximo capítulo).

Para os casos em que a imagem fica ao lado do texto, não há mistério - basta apenas coloca-la como background posicionando à esquerda ou direita e aplicando o padding correto para distanciar imagem e texto (veja Links com imagem clicável)



HTML



Texto





CSS

#exemplo 1 a {

background: #cor url(http://endereço-da-imagem) no-repeat right center;

padding-right: 20px;

}

Quando as imagens ficam no lugar do texto, isso é um pouco mais complicado. Existem várias técnicas para que isso seja feito, tentando evitar o hábito de esconder o texto com "display:none" (muito ruim para SEO, principalmente no caso de títulos).

No artigo sobre CSS Image Replacement (Substituição de Imagens com CSS) do CSS Tricks, podemos verificar 9 dessas técnicas. O debate de qual está mais certa ou não, é longo, cabe à você escolher.

Eu utilizo (a conselho do Marcelo do CSS Padrões) a técnica de identar o texto com um valor alto (técnica número 3 do CSS Tricks). Veja um exemplo dessa técnica para colocar imagens no lugar dos textos "postagem mais antiga" - "postagem mais recente" do Blogger:



#blog-pager-newer-link  a {

float: left;

height: 18px;

width: 15px;

text-decoration: none;

text-indent: -2000em;

z-index: 1000;

background: url(http://endereço-da-imagem) 0 0 no-repeat;

}



#blog-pager-older-link  a {

float: right;

height: 18px;

width: 15px;

margin-right: 25px;

text-decoration: none;

text-indent: -2000em; 

z-index: 1000;

background: url(http://endereço-da-imagem) 0 0 no-repeat;

}

Normalmente as imagens utilizadas para o blog-pager são imagens decorativas como setas e não tem necessidade de ficar no conteúdo (tag ). Este exemplo geralmente usa imagens pequenas, mas imagine várias imagens pequenas carregando toda vez que seu leitor muda de página em seu blog...

Então, segue a conclusão de hoje: