Poke me on GitHub

Mar 3, 2010

CSS Sprites or Data URI Sprites?

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.

Tags

Back to top

 

Who am I?

My LinkedIn Profile

me

Grew up in Shanghai, China, I quickly became interested in computers and the Internet at the age of 13. I started off by creating simple websites using basic HTML I learnt from reading computer magazines. Later on I worked in online publishing, marketing and web hosting while studying in high school. After being a 'webmaster' for a few years, I began my career in web development and design. I studied for Bachelor of Information Technology and Systems at Monash University in Melbourne, Australia. I now work as a web developer at Envato.

skills

I am primarily a Ruby and PHP developer as well as a front-end/UI developer. In my spare time I also try to do as much creative designs as I could in order to keep my design skills polished. I also focus strongly on user experience and user interface design.

exp

During high school I worked as a part time site editor for a gadget website as well as a freelancing author, I contributed articles for many of the Chinese IT magazines. Soon I became fascinated by the World Wide Web so I started making my own websites and started hacking scripts. I began working as a part time web developer shortly after I graduated from high school. During the four years of study at TAFE and university, I worked as a freelancer and focused mostly on web development and design. I worked full time as a web developer at a Melbourne-based media agency before landing my current job at Envato.

oss

I am an active open source developer who contributes to many of the projects on GitHub.

Here is a list of my open source projects.

I have also made contribution to these open source projects.

hi!

Please feel free to shoot me an email if you would like to get in touch. I am also happy to provide estimates and consultancy to any web based projects. You may write to me in English or in Chinese. :)