Sprite

Sabemos que las imágenes tienen mucho que ver a la hora de juzgar la presentación de un blog, pero... muchas imágenes pueden retrasarnos demasiado la carga del blog. Sobre todo, cuando usamos una imagen básica y otra idéntica, salvo por el color, por ejemplo, para producirle un efecto "hover".
Pues la mejor forma de ahorrarle espacio a nuestro blog es el "Sprite": la imagen de base y su "hover", juntas en la misma URL:
Home.
¿Cómo se hace?: pues es muy fácil si contáis con Photoshop o con Gimp. en la misma ventana creais dos imágenes, la básica y su hover (p.e., una en rojo y la misma, pero cambiándole el color). Una vez creadas las guardais y acudís a vuestro blog para hacer posible que se visualicen tal y como deseamos (una imagen y, al pasar el ratón por encima, su "hover"):

Aquí tenéis el ejemplo que nos propone CssGirl

.- CSS: Para el caso de que queramos el Sprite sólo en un determinado elemento de nuestro blog. En este caso el inicio "Home".

a.home {
background:url(tabs.gif) no-repeat;
float:left;
text-indent:-9999px;
height:50px;
width:100px;
}

a.home:hover {
background-position: -100px 0;
}

.- HTML: Para este ejemplo, algo así

<a href="http://...blogspot.com/" class="home" title="Home">Home</a>

Muy, pero que muy útil: podéis usarlo en los hover de menú, sidebares... en cualquier parte del blog, con el consiguiente ahorro en peso.