[[innerindex]]
Introduction
When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times…and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it.
To reduce latency in my apps, I use Image Concatenation! Coupled with a bit of CSS magic, performance improves and life is great.
Image Concatenation…WTF?
The basic idea is this: Change X number of image downloads to 1 image download by making 1 big image that contains the X images.
As an example, lets say we have these icons:
While those are pretty tiny in size, on page load the user must still deal with downloading 6 individual images. Instead, we can simply concatenate those images using whatever image software that suits your fancy. Like so:
Displaying Concatenated Images
Now that we have our sweet concatenated image we can’t simply drop that image into an image tag and call it good…that’ll display all icons at once. So…how do we display it?
To display the concatenated image, you need to place that image as a background on an appropriately sized DOM element using CSS to adjust the background positioning to make the appropriate image display. Now, when I say a DOM element…it could really be anything as you can plop a background image on any element with CSS pretty easily:
.whatever{
background: url('/path/to/image.png');
}
Even though you can use any element, only a few make sense. I’ve seen spans and divs used to accomplish this task, but styling those elements to work cross-browser is flaky at best and really churns my stomach. The element that his handled pretty universally is the img tag.
Yes…yes…I know, I just said don’t place the concatenated image in an img tag. I still hold to that statement. You place the concatenated image as a background on the img tag. So what goes in the src of the img tag? Our old friend the 1 pixel by 1 pixel transparent gif, of course! This way, the image will still act as an image, can be styled like an image, and be super easy to update via CSS.
An Example
Lets say we have the following concatenated image: 
that we want displayed in the sidebar with the appropriate links.
Lets set up the HTML first using transparent.gif (a transparent 1×1 pixel image) as the src of the image tags:
... <ul id="sidebar"> <li><a href="index.html" title="Home"><img src="images/transparent.gif" class="icon icon-home" alt="Home"/>Home</a></li> <li><a href="search.html" title="Search"><img src="images/transparent.gif" class="icon icon-search" alt="Search"/>Search</a></li> <li><a href="bookmarks.html" title="Bookmarks"><img src="images/transparent.gif" class="icon icon-bookmarks" alt="Bookmarks"/>Bookmarks</a></li> </ul> ...
Note the class names on the images…those will be used in the CSS as such:
#sidebar img.icon{
background: url('/path/to/concatenated/image.gif') no-repeat;
height: 16px;
margin-right: 3px;
vertical-align: middle;
width: 16px;
}
#sidebar img.icon-home{
background-position: 0px 0px;
}
#sidebar img.icon-search{
background-position: -16px 0px;
}
#sidebar img.icon-bookmarks{
background-position: -32px 0px;
}
That’s really all there is to it. The icon class allows us to set the same image background and dimensions for all icons in the sidebar. The individual classes allow us to change the image that actually shows through.
More CSS Magic
Since CSS is being used to display the appropriate image, you can do your typical property manipulation as normal (e.g. :hover, set transparencies, etc).
A little trick I picked up at Zimbra‘s presentation (the same presentation I learned the benefit of image concatenation) at The Ajax Experience last October was how to reduce the number of images used by representing inactive icons with CSS transparency rather than using individual images for inactive icons. Like so:
#sidebar img.inactive{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
If you wanted to make the icons partially transparent all the time but on mouse over make them 0% transparent, you can do so like so:
#sidebar img.icon{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#sidebar img.icon:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
Basically, whatever CSS magic you can weave can be done.
Additional Benefits
If you are a developer working in a painful development environment, the above methods are extremely valuable. Oh…and by painful I mean: any change to the base document structure requires a restart of the application. I’ve been doing a lot of development in an XSLT/Java environment recently and this method has saved me countless restarts :)
Now, if I decide an icon should change from a “house” to a “moon” (for some strange reason) I can make that change easily in CSS without needing to change the XSLT…thus no restart needed. Beautiful.
Heck…I use this CSS method for a number of non-concatenated images as well just so I can make general image changes with ease.
What Not To Do
When using the above image concatenation methods, it is important to note that concatenating similar images is a good plan. Avoid concatenating images of vastly different sizes because the wasted space on the concatenated image increases the amount of data being downloaded which can counter-act what we are attempting to reduce by concatenation.
Drawbacks
Update: This section was added a couple of hours after posting as per someone’s suggestion.
Using this method can affect the printability of your page as background images assigned with CSS don’t show in print too well :)
Conclusion
Image concatenation can be a beautiful thing when dealing with large numbers of icons/images. But, as with anything, weigh its benefit. Thus far, I’m pretty happy with the results!
Comments
107 responses to “Faster Page Loads With Image Concatenation”
[…] piece on Faster Page Loads With Image Concatenation goes into why and how: For complex web apps, the quantity and resulting latency of icons and […]
[…] to reduce latency in web pages using Image Concatenation! [go] Related resources Some web directories of royalty free imagesAn improved CSS shadow […]
[…] Image concatenation has been around for awhile now but it is nice to have a fully explained article aimed at how to use the technique in web interfaces. […]
[…] article about using concatenation of images. I have been doing this for a while. For me, a major trick is to make sure that the images […]
[…] you’re new here, you may want to subscribe to my RSS feed. Thanks for visiting!I was reading about Image Concatenation in CSS today. The concept allows for all the individual images on a website to be displayed from a […]
[…] View: Full post […]
[…] BorkWeb » Faster Page Loads With Image Concatenation When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times…and d (tags: images web-developer reference web-developer/tools graphics web-developer/css) About […]
[…] BorkWeb » Faster Page Loads With Image Concatenation (tags: tips css) […]
[…] has a good article about a relatively old and yet, underused image technique. It’s a good read, and certainly […]
[…] read more | digg story […]
[…] Faster Page loads with Image Concatenation Web applications tend to use a lot of images to help a user navigate the interface, and more […]
[…] read more | digg story […]
[…] Šeit pastāstīts, kā uzlabot lapu ielādes laiku, lietojot un izmantojot attēlu savienošanu (image concatenation). […]
[…] BorkWeb » Faster Page Loads With Image Concatenation (tags: css icons) […]
Very interesting, thanks.
Actually, this concept is very old – yet not known as “image concatenation”, but “sprites”. This A List Apart article by Dave Shea (written way back in 2004) discusses the technique in detail, even with an advanced approach on non-sqare images.
Good article, though.
This is pretty crazy, I’m not sure that its really useful though. I guess if I saw some huge company doing it I might reconsider.
HTTP pipelining would allow a browser to eliminate much of the latency associated with fetching multiple page images. Since the major browsers aren’t currently making use of this protocol capability, this is an interesting alternative.
@Motorcycle Guy: Yahoo! and Google both practice this technique. They’re somewhat large companies. Check out this image directly off the Y! homepage.
@Alexander Gyoshev
After posting my article, I saw the one you mention from A List Apart. While that article is really good, its method does not address the usability of “sprite” images with CSS where you want both text and icons to display. A List Apart only addresses the text-less method.
I tend want text in my links. To display the tiled icons and text and allow the text to be resized without having the other icons show through as font sizes increase, then setting a background-image on the A tag as you explained just doesn’t work well enough.
My grandfather has poor eyesight…his browser text is set to an incredibly large size. When he goes to the Yahoo (who uses A List Apart’s method) home page that uses the method you are describing, each link on the left has 2 icons on it…one that applies to the link, one that doesn’t. That isn’t usable. If an image tag (or whatever type of tag you prefer) is within the anchor tag, the text can be resized to your hearts content without the icon bleed-over.
In the above article, I’m attempting to address the usability of both icon and text links using concatenated images (sprites).
[…] Faster page loads with image concatenation – When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times…and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it. […]
Nice! You can use the same technique to create change of image on mouseover, by assigning an image shift to the a:hover pseudoclass.
[…] “When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times…” […]
[…] Faster Page Loads With Image Concatenation […]
Most browers don’t use pipelining by default because it can be seen as a bit rude and greedy.
I don’t see what problem you’re trying to solve with this. What’s wrong with having lots of little images?
@Rory
If you just take a look at those green icons I use as examples in my post you can see the benefit pretty quickly.
The individual icon sizes are:
574 bytes
571 bytes
583 bytes
569 bytes
572 bytes
574 bytes +
——————-
3443 bytes
The concatenated image (sprite, tiled image, whatever you want to call it :D) size is:
1802 bytes
Not only is it a savings in file-size, but each little image is its own request to the server and each request has some amount of time associated with the transport of data (in addition to the length of time to transport the actual images). Its a time saver on the end user…and on heavily trafficked sites, the reduced number of requests is a boon to the server as well.
Very very cool! Probably won’t be able to use it in awhile, but I love the creativity.
[…] based on thoughts he heard from Zimbra when they presented at The Ajax Experience. His piece on Faster Page Loads With Image Concatenation goes into why and how: For complex web apps, the quantity and resulting latency of icons and images […]
@Matt
Yeah, I haven’t thoght about it that way (since you mention usability only in your comment) – thanks for the remark.
Although… ain’t it accessibility what you are talking about? (jk :P)
The numbers in your last comment are pretty convincing ;) (thanks again, this helps when persuading others)
Well, the site I’m currently developing has quite a large number of icons (47…that’s icons & similar type icons). Concatenating the image into a single image has given a performance boost of 6 seconds; because of the reduce in latency and the savings of ~23K (due to compression).
[…] BorkWeb » Faster Page Loads With Image Concatenation – To reduce latency in my apps, I use Image Concatenation – Coupled with a bit of CSS magic, performance improves and life is great. […]
[…] read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]
[…] BorkWeb » Faster Page Loads With Image Concatenation […]
Nice, thanks for sharing this technique and I’ve heard of sprites but still wait out for usability issues (like CSS disabled). This should be safe enough if the target audience is small & controlled (like for site admins) vs. public.
Nice, very nice!
I’ll implement this way of showing icons and images right now.
by
I’m using this technique since I read the CSS Sprites article on ALA, specially on image based tab menus that usually require 3 states, and for an average 6 item menu that’s just 1 image against the 18 it would require without using sprites.
Great Info..Thank you
Great article – thanks for the wonderful Ideas – i’m going to try to put this together for the sociable icons that load in my blog posts. stumbled and onlywire’d.
Excellent article! After reading it I was inspired to write an application to make the creation of these images and css a bit easier and more quickly
http://btqnet.com/csssprite.html
Thanks!
[…] Faster Page Loads With Image Concatenation Change X nbr of img DLs to 1 img DL by making 1 big img that contains the X imgs. To display the concatenated img, you need to place that img as a bg on an appropriately sized DOM element using CSS to adjust the bg positioning to make the appropriate img Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
also interesting that the yahoo sprite you link to has a lot of white space. I think I read somewhere that white space uses very little filesize in a compressed image, maybe they either find it easier to alter like this or (I reckon) they have each image separate and join them with (eg) php before download.
hi nice post, i enjoyed it
The Yahoo sprite has all that whitespace to attempt to account for different browser font sizes. Play around with browser font sizes and you can see what I mean. That’s the only drawback to super semantic menus with icons. If you want the icons to be actual visual cues and consistent across the board, then using an img tag (or some other tag to hold hold the image as a background) that wouldn’t be resized as the font size adjusts is necessary.
In attempt to spread the word about css sprites and to make it easy to get started I did this tool at http://csssprites.com
Basically the tool lets you upload as many images as you want and then concatenates them into a single image and spits out the css rules to use.
[…] Image Concentration – Speed up your sites images with some fancy CSS trickery. […]
Very interesting, thanks.
Basically the tool lets you upload as many images as you want and then concatenates them into a single image and spits out the css rules to use.
Very interesting, thanks.
Successful website
thanx a lot