Are CSS Sprites A Mobile Web “Worst Practice?”

Written by John Keith on

There’s an interesting article on that talks about the pitfalls of using CSS sprites for mobile web content. While there are several reasons why sprites may not be a good idea, two stand out for me: CSS2 support is required for the necessary background positioning, and there may be longer term performance penalties associated with using the layout engine for positioning on every page.

That performance aspect is something to think about.  The author states that it may be better to deliver a set of images once, paying a relatively small penalty for extra (cached, with long expiration) HTTP transactions, than to pay a layout engine penalty on every subsequent page rendering.

I can’t say for sure, but I can certainly imagine that some mobile devices are better than others when it comes to page rendering performance.  As one of the commenters in the article states, this “brings us back to the golden rule in mobile: know thy browser…”.  What works best in the desktop world may not be best in the mobile world.

The W3C says that CSS sprites are a best practice for the mobile web so — this would seem to be a odds with that recommendation.  What do you think?

Never miss an article!

Get Weekly Digests


Yes, "know thy browser." I would need to test it (or be Peter-Paul Koch!) to know for sure, but my guess is that WebKit- and Opera-based browsers will handle sprites just fine. The dangerous ground is likely to be IE Mobile. Even on the desktop web, there is a point where sprites can be too large to be helpful. Personally, I tend to break up my sprite images into sets of related items. It seems to be a good compromise for saving a few HTTP requests without requiring the user to download mammoth images.

I would avoid sprites on IE Mobile; last time I checked it was basically no better than Openwave/Access/Au/Blackberry/etc. And I certainly wouldn't use sprites there.

But if you are doing a version for higher performance devices, then by all means use sprites. I'm not too sure about the idea of a single sprite sheet, but perhaps a collection of them.

Late to the post, I know, but I found this thread on the first page of Google results for "CSS sprites on BlackBerry" so I figured I'd chime in. Responding to comment #1: just wanted to note that the iPhone won't cache files larger than 25kb (and that's the uncompressed size) at all so that's a huge consideration if you're creating sprites for mobile.

Let’s discuss your project! Email Us