HTML and CSS Reference
In-Depth Information
Rather than try to stack the images in such a way that makes the resulting
sprite as small as possible, let's try a di
"
erent layout. Instead of a random
grid, we're going to build a nice square grid, reserving the space of each
square for one image (although larger images might cover multiple squares).
The goal is to be able to target the starting point of every image (top-left
corner) with a very simple mathematical function.
The size of the grid squares will depend on the average dimension of the
images that you'll be spriting. For my website, I used a 32×32 pixel grid
(because only one image exceeds this dimension), but grid sizes will vary
according to the situation. Another thing to take into account is the image
bleeding that can occur when zooming a page; if you want to play it safe,
add a little padding to each image within the sprite. For extra optimization,
you could also use a rectangular grid instead of a square grid, further
reducing any wasted space; while a tad more complex, this isn't much
di
"
erent from what we'll be doing. For this article, though, we'll stick with the
square grid.
Preparing e Sprite: A Photoshop Bonus
I'm no designer, so I'm not sure how applicable this section is beyond the
realm of Photoshop, but there are still some noteworthy improvements that
can be made before we get to the actual code. First of all, visualizing the
grid can be of great help. Photoshop has guides to do this (so you don't
actually have to include the markers in your sprite), with the added bonus
that layers will snap to these guides (making pixel-perfect positioning of
each individual image much easier).
Manually adding these guides can be somewhat of a drag, though. Luckily, a
colleague of mine (hats o
"
to Filip Van Tendeloo) was kind enough to write
and share a little Photoshop script that builds this grid of guides
