El problema
Para hacer nuestras páginas más atractivas es habitual colocar imágenes conteniendo texto para enlaces o para botones, banners, etc. Esto suele recargar las páginas, supongamos que queremos usar cinco imágenes que sólo se diferencian en el texto, por ejemplo para una barra de navegación. ¿Es indispensable cargar las cino imágenes?

La solución
La respuesta a la pregunta de este problema es bien simple: No, realmente podemos valernos de una sóla imagen. El método para lograr este importante ahorro de peso en nuestra página es muy simple: usar imágenes de fondo y estilos css. En el bloque HTML (una celda o un párrafo o un elemento div) podemos colocar una imagen de fondo y el texto del bloque aparecerá sobre la imagen. En la página se verán botones gráficos con texto. ¿Y para qué el estilo css? para evitar que esa imagen de fondo aparezca repetida formando un mosaico se usan el atributo background-repeat y si además queremos situarla en el centro o a los lados usamos background-position.

Un caso práctico

Este ejmplo usa una celda de una tabla con una imagen que aparecerá centrada y sobre ella aparece el texto escrito, en este caso un enlace a una página.

<td width="10%" height="44" background="boton.gif" style="background-attachment: fixed;
background-repeat: no-repeat;background-position: center center;">
<a href="enlace.htm">texto del enlace</a></td>

Repitiendo esto en varias celdas de una columna (o de una fila) de la tabla tendremos una barra de navegación con botones pero usando sólo una imagen, que puede ser un típico botón en relieve o cualquier cosa que te parezca.