Category: Web Standards

We all know the benefits reducing the number HTTP requests has on page performance. With the Mobile Web becoming more and more ubiquitous and its usage predicted to dominate by 2013, performance is even more critical for any semblance of a good user experience. 

The good news is that there are two specific, and often overlooked, techniques that help eliminate unnecessary HTTP requests:

1. Using data URI to replace small images
2. Using CSS gradient to replace gradient background images

Let's start with the first technique.

Data URI to replace small images

According to Wikipedia, the data URI scheme "provides a way to include data in-line in web pages as if they were external resources." For performance-conscious developers, that is grounds for celebration! Give me any file, I'll get its base64 string representation and embed it in my page. The content of the file renders fine and I spare an HTTP request to boot!

Heaven!

But like we know from everyday living, there's no such thing as free lunch. Data URIs have their disadvantages. The most annoying one is "blocking." The larger the in-line data string is, the longer the page will remain blocked. 

But there are ways to reduce the blocking time. Optimizing the images beforehand helps reduce the length of the URI string and in turn the duration of blocking. Tools like Smush.it could help in reducing the amount of data packed into an image, which will result into a shorter data URI when converted. Using gzip compression also helps in reducing the overall file size (HTML of CSS files) served to the browser.

Another thing to remember about data URIs is that they don't work in IE 6 and IE 7. One way to resolve this issue is to serve one CSS for IE 6/7 and another for every other browser. This way you can at least boost performance for all compliant browsers while degrading the experience gracefully for non-compliant ones.

I personally like to use data URIs for images that fall in the following categories:

• patterned background images
• small images (icons, 1×1, …etc)

Let's take the following image, for example:

It's a loading image that's usually used to give visual cue to the user that the page is busy doing something. An image like that cannot be combined in a Sprite, which means that it has to be called in individually through a separate HTTP request. Fortunately, the image falls into the second category of images that qualify for conversion.

Embedding the image in an <img> tag:

<img width="16" height="16" alt="" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />

Embedding the image in a CSS background image:

{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);
}

The raw data for the image is:

data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==

CSS gradients to replace gradient background images

Switching from using Sprites for your gradient background images to using CSS is one of the best practices used to increase web page performance.

Check out the button below:

 

 

Normally, that button would have had its background served from an image file. Check out how it's done in CSS:

{
background:#fc8433;
border:#ae4805;
color:#fff;
font-size:16px;
padding:5px 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fc8433), to(#ae4805));
background: -moz-linear-gradient(top, #fc8433, #ae4805);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8433', endColorstr='#ae4805');
}

To add the rounded corners, add the following to your CSS class selector:

{
-moz-border-radius: 5px;
border-radius: 5px;
}

These simple examples demonstrate the power of both data URIs and CSS gradients in helping you reduce the HTTP requests. Ultimately, you have to make a decision of what makes sense for your application and performance requirements. But if performance is a concern of yours (as it should be) then you are hard-pressed to peruse your codebase for opportunities to eliminate HTTP requests, and images are a great place to start.