Si vous avez besoin d'afficher un texte sous forme d'image à cause d'une police particulière ou pour un logo.

Pour un logo voici ce qu'il ne faut pas faire :

<img src="logo.gif" alt="Nom de la société" />

mais plutôt ceci :

XHTML :

<h1 id="logo">Nom de la société</h1>

CSS :

h1 {
height:100px; /* Hauteur du logo */
width:100px; /* Largeur du logo */
background:url(logo.gif) no-repeat;
text-indent:-9000px;
}

A présent, vous souhaitez remplacer le texte par une image de fond :

CSS :

#logo {
background:transparent url(image.png) no-repeat 0 0;
display:block;
height:100px; /* Hauteur du logo */
width:100px; /* Largeur du logo */
overflow:hidden;
line-height:1000px;
}

D'une part, les personnes utilisant un navigateur texte seront ravies et d'autre part, c'est excellent pour le référencement

OUI, MAIS !
car il y a un mais, si vous utilisez votre image comme un lien, vous aurez un cadre pointillé tout autour de l'élément et voici la solution pour éviter ce genre de désagrément.
Il suffit juste d'ajouter ceci comme propriété CSS:

outline: 0;

et le tour est joué ! ;-)