Web Performance Optimization: Image Tricks
There are so many problems caused by images when it comes to web performance, or even native apps for that matter. There is a balance that must be met when it comes to considering images and modern web applications. We want beautiful and engaging applications but we want them to run fast. This implies they download quickly and images can consume large blocks of bandwidth. When it comes to mobile this is a huge deal not only because it causes sites to load slowly it can also quickly eat a user's data plan. So today I am going to look at some ways to optimize image usage to speed up a web site.
Reducing HTTP Requests
One of the core rules to improve web site performance is to reduce HTTP requests. Traditionally web sites can reference hundreds of images each time a page is requested. This is a big no no and can easily be avoided. There are several ways we can do this; CSS sprites, data URIs and using new CSS3 features.
Often web sites have small images that add value to a page such as icons and other placeholder type images such as borders and backgrounds. I can't tell you how many times I sliced up Photoshop files to get little images to build a layout back in the day. Thank goodness using Photoshop for web layouts has become taboo now LOL. But we still tend to have a large amount of utility images in any web application.
Each of the images is another HTTP requests, which of course slows the web app down because each of those requests consumes valuable time and add data to the overall page load. Each HTTP request requires request headers, etc that wrap the actual image data, not to mention each image file has headers and other meta information (think EXIF). All this just keeps adding up to make for a lot of unnecessary data.
CSS Sprites provide a nice way to reduce the number of images from many to one. This means a single HTTP request, and of course a smaller overall combined image size because there is only one set of meta information to wrap the image.
There are hundreds of free resources online to help you create CSS sprites, so I won't bother listing any. So let's just look at a simple example of some icons I am using for a bulleted list.
Applying the CSS sprite is fairly simple. Instead of using an IMG tag you use a placeholder element and apply the image as a background image. The trick to this is to define the actual height and width for the placeholder element and then set the background-position. The top left corner is 0,0 coordinates. As you move away from that position the x and y axis goes negative. The background-position values specify the top left corner of the image to be used in the background.
Once you get comfortable with CSS sprites you might want to consider taking it to another level with Data Uris. Instead of downloading a traditional image files like a GIF, JPG or PNG the binary data is base64 encoded and turned into a string representation. This string can then be used either as an image src or a css background url.
This is the data url for the bullet image I used in the previous section, I have cut out much of the actual encoded string for brevity. You can see it in action here.
The advantages of the data uris are they can be included in HTML or CSS files as text, thus eliminating even another HTTP request. The drawbacks is they can really increase the file size and are not supported by old browsers. But even IE 8 supports data uris, so that is not as much of a deterrent as you would think. So my advice is to run some tests for your application to determine if data uris are a good choice for you.
How many times did I use images to make rounded corners, gradients and shadows over the past 2 decades? Extra images, having to slice and reslice as stakeholders changed their minds about the site layout, the headaches. Fortunately just about every modern browser supports CSS3 features to eliminate the need for these support images.
A good place to get things going with these new features is CSS3Generator.com where you can easily create the CSS for all these new features except gradients. For that you can go to the Ultimate CSS Gradient Generator. Of course there are many other online resources you can use, I use these routinely to help me out.
One thing about gradients, they burn CPU whether they are images or CSS3 generated. So you need to keep that in mind. Personally I have come to loathe gradients as seem like a distraction to me. Maybe that is just my affection for the Metro UI styling, maybe not. So when I have a choice I tend to avoid gradients all together and let the data speak for itself.
This is three basic ways you can optimize your web application's images to improve overall user experience with a faster application. You can reduce the number of HTTP requests as well as the overall amount of bandwidth needed to render your client web app. With new CSS3 features you can eliminate the need for many images would could not have made layouts in the past. I did not even get into image formats and optimizations! Maybe I will discuss that in a future post.