CSS Sprites rendering del browser

Question

Sappiamo tutti che le immagini sprite CSS sono grandiose per ridurre la quantità di richieste e simili, ma per quanto riguarda le prestazioni del browser che rende la pagina con diversi elementi utilizzando una grande immagine come sfondo?

Answer 1

su macchine più lente dotate di browser più vecchi (come IE6/IE7) è possibile notare un calo significativo delle prestazioni quando si utilizzano immagini molto grandi più volte su una pagina. È ancora più grave quando si utilizzano gli sprite per: stati di hover.

Devi moderare la tua tentazione di spingere tutti gli sprite su un'unica immagine: pensa a quali elementi fanno parte dell'interfaccia utente web/webapp e li metti in un unico file di sprite (quelli verranno visualizzati in ogni momento, mentre navighi). Quindi prova a raggruppare il resto degli sprite nelle immagini specifiche della sezione del sito Web e utilizzali secondo necessità. Il lato negativo è un tempo di caricamento leggermente esteso (richieste HTTP aggiuntive), ma l'esperienza utente durante la visualizzazione/lo scorrimento della pagina sarà molto più alta.

Answer 2

Come possiamo giudicare dalla nostra esperienza su YouTube, non ci sono grossi problemi.

Si spera che il browser memorizzi un'immagine nella memoria e quindi la utilizzi per rendere l'output ovunque sia necessaria questa immagine.

Answer 3

È necessario bilanciare le cose. Se stai parlando di un'immagine che includerà 1000 folletti, il CSS sarà enorme. Inoltre c'è una possibilità molto sottile che tu possa usare tutti quegli sprite nella stessa pagina comunque.

Answer 4

È possibile salvare una quantità significativa di richieste HTTP consolidando le immagini in uno o più sprite compositi e utilizzando i CSS per visualizzare in modo selettivo parti dello sprite all'interno della pagina Web. Ora che i principali browser si sono evoluti abbastanza da supportare gli sfondi CSS e il posizionamento, altri siti stanno adottando questa tecnica di performance. In effetti, alcuni dei siti più attivi sul Web utilizzano gli sprite CSS per salvare le richieste HTTP.

Con milioni di utenti, Yahoo! e AOL fa tutto il possibile per migliorare l'esperienza dell'utente. Sia AOL.com che Yahoo.com usano gli sprite CSS per salvare numerose richieste HTTP per le loro interfacce complesse. Entrambi i siti usano gli sprite CSS per visualizzare in modo selettivo le icone all'interno delle loro directory di servizi e Yahoo! usa gli sprite anche altrove.

Un altro vantaggio degli sprite CSS è che l'immagine combinata è spesso più piccola nelle dimensioni del file rispetto alle singole immagini, nonostante l'aggiunta di spazi bianchi tra le immagini. La dimensione ridotta degli sprites è dovuta al ridotto overhead di più tabelle di colori e informazioni di formattazione richieste da immagini separate. Per massimizzare l'accessibilità e l'usabilità, gli sprite CSS sono utilizzati al meglio per icone o effetti decorativi.