Share
Usare gli sprite CSS, invece di una raccolta di immagini individuali più piccole, migliorerà le prestazioni delle tue pagine web e manterrà le cose più organizzate. Diamo un'occhiata ad alcune best practice e alcuni strumenti utili per il tuo flusso di lavoro che crea sprite.
Il nome folletto potrebbe ricordarti degli sprite di gioco; questi ultimi i giochi per console e persino i giochi basati su browser:
e in termini CSS il ruolo degli sprite è più o meno lo stesso. Uno sprite è un file di grandi dimensioni contenente più immagini per il tuo sito web, risparmiando tempo di caricamento e spazio web.
Il punto essenziale dell'utilizzo dei fogli di sprite CSS è che il server deve solo inviare un file immagine contenente tutte le tue immagini, non una serie di quelle individuali - e tramite CSS puoi mostrare qualsiasi piccolo segmento da quel file come sfondo a un elemento.
Alcuni vorranno che l'uso di singole immagini possa "ingannare" l'occhio nel pensare che la pagina si carichi più velocemente; le immagini che compaiono durante il caricamento potrebbero sembrare un buon progresso. Questo è un falso vantaggio, tuttavia, una pagina di caricamento veramente più veloce è sempre preferibile.
L'altro svantaggio di questo metodo è che ogni singola immagine è, come abbiamo detto, un file immagine separato. Pertanto ogni immagine che il server deve ottenere conta come una richiesta HTTP separata. È importante mantenere il numero di richieste HTTP sul tuo sito il più basso possibile, in quanto i browser possono solo effettuare un numero limitato di richieste a qualsiasi server contemporaneamente.
La combinazione delle immagini in un singolo file non solo riduce significativamente il numero di richieste HTTP, ma ridurrà anche la dimensione totale del file delle immagini.
Ci sono due approcci comuni quando crei i tuoi fogli sprite, facendoli prima o dopo aver costruito il tuo sito.
Puoi mettere tutte le tue immagini in un foglio sprite da zero verso l'alto mentre crei il tuo sito. Aggiornerai il tuo CSS per soddisfare, mentre vai avanti. Questo è ciò a cui ci riferiremo come il prima metodo.
In alternativa, puoi creare tutte le tue immagini come file separati, il che rende la loro modifica molto più semplice. Una volta che il tuo sito è stato creato e tutte le immagini sono state preparate, puoi compilare in modo rapido e semplice manualmente o utilizzare uno dei numerosi strumenti per fare tutto il lavoro per te (su cui approfondirò più avanti). Questo, ci riferiremo come il dopo approccio.
Se sei completamente nuovo ai fogli di sprite o nuovo al web design, il metodo "dopo" è sicuramente l'opzione consigliata.
Se sei completamente nuovo ai fogli di sprite o nuovo al web design, il metodo after è sicuramente l'opzione consigliata. È possibile mantenere separatamente PSD o file per ogni singola immagine, apportare eventuali modifiche, quindi eseguire l'applicazione desiderata. Inoltre, se non sei sicuro su come scrivere tutti i CSS per le tue immagini, allora la maggior parte degli sprite che generano applicazioni produrranno anche il CSS di accompagnamento.
Molte di queste applicazioni sono completamente gratuite, un altro bonus!
Diamo un'occhiata ad alcuni suggerimenti e strumenti per aiutarti con i fogli sprite. Spetterà quindi a te scegliere l'approccio che ritieni più adatto.
Nota: la maggior parte dei seguenti suggerimenti presuppone che farai i tuoi sprite in anticipo.
Quando disponi le tue immagini in Photoshop (o qualsiasi altra cosa tu usi per impaginare il tuo foglio sprite) è una buona idea cercare di organizzare le cose nel modo più chiaro e semplice possibile. Cerca di arrotondare sempre al 10 pixel più vicino, o lavorare con una certa quantità di spazio per ogni immagine se sono tutte di dimensioni simili. Quando si tratta di scrivere tutto il CSS allegato, non è necessario continuare a misurare le coordinate e sarà meno probabile che si dimentichino i numeri coinvolti.
Usare figure "più semplici" significa anche che in Photoshop sarà molto più facile usare le griglie "snap-to" o disegnare linee di griglia per mantenere le cose organizzate e semplici da capire.
Se metti tutte le tue immagini nel foglio sprite, impieghi anni a scrivere tutti i CSS e poi decidi che una delle immagini deve essere modificata, potrebbe causare seri problemi. Se il ridimensionamento dell'immagine deve essere modificato, potrebbe essere necessario modificare e riallineare il layout del foglio dello sprite, il che significa che dovrai passare assolutamente delle età a modificare tutti i tuoi CSS di accompagnamento.
Questo è un altro motivo per cui potresti essere più interessato a iniziare con le singole immagini e poi usare un'applicazione per fare tutto il duro lavoro per te. Dopodiché, se hai bisogno di fare un po 'di editing, riesegui l'applicazione e tutto sarà fatto. Cosa si può volere di più?
Se usi Photoshop o altri editor di immagini simili, è una buona idea mantenere i livelli di ogni sprite ben etichettati e raggruppati, quindi tutto è perfettamente chiaro se tu (o chiunque altro) hai bisogno di capirlo più tardi.
Le tue etichette dovrebbero essere chiare e concise, facili da capire per chiunque e per tutti.
Questa dovrebbe essere una pratica abbastanza comune per la maggior parte dei progettisti, ma non rimandare l'etichettatura - fallo appena crei lo sprite. Immagina solo quanto tempo potresti risparmiare con l'etichettatura se avessi un enorme foglio di sprite e non riuscissi a trovare i livelli appropriati - potrebbe finire per diventare estremamente frustrante.
Allo stesso modo, l'etichettatura è vitale per il CSS dello sprite. Le etichette sono sicuramente necessarie per confermare quale sprite viene selezionato dal codice - e tutti i principi di cui sopra si applicano ancora. Se stai progettando un modello per la vendita su siti come Themeforest, allora qualsiasi CSS (figuriamoci Sprite Sheet CSS) dovrebbe essere chiaramente etichettato, visto che i potenziali utenti potrebbero non avere una comprensione così ampia del CSS come fai tu.
C'è una vasta gamma di strumenti per rendere la tua generazione di fogli sprite il più semplice possibile. Quando crei e progetti con una serie di singole immagini, compila tutte in un foglio sprite alla fine - il metodo 'dopo'.
Ecco alcuni dei migliori generatori di fogli sprite:
SpriteMe è un bookmarklet gratuito disponibile su www.spriteme.org. È sorprendentemente semplice da usare e ha poca influenza sul metodo di progettazione a cui sei abituato. Si aprirà una sovrapposizione sul lato dello schermo in cui è possibile scaricare immagini o fogli sprite dal sito Web in cui lo si sta utilizzando, o ancora più importante generare fogli sprite e CSS di accompagnamento per voi.
Le immagini di sfondo rendono le pagine più belle, ma le rendono anche più lente. Ogni immagine di sfondo è una richiesta HTTP aggiuntiva. C'è una soluzione: combinare le immagini di sfondo in uno sprite CSS. Ma creare gli sprites è difficile, richiede conoscenze arcane e molti tentativi ed errori. SpriteMe rimuove i problemi con il clic di un pulsante. - www.spriteme.org
Come ho detto prima, se sei abituato a lavorare con i singoli metodi di immagine, preferisci questo metodo, o non puoi essere disturbato dal duro lavoro associato ai fogli sprite, SpriteMe è la risposta.
Sebbene il sito Webdesigntuts + disponga già di fogli sprite, SpriteMe potrebbe ancora migliorare le cose combinandole! Puoi vedere come viene esportato il CSS, con l'allineamento già fatto. Tutto quello che devi fare è copiare, incollare e modificare gli URL!
È semplice come creare il tuo disegno con le singole immagini, quindi eseguire SpriteMe. Cattura tutte le immagini di sfondo dai tuoi siti, li raggruppa in sprite e genera il foglio sprite da scaricare. Successivamente "inserisce lo sprite nella pagina corrente" e "ricalcola la posizione di sfondo CSS" per te. Se vuoi una guida migliore per usare SpriteMe, trovala su www.spriteme.org.
Controlla la tabella dei risparmi di SpriteMe per vedere chiaramente come i fogli di Sprite hanno salvato molti siti web in un sacco di spazio e tempi di caricamento della pagina (nella maggior parte dei casi ...)
Spero di averti persuaso che i fogli di Sprite siano la soluzione giusta: risparmiare spazio, ridurre le richieste HTTP e portare a un sito Web più veloce e più organizzato.
Per quanto riguarda i metodi per generarli, raccomanderei senz'altro il metodo "dopo", e mi baso su uno degli strumenti che abbiamo discusso per fare tutto il duro lavoro.
Accentsconagua