Às vezes é bom repetir os fatos básicos, principalmente porque tem sempre gente chegando e começando a aprender.
Uma dúvida muito comum, que eu vejo se repetir há alguns anos, é onde usar e onde não usar imagens no background via CSS. Para quem está chegando agora, a questão básica é que existem duas maneiras de se fazer uma imagem aparecer na tela. Cada uma delas tem suas vantagens e desvantagens e é melhor usada para um fim específico. Mas muita gente usa apenas um método ou o outro.
Uma delas é inserir uma tag HTML:
<img src="seta.gif" alt="Prosseguir" />
A outra é inserir essa imagem como background de uma tag qualquer através do CSS:
a.prosseguir {
background: white url(seta.gif) top left no-repeat;
}
As diferenças entre eles, embora não apareçam à primeira olhada no site, são substanciais. Experimente, por exemplo, desligar o CSS daqui do Tableless. Você vai ver que todas as imagens que compôem o layout, incluindo logotipo e as sombras laterais, vão desaparecer. Vão sobrar apenas umas imagenzinhas do Feedburner e da barra lateral direita.
Quem trabalha com tabelas geralmente usa apenas o primeiro método. Infelizmente muita gente aprendendo a construir layouts Tableless com CSS, ao aprender o segundo método, tem abandonado completamente o uso da tag img. É um exagero comum entre os novatos, assim como abandonar completamente o uso da tag table.
Por que o Diego escolheu algumas imagens para ir no meio do código HTML e outras para inserir como background CSS? A regra é simples, como todo o resto na dobradinha XHTML+CSS, imagens que fazem parte de seu conteúdo vão no HTML, imagens que são apenas elementos de layout vão no CSS.
Veja, por exemplo, este meu post sobre o Performancing. Há, no topo e no rodapé, dois gradientes. Experimente desligar o CSS. Você vai ver que algumas imagens foram mantidas. Todas elas fazem parte do conteúdo da página:
- O banner para o Workshop Produtividade Web 2.0.
- O screenshot do Performancing.
- A setinha para cima do Rec6 e a corretinha do Linkk.
- O banner do Firefox
- Minha foto.
Há outra maneira, que talvez você ache mais simples, para explicar isso. Imagine-se fazendo o redesign do site. Todas as imagens que você deve manter exatamente como estão são conteúdo. Todas as que você vai querer mudar são layout. Veja isso no exemplo acima. Você não muda um banner, a foto do autor do site ou o screenshot de um programa porque fez um redesign em seu site. Mas, claro, bordas, sombras, fundos, chanfros, linhas separadoras, logotipos, tudo isso pode mudar.
Uma última coisa em que você pode pensar é na indexação pelo Google Bot. Ao fazer uma pesquisa de imagens, você vai querer que as pessoas encontrem em seu site um screenshot de programa, a foto de uma celebridade, um diagrama de explicação de uma teoria ou uma foto de um animal. Mas as imagens decorativas só vão atrapalhar.
Há ainda um terceiro caso que pode confundí-lo, que é o image replacement. Mas sobre isso o Diego já escreveu bastante.
Se ainda estiver interessado, leia também:
Este post foi criado
na Sexta-feira, Março 16th, 2007 às 07:10 e está arquivado em Geral.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
^^ Caramba, texto super detalhado.. espero que ninguem mais tenha dúvidas quanto a isso!.
mas a ideia basica consiste em um dos principios dos web standards: “separar conteúdo da exibição”.
Diego, aproveitando a oportunidade, queria saber se tem como vc criar uma area com os bugs relacionados a cada navegador, suas causas e soluções, isso seria uma mão na roda, ajudaria muita gente.
flw
Muito legal, os layouts em tableless que eu fiz usei tudo Background, agora percebi a gravidade do meu erro, como na verdade sou coder em PHP e não design, acho um absurdo ouvir que um site bom so tem tableless e nada de nada de tabela.
Muitas vezes acredito que é um absurdo fazer tudo em tableless, ainda mais problemas como de diversas div com alturas diferentes, corrigidas por script em JS. Dando um trabalho muito maior. ;/
Abraços
Bingo 
Excelente artigo Elcio!
Parabens!
Só acho que o logotipo tem que ser adicionado com a tag <img>, ele faz parte do conteúdo da página.
Inclusive se enquadra em todos os exemplos do artigo:
-Você quer manter o logotipo na versão sem CSS
-Você quer que o logotipo seja indexado (imagine pesquisar por “Volkswagen” e não achar o logotipo deles?? que frustrante)
-O logotipo permanece depois do redesign da página.
Conclusão: o logotipo pode mudar de formato, mas sempre fará parte do conteúdo.
@Carlos André Ferrari,
Preparei nessa página uma tabela de compatibilidade CSS, com os navegadores e links (em inglês) para as soluções.
Gostei do texto, Elcio.
Tinha algumas dúvidas em relação a isso, mas agora ficou claro!
Completando o que o Alexandre citou sobre conteúdo:
Em versões para impressão formatadas com CSS, o background, tanto com imagens como em cores é ignorado.
Só que é o seguinte Élcio, você esqueceu de tocar em outro ponto, questão de acessibilidade, caso você insira as imagens via CSS e não defina também uma cor de fundo, dependendo da cor do texto em contraste com o fundo, quando o usuário navega com CSS abilitado e imagens desabilitadas, ele não consegue ler nada, experimente fazer isso aqui no Tableless pra você ver, até dá pra ler bem, mas cansa um pouco a visão.
bem interessante o texto.
Eu sempre usei a tag img, achando que não havia diferença. Agora que sei, posso racionalizar ^^
Ótimo texto! Parabéns!
Faltou um caso meio especifico que é pra imagens que vao em marcadores de menu por exemplo.
que vão como imagem de marcador da lista.
Marcadores de lista são decorativos, não adicionam nenhum valor semântico… devem ser adicionados com list-style-image ou background nos elementos por css e não diretamente no código.
Bom texto, agora clareou!
FEED ta com erro.. 
Abraços
[…] em usuários de portáteis, tanto faz, mas deixo aqui minha pequena dica, que é só um complemento dessa dica aqui dada pelo […]
tenho uma duvidaa
Como faço para pegar o link de um background para colocar no HTML do meu layout?
Dou a minha cara a tapa!!! Tableless é maravilhoso, resolvi estudar pra ver se era mesmo, mas com aquele pensamento antigo de Web Designer preguiçoso que não quer mexer com código: “Esse tal de tableless…vai limitar meu design e vai ser um saco fazer…”.
Depois que estudei o pensamento mudou para: “Putz! Como eu estava sendo burra!! Tableless é maravilhoso!”
É isso aí…tô gostando…e essa dica das imagens clareou mais ainda…Valew!
Muito Bom Tutorial Cara =D…
Vc trabalha muito bem e seus tutoriais sao bem elaborado.
Se alguem da comunidade quiser trocar informações na área de webdesign estou à disposta é só add.
gok12_rio@hotmail.com.
By: Kel
Gostei muito do assunto. 
Antes eu também só trabalhava mais com table agora somente com tableless.
Tenho aprendido muito com este site e seus tutoriais.
Muito obrigado por compartilhar seus conheçimentos.
Fique com Deus.
Sou iniciante em CSS, to tentando fazer um topo pra uma oscommerce, mas, esbarrei num probleminha, o conteúdo do meu site está “quebrado”. Se alguém puder dar uma dica ficarei grato.
Texto muito bom. Parabéns!!