Cambiar de imagen al pasar el mouse

[Jamati]

Hola foristas, tengo la siguiente duda:

Si yo tengo un botón por ejemplo con fondo ROJO, y al pasar el mouse se cambia de color y se pone VERDE, yo hasta ahora tengo dos formas de hacerlo:

1) usando dos gif del boton (uno estando rojo y el otro verde) y con javascript hacer el cambio de imagen. Esto lleva al navegador y la conexion tener que cargar en cache otra imagen.

2) otro metodo que aprendí leyendo este foro, es hacer una sola imagen del boton pero el doble de largo, donde por ejemplo del lado izquierdo este rojo, y del lado derecho verde, y en el CSS lo unico que hago es decirle que la posicion del background se corra XX cantidad de pixeles para que aparezca el verde. Esto supongo que es mejor porque no tiene que cargar dos imagenes, sino simplemente una sula.

Ahora mi pregunta es??... que conviene ??... porque igualmente estuve chequeando esta segunda opción, y es notable que el navegador no lo hace instantaneo, sino que parece que carga otra imágen porqeu está unas milesimas de segundo sin mostrar nada.

Alguien conoce otra mejor forma ??