Quando uno Sprite CSS è troppo grande?

Question

Lo scopo principale degli sprite è ridurre le richieste HTTP fatte al server per elementi grafici su una pagina? O vuoi provare a inserire quanti più elementi possibili nello sprite.

Immagino che cosa sto chiedendo: quando lo sprite è troppo grande?

Answer 1

È troppo grande quando l'utente deve attendere il download del file prima che la pagina possa essere utilizzata.

Answer 2

È possibile imballare tutti i piccoli elementi di progettazione statici in un'unica immagine principale senza grossi problemi.

Naturalmente, se si dispone di foto da 10 megapixel sul proprio sito Web, imballarle insieme sarebbe una follia.

Answer 3

Sì, lo scopo principale è ridurre le richieste (e quindi il tempo di caricamento). Un altro vantaggio è che devi solo preoccuparti che un'immagine venga memorizzata correttamente nella cache. Suggerimento: usa le immagini PNG poiché la loro compressione gestisce meglio le aree bianche ("vuote") di grandi dimensioni.

Answer 4

Lo scopo principale degli sprite è ridurre le richieste HTTP fatte al server per elementi grafici su una pagina?

Sì, si desidera evitare di avere molte richieste per le immagini di piccole dimensioni. Combinandoli in uno sprite consente di recuperarli in un'unica richiesta http.

quando lo sprite è troppo grande?

È davvero il totale di tutte le richieste che si desidera esaminare. L'unico modo per lo sprite di essere troppo grande è se la somma delle sue parti (che è esattamente ciò che lo sprite è) è troppo grande per cominciare.

Answer 5

Uno sprite CSS è troppo grande quando si include qualcosa tranne gli elementi essenziali dell'interfaccia utente. Queste sono piccole immagini supplementari come icone e loghi in cui la compressione non danneggia troppo la qualità. Dal momento che tutte quelle immagini sarebbero state altrimenti caricate indipendentemente, non sei peggio di chiederle individualmente. Se impiega troppo tempo a caricarsi, il problema non dipende dagli sprite, ma dalla compressione delle immagini.

Answer 6

Google maps utilizza immagini [256x256] px.

Answer 7

Per quanto riguarda gli sprite, si dovrebbe verificare la discussione sulla utilizzo della memoria sotto questo post del blog anche: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

Il mio consiglio:

• Solo sprite icona righe, bottoni e immagini ripetute (ad esempio una rotonda casella di sfumatura d'angolo).
• Lascia tutto il resto da solo
• Mantieni le tue immagini sotto 500x500 o 100kb e lascia il minimo spazio inutilizzato possibile. Utilizzare .png o .gif a seconda della situazione

Answer 8

Se si utilizza PNG per il tipo di immagine sprite, è utile ricordare che ogni riga è generalmente compressa (sgonfiata) indipendentemente dalle altre righe.

Quindi, per aiutare con il bilanciamento del numero di sprite/dimensione dell'immagine, provare ad adattare sprite simili l'uno accanto all'altro orizzontalmente piuttosto che verticalmente per sfruttare la compressione.

PNG supporta anche "predittori" che memorizzano solo i delta tra un valore previsto (basato su righe precedenti e pixel precedenti nella stessa riga) e il valore effettivo.

Trova un buon editor di immagini che ti permetta di impostare diverse impostazioni di compressione del predittore PNG (o ottimizza automaticamente) per trovare l'impostazione migliore per la tua immagine.