Sprites: Physical Depth of Images as Relating to Responsive Design

On a recent responsive design we were working on, we ran into a bit of an issue regarding our sprites and mobile devices. We noticed that when the sprite sheets got to a certain pixel height, they stopped showing up. YIKES.

The project in question was for our client Pecking Order, who wanted a site with a very handmade feel – perfect for a pretty extensive sprite use.

Pecking Order Sprite : Full Size

The quick solution to the problem was this: dev as you see fit, and just let your sprites grow however large you want them to grow. When you’re ready to launch, grab your master sprite .psd and do the following…

1. Draw horizontal guides at an exact horizontal proportion all the way down. Personally, I would recommend 2000px.

2. Then, create NEW sprites by cropping your master sprite at a slightly higher height than the 2000px height – doesn’t really matter, however tall you feel comfortable working with. However, lock your top cropping at those horizontal guides. Now, you’ll have three new sprites, all of varying heights – but all originating from points falling exactly 2000px down from the master. Don’t worry, this will make sense in a minute.

3. Name these new sprites the same name as your master but appended – ie: if your mastersprite is named “mastersprite.png,” name your new cropped ones “mastersprite-top.png,” “mastersprite-mid.png” and “mastersprite-btm.png.” Like this…

4. Now, open your CSS document and do a quick scan on all your sprite graphics.
• Do a find/replace to change ALL your sprite names to “mastersprite-top.png”
• When you find one that has a y-value of greater than -2000px, change the name to -mid.png and subtract 2000 from that y-value. So…

.cateringheader {
display: block;
background: url("../images/mastersprite.png") no-repeat -300px -3039px;
height: 158px;
width: 456px;
overflow: visible;
}

becomes

.cateringheader {
display: block;
background: url("../images/mastersprite-mid.png") no-repeat -300px -1039px;
height: 158px;
width: 456px;
overflow: visible;
}

5. Repeat the same process for any item with a y-value of greater than -4000px, changing the name to -btm.png and subtracting 4000 from that y-value.

6. Then, do future you a favor and notate your CSS sheet like so:

/*
*
Helpful note: when building sprites for mobile, images should not be any deeper than 2560px (iOS especially has an issue with sprites larger than 2560px deep). iPad will render these sprite graphics in landscape mode but _not_ in portrait. Devices rendering at 420px and lower are spotty at best. Emulators (including Adobe Shadow / Edge Inspect and Safari's User Agent will not pick this up.
*
* holla.
*
*/

At this point you might be thinking to yourself “Wait – having multiple sprites on a project… doesn’t that kinda negate the entire purpose of spriting?” No, not at all. It’s much better for site optimization to deal with three sprites like I’ve outlined, rather than deal with hundreds of small background images that have to get loaded individually.

Now, go find your 7th grade algebra teacher and tell her you were wrong – you did end up using that math in your everyday life. 🙂