Utilizzare gli sprites con CSS 
Dando una letta veloce all’articolo “Web Site Optimization: 13 Simple Steps” ho notato che tra le tecniche per ottimizzare un sito c’è quella di utilizzare gli sprites in CSS.
Questa tecnica consiste nel combinare più immagini in un unica grande immagine e far visualizzare tramite CSS solo la porzione che ci interessa.
In questo modo diminuiamo drasticamente le richieste HTTP e di conseguenza rendiamo il sito più veloce.
Per chi è interessato a questa tecnica consiglio di leggere “CSS Sprites: Image Slicing’s Kiss of Death” di Dave Shea.
La creazione dell’immagine grande può richiedere un po’ di tempo e quindi c’è già chi ha pensato di creare un utile tool per la creazione automatica degli sprites.
PS: Yahoo utilizza questa tecnica per ridurre il numero di chiamate HTTP (ad esempio qui, qui e qui).
Daniele Simonin 24 October 2007 alle 22:18 Trackback URI
Feed
infoPillole (by Wikipedia)
Ultimi commenti
- byman: Ho trovato molto utile questa raccolta di...
- Flavio: bella questa!
- Beta: Thank you.Beautiful CSS form“
- Daniele Simonin: Per guadagnare molti usano questa...
- Luca: Per guadagnare bisogna lavorare, io ho raccolto un...
Calendario
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Aug | ||||||
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||
Archivio
- September 2010 (1)
- August 2010 (3)
- July 2010 (7)
- June 2010 (2)
- May 2010 (1)
- April 2010 (2)
- March 2010 (3)
- February 2010 (3)
- January 2010 (2)
- December 2009 (3)
- November 2009 (3)
- October 2009 (3)
- September 2009 (11)
- August 2009 (4)
- July 2009 (5)
- June 2009 (6)
- May 2009 (6)
- April 2009 (6)
- March 2009 (6)
- February 2009 (8)
- January 2009 (10)
- December 2008 (9)
- November 2008 (9)
- October 2008 (10)
- September 2008 (16)
- August 2008 (9)
- July 2008 (16)
- June 2008 (16)
- May 2008 (13)
- April 2008 (14)
- March 2008 (14)
- February 2008 (10)
- January 2008 (11)
- December 2007 (13)
- November 2007 (18)
- October 2007 (25)
- September 2007 (29)
- August 2007 (25)
- July 2007 (26)
- June 2007 (29)
- May 2007 (22)
- April 2007 (16)
- March 2007 (18)
- February 2007 (15)
- January 2007 (15)
- December 2006 (22)
- November 2006 (21)
- October 2006 (25)
- September 2006 (14)
- August 2006 (9)
- July 2006 (13)
- June 2006 (21)
- May 2006 (18)
- April 2006 (11)
- March 2006 (14)
- February 2006 (16)
- January 2006 (19)
- December 2005 (13)
- November 2005 (10)
- October 2005 (15)
- September 2005 (22)
Categorie
- News
- Codice (23)
- Foto (16)
- Fun (58)
- Life (65)
- Melodycode.com (26)
- Pensieri (80)
- Progetti (11)
- Simonin.it (9)
- Software (163)
- Surfing (256)
- W3C e Standards (22)
- Web 2.0 (13)
Scrivi un commento
Tags di formattazione:
Leggi i 4 commenti
Intelligente come tecnica, penso che nei siti ad alto traffico sia un tocco tecnico non indifferente. Certo, bisogna sperare che tutti i browser interpretino le indicazioni allo stesso modo, altrimenti sai che confusione…
Ciao,
P|xeL
Commento di P|xeL 24 October 2007 alle 23:59
ho provato ad usare i css sprites in un sito che ho fatto di recente…
ma non sono riuscito a capire come sistemare la storia del posizionamento.
se ad esempio voglio usare un’icona come sfondo per un link, come faccio a posizionarla sulla destra?
dovrei conoscere l’esatta dimensione del link prima di creare l’immagine?
Commento di claudio 27 October 2007 alle 15:12
Tutto dipende da come hai strutturato il html, in giro credo ci siano una miriade di esempi :) In giro nei blog trovi ad esempio che accanto al link c’è l’immagine che indica che quel link porta ad un sito esterno…basta vedi il sorgente css e html e scopri l’arcano ;)
Commento di Daniele Simonin 27 October 2007 alle 15:59
[…] CSS: Utilizzare gli sprites con CSS. Come utilizzare gli sprites per rendere più veloce il caricamento di un sito. […]
Pingback da » E-book, Editors per Blog e Utility per Wordpress: News n. 47 - Blographik - Grafica, web Design e video editing 27 October 2007 alle 19:11