SpriteMe: CSS Sprites in un batter d’occhio!
Lunedì 28 Dicembre 2009 - 12:20
di Andrea Zilio
Fra le varie tecniche utili a velocizzare il caricamento delle pagine web, una delle più efficaci è certamente l’uso di CSS Sprites.
Il problema di questo metodo è la difficoltà dell’implementazione: è laborioso creare correttamente gli sprite, è necessario dedicare del tempo per capire quali immagini possono essere incluse e bisogna agire con precisione nell’impostare valori corretti per le proprietà background-position.
Un processo che può essere automatizzato? Sì, con SpriteMe: un semplice bookmarklet realizzato da Steve Souders (Google) che permettere di realizzare sprites su misura per ogni sito in pochi secondi potendo vedere immediatamente il risultato finale e il guadagno in termini di peso e di numero richieste HTTP.
Un paio di click ed ecco il risultato raggiunto applicando SpriteMe a due siti nostrani:
- HTML.it: 38 richieste in meno con questo sprite generato automaticamente.
- Repubblica.it: 21 richieste in meno con questo sprite generato automaticamente.
Risultati notevoli!
Lo strumento è open source; il progetto è disponibile su Google Code.
Per chi fosse interessato ai dettagli è disponibile il video di presentazione creato dall’autore che spiega anche le attuali limitazioni e le prossime funzionalità.
Commenti
1
Interessantissimo lo provero subito e tornero con le mie opinioni
Grazie
2
carino…
sopratutto per la possibilità di gestire in d&d le immagini che acchiappa e perché a differenza di altri tools non devi uploadare tu le immagini…peccato che però non identifica le immagini in hover…
PS: Zilio ora che gliel’hai creato lo sprite, magari passalo a quelli dell’home page di html.it
:p che magari lo applicano… :p
3
Aah gli sprite… forse un po’ OT ma chi avrebbe mai pensato che un modo di lavorare con il C64 si sarebbe rivelato utile 30 anni dopo! :)
E se non sbaglio, nel settore videoludico stanno pensando di usare la stessa tecnica con Rage.Saluti e buone feste!
4
Sembra molto interessante…lo proverò :)
# - postato da Davide - 30 Dicembre 2009 - 09:13
5
Fatto molto bene, l’unico problema è che ho riscontrato grossi problemi tra CSS Spriting e IE6 PNG fix
# - postato da Marco - 30 Dicembre 2009 - 15:10
6
Lo strumento è eccezionale, purtroppo non ho trovato, in italiano, chi spiega come usarlo.
7
Scusate, mi riferivo a SpriteMe.