Best practice per immagine sprite CSS

Question

Mi sono guardato intorno per trovare alcune best practice e suggerimenti per la creazione di sprite di immagini css. Le domande: prendere in considerazione un sito con un sacco di immagini:

1. Dovrei gruppo e mettere le immagini con approssimativamente delle stesse dimensioni in una png?
2. Qual è la dimensione accettabile dell'immagine sprite? Si consiglia di creare diverse immagini sprite, invece di un file enorme ?!
3. C'è qualche raccomandazione per il numero di immagini in una immagine sprite?!
4. Fa alcuna differenza su come posizionare e allineare le immagini nell'immagine dello sprite? Ho appena trovato un accenno al http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 che menzionava (tenere immagini Organizzato, sarà più gestibile), ma è l'unica ragione

Se aiuta: io uso la bussola di utilità sprite, e convertire automaticamente una cartella di immagini a un file png e crea un file css per esso. Le immagini allineate sotto l'altro automaticamente

Answer 1

della questione sub 1:

Dalla mia esperienza di lavoro su un grande sito web gestore di telefonia mobile, è certamente una buona idea per immagini di gruppo insieme, ma probabilmente meglio raggruppati logicamente, da a quale componente o sezione del progetto appartengono, piuttosto che alle dimensioni. Quindi raggrupperei gli sprite che creano un bordo (lati, angoli arrotondati, ecc.) O immagini di sfondo.

Ne renderà più facili da trovare e da mantenere durante lo sviluppo.

D'altra parte, se stai facendo un gioco e hai già creato tutte le tue immagini (ad esempio 64 immagini di personaggi animati), puoi anche metterle tutte in un unico file.

Spero che questo aiuti.

Michael

Answer 2

Cosa sono gli sprite CSS?

CSS Sprites è un metodo per combinare più immagini utilizzate nel sito Web in un'unica grande immagine. È quindi possibile utilizzare l'attributo CSS corretto per la posizione di sfondo per caricare l'immagine specifica desiderata dal CSS Sprite utilizzando le coordinate X e Y. CSS Sprites e prestazioni del sito web

Un sacco di persone sono sotto l'ipotesi che sarebbe più veloce ridurre le dimensioni dei file di immagine e caricare ogni immagine individualmente. Questo non è vero, anzi, è proprio l'opposto. La ragione di ciò è dovuta al fatto che ogni volta che si effettua una richiesta HTTP (sia nel codice HTML o nel codice CSS) si crea essenzialmente un'altra connessione che deve verificarsi per caricare completamente una determinata pagina. Quindi, ad esempio, se si dispone di una pagina con 16 immagini di sfondo (come indicato nel file CSS del proprio sito Web), ciò significa che per caricare quella pagina è necessario effettuare 16 richieste HTTP individuali per ciascuna di tali immagini. Per non parlare di ulteriori richieste HTTP che dovranno essere fatte per fogli di stile, JavaScript, ecc.

Combinando tutte le 16 di queste immagini di sfondo in un unico grande CSS Sprite, il sito Web deve effettuare solo una connessione HTTP invece di 16 connessioni individuali. Ciò significa anche che ogni volta che un'immagine deve essere caricata al volo (ad es.un'immagine di rollover) quell'immagine sarà già caricata senza alcun ritardo grazie al fatto che è già stata caricata come parte del tuo singolo file CSS Sprite.

Quindi, non solo aumenti drasticamente le prestazioni riducendo la quantità di connessioni ma puoi anche sfruttare gli sprite CSS utilizzando il precaricamento delle immagini CSS. Come creare un CSS Sprite

Quando si tratta di creare CSS Sprites hai due opzioni. Se sei abbastanza abile con un programma di fotoritocco come Adobe Fireworks o Adobe Photoshop, non avrai problemi a creare un CSS Sprite. Per le persone che non hanno esperienza con questo tipo di programmi, consigliamo di utilizzare SpriteMe. SpriteMe è un bookmarklet. Dopo averlo aggiunto alla barra dei preferiti, vai semplicemente su qualsiasi sito web e fai clic sul bookmarklet SpriteMe. SpriteMe aprirà quindi una sovrapposizione sul lato destro dello schermo con tutto ciò di cui hai bisogno. Scoprirai anche che c'è una demo sul sito SpriteMe che assisterà molto chiunque non sia così competente.

Ecco un esempio di ciò che un CSS Sprite sarebbe simile (questo è stato creato in Adobe Fireworks):

CSS Sprite Esempio

È possibile che questo

è un esempio di ciò che un CSS Sprite potrebbe essere simile . Tieni presente che ci sono molti modi per farlo. Ad alcune persone piace lasciare 1 pixel di spazio tra ogni immagine solo per fornire un po 'di spazio. Ad altre persone piace lasciare una notevole quantità di spazio tra le immagini. Troverai anche persone a cui piace impilare le cose una accanto all'altra in file per massimizzare l'uso dello spazio. La linea di fondo è che non c'è davvero un modo sbagliato di farlo. Quindi, con ciò detto considerare l'esempio sopra solo questo, un esempio.

