Opa!

Faz tempo que não posta né galera. Fim de ano as coisas são corridas aqui na empresa, ainda mais com mudança.

Este artigo deverá ser bem rápido, mas espero que ajude muitos a escolher a melhor forma de usar as imagens.

Uma dúvida que apareceu há algum tempo, creio que seja no Fórum Imasters, ou em algum outro lugar é a seguinte:

Quando devo usar a tag img ou a propriedade do CSS background?

Na minha opinião, a tag img deve ser usada quando queremos de fato inserir uma imagem na página HTML.

Já o background deve ser usado quando queremos colocar um fundo em algum elemento da página ou usar o IR ( Image Replacement ).

Isso é uma coisa muito óbvia.

Mas o que devemos fazer quando a empresa não tem um logo bem definido, o logo da empresa é escrito no Photoshop com uma fonte bonita?

Nesse caso se você usar apenas a imagem, não é muito recomendavel, pois se o cliente estiver com um navegador modo texto ou algum programa leitor de tela não conseguirá ler a imagem( eu sei que é até possível ler pelo atributo alt, mas não vamos entrar em detalhes ). E usar via CSS com a propriedade background, também não é muito legal, pois vai que o CSS não é carregado? ( não estou levando em contato as técnicas de IR  – Image Replacement em consideração OK? )

Nesta situação recomendo que seja utilizado as duas coisas dá seguinte forma.

HTML

<h1>Texto <img src=”imagem.jpg” alt=”Texto” /></h1>

e no CSS

h1 {
background:#FFFFFF url(imagem.jpg) no-repeat scroll left center;
color:#FFFFFF;
font-size:1px;
text-indent:-99999px;
}

Bom por hoje é somente isso!

Caso tenha algum erro ou problema.

Pode postar um comentário que lhe ajudarei.

Abraço e até o próximo.