As a website’s complexity increases, the performance of the website becomes an important consideration for site owners. Most importantly, you need to consider how your site will perform if it contains too many images.
Considering the fact that, images have more chances to be shared than the text displayed on a site, many site owners are including images in their site in a bid to drive more traffic. But, image-heavy sites take a long time to load. That’s because, most of the time is tied to downloading several components of the page including images. And thus, reducing the images can cut down the HTTP requests made by the browser to render a web page.
Fortunately, there are many different strategies that you can employ to optimize images, so as to improve the performance of your website. So, if you’re looking for techniques using which, you can speed up your website containing plenty of images, then Data URI and CSS Sprites are two different strategies that can help achieve your objective. However, there has been a debate going on over the web about how Data URI seems to be making CSS Sprites obsolete.
This post will throw light on why CSS Sprites were being developed and why you should use Data URI instead of CSS Sprites.
DataURI vs CSS Sprites
Why CSS Sprites Came Into Existence
Image credit: Tableless
Before diving into details as to how Data URIs have superceded CSS sprites, let’s first discuss the purpose of CSS sprites and the problems they solved. Just as we have discussed above, HTTP requests lead to a performance bottleneck. In simple terms, sending more HTTP requests to the server, will make your web pages load slowly. This means whenever an image gets loaded onto a page, it will make you fight for page speed. But, thanks to CSS sprites this problem was solved, as they helped combine all of the images into a single file. And thereby, reduced extra HTTP requests by converting it into a single request.
Let’s look at an example of a CSS Sprite:
csssprite {
background: url(1stsprite.png) no-repeat;
}
.newicon {
background-position: 16px 16px;
}
.newicon1 {
background-position: 32px 16px;
}
Here the “mastersprite” is the parent class where all the images that need to be used are kept. So you’ll apply this class when you want to make use of the master sprite image. Apart from this, a second class will be required where you’ll move the sprite images into their exact position.
However, there is a downside to using CSS sprites. Since the images are required to be arranged in some order, usually containing extra spaces, one has to bear the overhead for planning and using CSS sprite images. This means that you’ll need to continually write down where each image is placed inside the larger sprite image, in order to use CSS for positioning and displaying the image in the right location. This problem can be solved using Data URI.
Utilizing Data URI Rather Than CSS Sprites
Data URIs are an effective technique that let you insert images directly into your HTML and CSS files. Because the data is available locally, no extra HTTP request is needed for acquiring the information. Just like CSS Sprites, Data URIs also help in resolving the problem of making HTTP requests for images in excess but in a relatively easy to handle manner.
Wondering how?
Data URI doesn’t make use of a single extra request for obtaining the large sprite image, and instead uses zero extra requests for getting the required images. Besides this, it doesn’t require combining all the images into a single file. You can choose to place the images separately, and utilize them as background images. And so, nothing much changes in the CSS except that the entire Data URIs are excluded to make space:
.csssprite {
/* no longer needed */
}
.newicon {
background: url(data:image/png;base64,<data>) no-repeat;
}
.newicon1 {
background: url(data:image/png;base64,<data>) no-repeat;
}
As you can see in the above code, the csssprite class is no longer required as your image data is stored in each icon class.
Note: You don’t have to make any changes to your HTML markup, but can remove the csssprite class as you like.
When looking at the approach I have just discussed, it’s pretty obvious that some of you might question: if increasing the CSS size by adding the image data will impact the performance or not? No, it doesn’t till the time your CSS is kept in an external file as a gzipped file. And the Data URI Base64 encoding helps compress the file when “gzipped”.
Another advantage is that not even a single call is made for all of the images. Besides, as the images are being kept in your external CSS files, they get cached. Therefore, when the user requests an image, it is being pulled from the cache.
Transforming Your Image-Based CSS Into Data-URI CSS
Still writing CSS containing images in the outdated and unsatisfactory manner? An ideal solution is to embed your CSS file with Data URIs. This can be achieved using CSSEmbed. It is an effective tool that can be used for transforming your CSS-based images into Data URI-based CSS, and eventually save you from needing to write CSS code as shown below:
.newicon {
background: url(newicon.png) no-repeat;
}
.newicon1 {
background: url(newicon1.png) no-repeat;
}
Final Thoughts
I hope that this post will help you understand why CSS sprites were developed in the first place, and what makes Data URI a better option for optimizing images than CSS sprites. There is one thing I would like to bring to your attention: since browsing on mobile devices is rapidly increasing over desktop browsing, you need to pay even more attention to delivering an enhanced user experience. So, it becomes needful for you to ensure that your image-heavy site performs equally well when accessed on a mobile device just like it does on a PC.
