Rendering del browser CSS Sprites

Question

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

Answer 1

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

Devi moderare la tua tentazione di spingere tutti i tuoi sprite in un'unica grande immagine - pensa a quali elementi fanno parte dell'interfaccia del sito web / webapp e mettili in un unico file sprite (questi verranno visualizzati continuamente, durante la navigazione) . Quindi prova a raggruppare il resto degli sprite in immagini specifiche della sezione del sito Web e utilizzali secondo necessità. Il rovescio della medaglia è un tempo di caricamento leggermente esteso (richieste HTTP aggiuntive), ma l'esperienza dell'utente durante la visualizzazione / scorrimento della pagina sarà molto più elevata.

Answer 2

Devi bilanciare le cose. Se stai parlando di un'immagine che includerà diciamo 1000 sprite, allora il CSS sarà enorme. Inoltre, c'è una possibilità molto ridotta che utilizzerai comunque tutti quegli sprite nella stessa pagina.

Answer 3

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

Si spera che il browser memorizzi nella cache un'immagine in memoria e quindi la usi per eseguire il rendering dell'output ovunque sia necessaria l'immagine.

Answer 4

Puoi salvare una quantità significativa di richieste HTTP consolidando le tue immagini in uno o più sprite compositi e usando CSS per visualizzare selettivamente parti dello sprite all'interno della tua pagina web. Ora che i principali browser si sono evoluti abbastanza da supportare gli sfondi CSS e il posizionamento, più 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 fanno tutto il possibile per migliorare l'esperienza dell'utente. Sia AOL.com che Yahoo.com utilizzano gli sprite CSS per salvare numerose richieste HTTP per le loro interfacce complesse. Entrambi i siti utilizzano gli sprite CSS per visualizzare selettivamente le icone all'interno delle loro directory dei servizi e Yahoo! usa sprite anche altrove.

Un altro vantaggio degli sprite CSS è che l'immagine combinata è spesso di dimensioni inferiori rispetto alle singole immagini, nonostante l'aggiunta di spazi bianchi tra le immagini. Le dimensioni ridotte degli sprite sono dovute al sovraccarico ridotto di più tabelle di colori e alle 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.