[[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 1x1 pixel image) as the src of the image tags:
-
...
-
<ul id="sidebar">
-
</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!
hi
thanks your site
thank
thanksss
thankssssssss
Very nice article! Thanks for this!
doumo_arigatou
thankss so much.
thanx for nice share
Thanks a lot, you just made my day! I was searching for this information for a long time and finally I found it here! Very good job!
http://www.mirc.net.in thanx!
I would like to see if you know of any Luminis Developers currently looking for a contract. We do have a 12 month contract available with our direct client in Oklahoma.
Essential Job Duties:
-Create custom channels and other channel development, such as a “feedback channel”, “search” and “oZONE help.”
-Help install Google analytics in the portal.
-Cross-train internal staff on Luminis
-Help with Load Balancer issues as well as any other system issues we are experiencing.
Please feel free to forward my information to anyone who may be interested.
Thank you,
Christine Rossiter
# 708-492-3449
crossiter@thesheffieldgroup.com
Nice information…
read through these but the ones
iho historickeho kontextu.
Great post I think people often pass over images, but spending some time on image optimization can really increase site loading speeds by a lot!
[...] done. They’re not difficult enough to warrant to their own posts but still super useful. BorkWeb ? Faster Page Loads With Image ConcatenationDoes having a lot of small images on your web app increase latency? Can this trick really counter [...]
With
ty dyde
Interesting idea, I may try this one out!
Perfect !! Now i go and use it in my site !