thumbnails in the markup or in sprites

[shamai]

i once asked if i should use sprites or not.
heres my problem.
i have 9 thumbnails of pictures. when clicked a lightbox opens a bigger picture.

originally i used img. in the html markup.
if i am to change them over to a sprite my html would be fine but my css would grow a lot…
example:

thumbnail li{
background: url(blah blah..)
}

li:nth-of-type(1){
background-position: etc….
}

li:nth-of-type(2){
background-position: etc….
}

all the way to 9!

quite annoying… is this still worth it and should my thumbnails not be in the markup?

[dfogge]

it is indeed very annoying, but i believe it may be worth it (mainly just to cut down on server requests). there are some tools that make it easier though!

here’s one i’ve used a few times: http://www.spritecow.com/
mr coyier himself did this excellent screencast showing how to use it:
https://css-tricks.com/video-screencasts/105-using-spritecow/

another approach (one i havnt tried yet, but probably will soon) is to use css preprocessing with compass/sass. check it out here:
http://compass-style.org/help/tutorials/spriting/

[shamai]

? really? i mean i have the thumbnails in a grid with padding and margins….
how does that work?
is this black magic!?

[Author]

Posts