CSS Sprites or Data URI Sprites?

2010-03-03T04:42:00.000000Z

When making the new design of this blog, I inevitably come to the dilemma of whether to use traditional CSS sprites (i.e. to use background image positions to locate the images) or to use Data URI sprites (i.e. to use Data URI / MHTML to replace the actual image files).

First of all, during the design and development stage, everything was built without any sprites in mind. It is just so much easier to build the template without worrying about background image positions.

After the template is finalised, I then used the sprite tools to generate the sprites.

Data URI, on paper sounds like a very good approach, especially when duris.ru takes care of everything, including the support for IE7 and optimising the images using Smush.it.

Unfortunately, the limitation of Data URI and MHTML, namely, the 32KB length limit in IE 8, makes this approach less feasible.

In the end, I generated the CSS sprites using the CSS Sprite Generator and manually replaced those CSS attributes.

]]>

Blog (sprites) - Fred Wu's Tech

CSS Sprites or Data URI Sprites?