Attuazione del codice CSS

Ora che hai finito di fare il tuo Sprite CSS è il momento di scendere al Nitty Gritty e inserire il codice CSS in atto in modo che si possa effettivamente fare uso del nostro CSS Sprite. Per il nostro esempio utilizzeremo il CSS Sprite in alto e ti mostreremo come abbiamo fatto a farlo funzionare con il pulsante "Invia commento" sul nostro modulo di commento in fondo a questo post.

#commentform input[type=submit] { 
width: 122px; 
height: 26px; 
border: 0px; 
background-color: #FFFFFF; 
background-color: #FFFFFF; 
background: url(/images/btn-sprite.png) no-repeat 0px 201px; 
} 

#commentform input[type=submit]:hover { 
cursor: pointer; 
background-position: 0px 175px; 
    } 

In sostanza il trucco qui utilizzando i Sprites CSS nel codice è che si sta riferimento gli assi X e Y dal CSS Sprite. In questo caso il codice CSS usa l'attributo background, fa riferimento all'URL dell'immagine e infine indirizza l'asse X e Y che capita di essere 0px per entrambi.

La versione al passaggio del mouse del pulsante non deve fare riferimento all'URL dell'immagine di sfondo poiché è già stata citata in precedenza. Invece è sufficiente modificare l'asse Y in 175px per riflettere il fatto che lo stato di passaggio del mouse è sopra lo stato non-hover del pulsante.

Mi rendo conto che inizialmente questo potrebbe risultare confuso ma vi prometto che una volta che ci giocherete vedrete che in realtà è molto semplice. Se tutte le immagini CSS Sprite sono allineate a sinistra, l'asse Y rimane sempre a 0 pixel. Questo è uno dei motivi per cui preferiamo impilare le nostre immagini tutte allineate a sinistra poiché ci vuole un sacco di congetture per risolverle. Dato che il tuo asse Y sarebbe sempre lo stesso in questo caso, l'unica cosa che cambierebbe è il tuo asse X. Pertanto, se il pulsante non al passaggio del mouse si trova a 0 pixel sull'asse Y e 201 pixel sull'asse X, il pulsante al passaggio del mouse sopra di esso sarà a 0 pixel sull'asse Y e 175 pixel sull'asse X.

Answer 3

Devo raggruppare e inserire immagini con le stesse dimensioni in una sola volta?

Mentre Michael ha un buon punto nel raggruppare le immagini in base all'utilizzo, si può anche tenere a mente che gli sprites ottimali hanno il minimo spazio possibile. Salvare le richieste di file è fantastico, ma non vuoi caricare un mucchio di pixel inutilizzati.

Qual è la dimensione accettabile dell'immagine sprite? Si consiglia di creare diverse immagini sprite, invece di un file enorme ?!

Immagina un sito Web con un'enuante raccolta di icone, pulsanti e altri elementi grafici. Ora immagine hai messo tutti quegli elementi in uno sprite, perché, sai, bassa quantità di richieste e tutto. Lo sprite è grande 5 MB.

Un visitatore entra nella pagina e il caricamento ha inizio. Viene visualizzato il testo, ma stai ancora aspettando il download di Megasprite. A seconda della dimensione del file e della connessione Internet, un visitatore deve attendere un tempo potenzialmente lungo prima che gli elementi cruciali (di navigazione) del sito siano utilizzabili.

Per un sito semplice, un singolo sprite lo farà, ma quando le cose diventano più elaborate, potrebbe essere utile usare un paio di sprite. Inoltre, mettere tutte le immagini in uno sprite è un dolore per il grande gluteo quando si tratta di manutenzione (anche se l'automazione aiuta molto). Tutto sommato, gli spiriti enormi sono cattivi folletti.

Fa alcuna differenza su come posizionare e allineare le immagini nell'immagine dello sprite?

Non proprio. Ci sono alcune cose che dovresti tenere a mente però. Prima di tutto, vuoi che lo sprite sia il più compatto possibile; lo spazio meno inutilizzato, meglio è. Tuttavia, ciò potrebbe costringerti a fare un ridicolo posizionamento meticoloso nei CSS. Se sei disposto a impostare manualmente la posizione di fondo per ogni elemento, questo non è un problema, ma nessuno ti biasimerà per aver barato un po 'e usando le posizioni con cui è più facile lavorare.

Una cosa più

Hai pensato di usare sprite SVG? Di dimensioni ridotte, perfettamente liscia e nitida ad ogni risoluzione. Trucchi CSS ha eccellenti articoli su di esso here e here