Il browser memorizza nella cache le immagini di sfondo CSS?

Question

Quando ho la stessa immagine utilizzata per elementi diversi (immagini sprite) di solito non richiamo quell'immagine perché questa è una nuova richiesta HTTP.

Io invece uso:

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

element2 { 
    background-image: inherit; 
} 

Questo è l'richieste HTTP risparmio?

Oppure, se il browser è intelligente e posso usare:

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

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

è il browser sta per fare una nuova richiesta HTTP? O sa che ho già questa immagine memorizzata nella cache?

La domanda è: ottengo qualcosa utilizzando l'esempio 1?

Answer 1

Nello scenario che descrivi, il browser farà essenzialmente riferimento alla stessa immagine più volte su una pagina e questo sarà quasi sicuramente memorizzato nella cache.

In diverse pagine, la risposta dipende dal browser e nelle intestazioni di scadenza le mandate del server influiscono sul comportamento di memorizzazione nella cache in agenti conformi.

Answer 2

Sì, i browser caricheranno il secondo riferimento alla stessa immagine nel file CSS dalla cache. Usando Firebug sarai in grado di vedere tutte le richieste HTTP fatte dal browser.

Answer 3

Se volete semplificare le cose e le risorse di cache e risparmiare larghezza di banda, allora si dovrebbe fare un file appcache.appcache nella root del tuo sito web. This link fornisce un tutorial su come creare un appcache. Salva le richieste http se l'utente visita il tuo sito più di una volta e salva su richiesta due volte la stessa immagine se già esiste nella cache.

Happy Caching!