Fácil, el servidor, en lugar de tener que cargar 2 imágenes, sólo tiene que cargar una. Esto, a menos que hagas una precarga de imágenes en javascript, hará que en el momento de poner el ratón sobre la imagen, tarde en cargar la siguiente.
Con el método que te digo optimizas y logras sin javascript el efecto deseado y de manera más eficiente.
Sólo tienes que coger las 2 imágenes y juntarlas en un mismo archivo (una a la derecha y otra a la izquierda, por ejemplo). Ahora divide el ancho de la imagen en 2 (una imagen de 100px / 2 = 50px). Ya tienes una imagen pegada a la otra, el código sería el siguiente:
Código CSS:
Ver originala
{
display: block;
width: 50px; /* la mitad del ancho total de la imagen */
height: 100px; /* el alto total de la imagen */
background: url(imagen.gif) no-repeat scroll left top; /* left es igual a cero */
}
a:hover
{
background: url(imagen.gif) no-repeat scroll 50px top; /* mostrará a partir de ese punto de la imagen */
}
Prueba y nos cuentas.
Un saludo.