Let’s get right to the good news. The CSS Sprites technique has been added to some of the major ASP.NET controls in the DXperience 2009 volume 3 release!
You might be asking yourself, what is a CSS Sprite? It’s a CSS technique to combine several smaller images into one image and gain performance. As web design guru, Chris Coyier
[1] puts it:
The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.
Using the CSS Sprite technique has the effect of reducing the amount of requests sent to the web server: one big image requested instead of many many small images. And less requests on your web server means 2 things:
- There’s less to send over the wire.
- Pages load faster!
How fast?
We tested the performance using the 512kps speed settings in Fiddler. Just to be sure that we’re targeting a common speed that users might have if their visiting your website from home.
The result? If one of the ASP.NET controls contains a lot of images, for example the ASPxHtmlEditor, then the CSS Sprites approach gives you a staggering improvement of about 1.5 to 2 times for a page with the ASPxHtmlEditor.
Your Feedback Is Appreciated
This post has a lot of information to digest so fire away if you've got more questions.
References:
[1] CSS Sprites: What They Are, Why They’re Cool, and How To Use Them by Chris Coyier
DXperience? What's That?
DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.