CSS - Using image sprites

Question

I recently started using image sprites, and they are great for shortening HTTP requests. Is there a point when this becomes bad practice?

I think, especially when you need to add a lot of extra markup to support them. For example, using them for bullet list items, I have to add two or three extra spaces to get all pinned, etc.

Theres also annoying that you cannot use duplicate images, so there is always a flip between one large image as part of a sprite or a tiny 1 pixel image used to reload on its own.

Im really looking for an opinion on the two situations described here + any other general considerations / recommendations for using sprites.

Answer 1

They can often cause performance issues on mobile devices. I am not 100% sure why (I never plunged into the problem), but I guess this is because the mobile web kit loads a new copy of the relatively large image into memory for each instance of it on the page. Since mobile devices often have very little RAM, this can slow down the page.

I came across this problem earlier when there were about 300 "icons" of sprites on the page, each of which I pulled from a sprite containing about 50 different icons. Returning to the “usual” methods with a single icon per image (or 2-3 for hover states), performance problems on this particular page were resolved.

In addition, many browsers (mobile and others) often will not 100% relate to clipping sprites with a small change in the size of the page content (for example, using "Zoom In / Out" in the browser itself). You will often see small pieces of sprite next to the one you want to use.

As for your bullet example, you don't need more than one extra div / span. You should set margin-left to li and put your "bullet div" in the empty space that it creates.

Saying this, I use sprites all the time because they are convenient, just keep in mind a few problems with them. Typically, I have sprites.png , sprites_h.png and sprites_v.png for horizontal and vertically repeating fragments.

Answer 2

Write two simple test pages, use sprites on one and not the other. Use a tool like http://www.webpagetest.org/ to measure performance across multiple browsers. When you have data, you can make decisions.

Answer 3

I would split the sprites into related elements such as navigation and content related sprites, so you can use sprites and maintain a logical order in your code. Don’t forget that readable and understandable code should be a priority (especially with CSS, it can become very dirty) if you are not working on a project on a Google scale.