¿El navegador está guardando en caché las imágenes de fondo de CSS?

Question

Cuando tengo la misma imagen para diferentes elementos (imágenes de sprites), normalmente no vuelvo a llamar a esa imagen ya que es una nueva solicitud HTTP.

Yo prefiero usar:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background-image: inherit; 
} 

Es esto peticiones HTTP de ahorro?

O si el navegador es inteligente y que puede utilizar:

element1 { 
    background: url(someImage.png); 
} 

element2 { 
    background: url(someImage.png); 
} 

es el navegador va a hacer una nueva petición HTTP? ¿O sabe que ya tengo esta imagen en la memoria caché?

La pregunta es: ¿gano algo usando el ejemplo 1?

Answer 1

En el escenario que describa, el navegador básicamente hará referencia a la misma imagen varias veces en una página, y es casi seguro que se almacenará en caché.

En diferentes páginas, la respuesta depende del navegador, y en los encabezados de caducidad que envía el servidor afectará el comportamiento de caché en los agentes de conformidad.

Answer 2

Sí, los navegadores cargarán la segunda referencia a la misma imagen en el archivo CSS de la memoria caché. Usando Firebug podrás ver todas las solicitudes HTTP hechas por el navegador.

Answer 3

Si desea simplificar las cosas y almacenar recursos en caché y ahorrar ancho de banda, debe crear un archivo appcache.appcache en la raíz de su sitio web. This link ofrece un tutorial sobre cómo hacer una aplicación. Guarda las solicitudes http si el usuario visita su sitio más de una vez y guarda solicitando la misma imagen dos veces si ya existe en la caché.

¡Feliz caché!