Om css sprites

Den nylanserade Css Sprite Generator har det skrivits en hel del om senaste veckan. Det är ett online-verktyg som skapar s.k. css sprites – smarta bakgrundsbilder till din sajt:

If you use a ton of CSS backgrounds for things like icons, buttons and other non-repeating graphics, then you can combine them into a single graphic and use background-position with width and height to show a slice of the larger graphic. This can make a site load faster since there are less files to download.

The Future of the Web- CSS Sprite Generator – The Future of the Web (2007-09-30)

Med hjälp av css-attributet background-position flyttar man bilden så att det ser ut som en annan bild visas. På så sätt sparar man antal hämtningar från servern. Jonathan Snook beskriver sprites som en av nycklarna till att förstå modern css-baserad layout. A List Apart har en mer detaljerad genomgång om vad sprites är och hur man använder det.

Via Salmonized hittar jag en annan Css Sprites generator. Den är lite mer basic men minst lika användbar! Och Chris Heilmann tipsar om pzImageCombine som är ett desktop-program som gör samma sak.

Det finns ett par kända buggar i Safari och Opera som man ska tänka på om man ska använda css sprites (generatorerna verkar dock ta hänsyn till dessa).

Till sist har Martin Kliehm har en intressant lösning på hur man använder sprites för vanliga bilder (inte bara bakgrundsbilder). Det kan användas om man t.ex. vill ha en knapp som inte har någon text (en play-knapp eller dylikt).

Lycka till!

[tags]css, css sprites, bildbehandling, generatorer, online verktyg[/tags]

En kommentar till “Om css sprites”