Un tool per generare CSS sprites
Lunedì 2 Luglio 2007 - 07:42
di Cesare Lamanna
L’uso dei cosiddetti CSS sprites è stato reso popolare da questo articolo di Dave Shea su A List Apart
Si tratta, tra l’altro, di una tecnica spesso consigliata per ridurre i tempi di caricamento di una pagina, dal momento che, dovendo caricare una sola immagine invece che due o più (per esempio per un rollover), si riduce il numero di richieste HTTP al server.
Dal punto di vista dei CSS, tutto consiste nell’usare la proprietà background-position per visualizzare l’area dell’immagine che ci interessa. Alessandro Fulciniti l’ha usata in tanti suoi articoli e proprio a partire da uno degli ultimi vorrei partire per presentare questo CSS sprites generator, un tool online per la generazione di sprites che, pur con qualche limite, potrà esservi utile nella preparazione di immagini di questo tipo da utilizzare nei vostri progetti.
È chiaro che tutto può essere realizzato con un programma di grafica, ma spesso questi tool semplificano il lavoro, offrendo spesso qualche utile ausilio. Nel caso specifico, mi riferisco al calcolo automatico delle coordinate da usare nel CSS per impostare la posizione dell’immagine.
Nel secondo esempio dell’articolo Bottoni con rollover, viene usata questa immagine (uno sprite appunto) per definire l’aspetto del pulsante negli stati normale e :hover:
Il codice CSS per realizzare l’effetto rollover è questo:
a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px “Trebuchet MS”,Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(bottone2.png) no-repeat 0 0}
a.button:hover{background-position:0 -35px;color: #98286C}
Quello che ho fatto per provare il tool è semplice. Sono partito da due immagini separate, questa
e questa
Le ho uploadate come indicato sulla pagina:
Ho quindi cliccato sul pulsante ‘Generate’, ottenendo questo risultato:
Oltre al link che punta all’immagine (per poterla salvare), è importante annotare i dati relativi alla posizione nei CSS. Ho infatti semplicemente modificato il codice visto qui sopra con i dati forniti dal tool per ottenere questa versione dell’esempio. Ecco il codice CSS:
a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px “Trebuchet MS”,Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(butt.png) no-repeat -18px -18px}
a.button:hover{background-position:-18px -88px;color: #98286C}
L’autore, nel presentare il generatore, offre anche il codice PHP e Javascript utilizzato. È tutto in questo post.
È possibile approfondire css sprite e image replacement su Css.HTML.it
sponsor
Commenti
1
dovendo caricare una sola immagine invece che due o più (per esempio per un rollover), si riduce il numero di richieste HTTP al server.
Mi spiegate per favore questo concetto? Una volta si usava spezzare le grosse immagini che componevano un’interfaccia o una mappa cliccabile, in modo da caricare in parallelo tante piccole immagini invece che una sola grande.
Adesso sembra che lo scopo sia esattamente l’opposto.
Come mai? Cosa mi perdo nel ragionamento?
# - postato da Luca - 02 Luglio 2007 - 10:55
2
@Luca: probabilmente la risposta va trovata nell’aumento della connettività e della banda disponibile agli utenti comuni.
Quando la media degli utenti aveva un 56k ed al massimo un’ISDN, era meglio avere tante immagini piccole, mentre adesso che la banda c’è ed abbonda, nessuno più si preoccupa di risparmiare sulle connessioni e sulle dimensioni delle richieste effettuate.Si potrebbe anche notare che ottimizzare le connessioni rimane sempre una valida tecnica, il problema è che con l’aumentare delle risorse la programmazione (a volte) peggiora. :)
3
@Luca: A mio parere, questa “inversione di tendenza” è legata al nuovo modo di intendere i siti web.
Il fatto di spezzare grosse immagini componenti un’interfaccia era una pratica in uso quando la facevano da padrone layout basati su tabelle, quando la tendenza era quella di fare dei “siti
locandina” che andassero a ricalcare in qualche modo l’impostazione grafica tipica dei prodotti da carta stampata.Oggi invece si è entrati o si sta entrando in un’altra fase, si fa più attenzione ad altri aspetti nello sviluppare un sito e le interfacce dei siti nella testa dei web designer nascono, o dovrebbero nascere, già “spezzettate”, opportunamente modularizzate per adattarsi alla struttura semantica della pagina.
Queste immagini non sono più - o non dovrebbero essere - necessarie alla corretta fruizione dei contenuti di un sito, ma diventano solo un “condimento”, certamente importante ma non necessario; quindi ad esempio mentre queste immagini si caricano, i contenuti e la navigazione dovrebbero essere comunque disponibili anche all’utente con connessione lente, che nel frattempo può leggere e navigare il sito.
Chi invece ha connessioni a banda larga beneficia di queste tecniche poichè, nonostante l’aumento della banda, rimane il “collo di bottiglia” dei tempi di risposta del server ad una richiesta; quindi meglio eliminare tutte le richieste superfule e “impacchettare” più contenuti logici in richieste uniche.# - postato da Daniele - 02 Luglio 2007 - 12:06
4
L’aumento della banda in connessione permette lo scaricamento delle immagini più velocemente, per cui, lo stesso (o meglio quasi lio stesso) peso e tempo di tante piccole immagini in successione vengono indirizzati su un immagine unica, la quale permette di evitare il ben più fastidioso effetto di ritardo nell’apparizione dell’immagine di rollover dovuta al suo caricamento solo nel momento in cui il mouse si sposta sul pulsante. In questo modo lo stao normale (:link) e sopra (:hover) sono già entrambi in pagina e senza alcun ritardo quando mi sposto su col mouse.
A questa pagina trovi dei pulsanti che fanno tutti uso di questa tecnica anche la dove non necessaria solo perchè volevo la sfumatura glossy sul bordo esterno. ;)
5
mi sfuggiva il nome “sprites”…
cmq lo uso parecchio, su ie6 la velocità dei rollover aumenta drasticamente…
# - postato da cescopag - 02 Luglio 2007 - 13:24
6
Tecnica essenziale quanto poco utilizzata, ho visto numerosi siti, anche famosi, che per il rollover usano immagini separate. L’effetto è improponibile, praticamente al primo rollover non viene visualizzato niente.
Consiglio anche io a tutti coloro che non conoscono la tecnica di iniziare ad utilizzarla ;)
7
@Luca: questa tecnica è valida (esclusivamente?) per il rollover; evita il ricorso al preload di immagini in javascript, come fin’ora si è fatto per sopperire ai ritardi di cui ha parlato Tom.
A chi parla di “aumento della banda disponibile” chiederei se conosce qualcuno che è costretto a viaggiare ancora a 56K. Io sì! E non parlo di paeselli sperduti: basta allontanarsi di qualche chilometro dal centro cittadino!
# - postato da Pierluigi - 02 Luglio 2007 - 15:37
8
- immagini - richieste HTTP = - tempo per caricare le pagine
9
#2
@Luca: probabilmente la risposta va trovata nell’aumento della connettività e della banda disponibile agli utenti comuni.e quindi possiamo sprecarla pure…tanto costa niente…
Quando la media degli utenti aveva un 56k ed al massimo un’ISDN, era meglio avere tante immagini piccole, mentre adesso che la banda c’è ed abbonda, nessuno più si preoccupa di risparmiare sulle connessioni e sulle dimensioni delle richieste effettuate.
non è colpa degli utenti che devono pensare a “risparmiare” la banda..ma nostra che ce ne fottiamo e dagli giu di immagini.
il problema è che con l’aumentare delle risorse la programmazione (a volte) peggiora.
questa non l’ho capita. cioe’ se io carico una grossa jpeg da 3 mega anziche tanti piccoli pezzettini da 10 k … ho fatto una mal programmazione?
io penso che, facendo 3 piccolissime gif a sfumatura verticale, e mettendole come sfondo ripetuto al link, e cambiarle su :hover, il tutto tramite css e con al max 3k di mini gif…c’e’ poco da programmare, si risparmia, e si ha piu o meno lo stesso effetto..no?
ma tanto che ci frega..c’abbiamo l’adsl…
ps: simpatico il tuo blog ;)
ciao :)
# - postato da yQy - 03 Luglio 2007 - 09:21
10
con la mia risposta iniziale sono stato molto vago ed ho parlato generalmente.
comincio col dire che l’articolo di cui sopra si riferisce a come risolvere il problema del rollover delle immagini utilizzando il css. il problema è che se hai 2 immagini separate e col css fai il rollover, alla prima volta non visualizzi nulla, solo dalla seconda vedrai il pulsante modificato.
se invece hai una sprite, non avraiquesto problema.per quanto riguarda la connettività invece, mi sembra chiaro che ad una connessione lenta convenga avere tanti piccoli oggetti da scaricare, vantaggio evidente è il miglioramento della sensazione, che si ha nel vedere la pagina caricare pian piano piuttosto che aspettare i tempi di caricamento di un solo oggetto molto grande.
io non sostengo che se hai tanta banda la puoi sprecare.. ho solo scritto che la media degli utenti ha adsl, ed il mio commento sulla mala programmazioni si riferisce a qualcosa di più generale e se vuoi posso risponderti in privato o su un altro post adeguato, o sul mio caro blog. :) ciao
11
chiedo scusa, non sono un grande esperto e di solito mi limito a leggere con grande attenzione le considerazioni espresse in questo ottimo blog.
Mentre leggevo i commenti a questo articolo ho avuto l’impressione che le critiche legate allo spreco di banda non fossero poi cosi rilevanti. Mi dicevo: “va bene … invece che due immagini da 1 kb fai caricare una sola immagine da 2 kb … non ci vedo tutto questo spreco di banda. Tanto per curiosità sono andato a misurare le dimensioni delle immagini in questione: bene, la prima - quella che comprende entrambi i pulsanti - pesa circa 1,42 kb, le due immagini separate pesano rispettivamente 1,02 e 1,04 il che significa che sommate pesano ben 2,06 kb!!
A parte l’irrilevanza dei pesi in questione pare evidente che le due immagini separate richiedono più banda per essere caricate …
Forse davvero non me ne intendo ma a questo punto ai miei occhi le opposizioni all’uso di questa tecnica sembrano ancor più evanescenti …
12
La tecnica è ottima, l’ho sperimentata recentemente e ho notato la differenza soprattutto con explorer 6 dato che usando due immagini differenti c’è un tempo di latenza tra lo stato normale e lo stato di rollover in cui il background scompare.
Cmq non credo ci siano bisogno di tools per fare questa cosa, almeno per me, mi trovo sempre meglio scrivendo il codice a mano e creando l’immagine manualmente.
Sarò antico?
# - postato da Nemesis Design - 04 Luglio 2007 - 11:08
13
@grafite: la riduzione delle richieste HTTP come fattore di ottimizzazione della velocità di caricamento è un dato riconosciuto e assodato. Ti invito a dare un’occhiata a questa ricerca svolta dal team di Yahoo (ne abbiamo parlato anche sul blog).
Steve Stouders, il responsabile di questo team, sta pure scrivendo un libro su questi argomenti e ha preparato un sito con esempi.
Vai su questa pagina e fai un semplice confronto dei tempi di risposta tra l’esempio 1 e il 3.
La questione di fondo è che un browser riesce a gestire 2 o 4 download simultanei di componenti presenti sulla pagina. Il resto è matematica: il caricamento completo della pagina avviene prima con 40 immagini separate o con 10? Non è insomma tanto questione di consumo di banda o di peso in senso stretto, ma di ottimizzazione del lavoro del server in risposta alla richiesta del browser.
14
http://www.web-area.info/tutor.....a-immagini.. qui un buon tutorial sugli sprites partendo dall’analisi della grafica di Youtube.
ciao