Faster Page Loads With Image Concatenation

[[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:

help settings maximize shade grow close

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:

icons

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: sidebar_icons 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!

TMNT Movie Update: Plot & Images

Leonardo Movie PosterDonatello Movie PosterRaphael Movie PosterMichaelangelo Movie Poster

As I’ve mentioned before, I’m very excited about he new Teenage Mutant Ninja Turtles Movie that’ll be in theaters March 30th, 2007. The plot, as written on IESB reads:

After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. Struggling to keep them together, their rat sensei, Master Splinter, becomes worried when strange things begin to brew in New York City. Tech-industrialist Max Winters is amassing an army of ancient monsters to apparently take over the world. And only one super-ninja fighting team can stop them ”those heroes in a half shell” Leonardo, Michelangelo, Donatello and Raphael! With the help of old allies April O’Neil and Casey Jones, the Turtles are in for the fight of their lives as they once again must face the mysterious Foot Clan, who have put their own ninja skills behind Winters endeavors.

After some hunting around, I’ve found some decent Movie stills on both IMDB and ComicBookMovie.com. I’ve organized them on Flickr and will add more as they become available.

LeonardoDonatelloTurtlesTurtle TowerSplinterThe TeamAwesome Leo ShotThe FootNo ClueSome DudeRaphael and CaseyCasey and ??  Rocksteady?The Team 2

The TMNT animation style is to my taste, although April O’Neil looks a little odd. The Foot look amazing and Splinter – while quite different from the live-action movies – looks awesome. I’m happy to see that Casey Jones is once again a part of the team. All things considered, this movie looks pretty ballsy. Lets hope the story is better than Turtles 2 & 3.

Google Services

After posting about Google Maps’ implementation of satellite imagery from Hurricane Katrina, it was suggested that I do a follow-up on Google Earth. I think I’ll go one step further and elaborate on some of Google’s hottest services and slightly speculate on what could be coming down the road.

Google Maps
Google Maps vs. MapQuest…Google wins hands down. Not only is this product able to generate efficient directions, but you can view maps using the standard road maps, using satellite imagery, or a hybrid of the two! This is a very sweet product that has been blogged about by many so won’t elaborate too much more on this product…but I would suggest heading over to MaisonBisson.com and NoSheep!.

Google Earth
If you think Google Maps is something sweet, Google Earth will really turn you on! Ok, fine. It isn’t a web app…its a desktop app. Google Earth is a product formerly known as Keyhole until Google bought them up (along with Keyhole’s satellite) then reworked and rebranded it as their own. This is Google Maps on steroids. When you open the app, you start in space looking at Earth. When you enter a city, state, etc in the search box and hit enter, you see the earth rotate and you zoom in on the location you entered. If the location happens to be a place that is densely populated, there is a chance that there are 3-dimensional buildings available for you to view…simply check the ‘Buildings’ box and tilt your view and viola! If you haven’t checked it out yet, I would highly recommend you get off your butt and go download it. Its bound to be a great procrastination tool!

Gmail
Google Mail has breathed life back into the e-mail web client industry. They are setting the standard and are crushing competitors with their innovative design and search-based/tagging e-mail archiving. Gmail is a whole new way of handling the taxonomy of e-mail!

In Gmail:

  • There are no folders, there is labeling. WTF is that? Well, its a way of marking an e-mail as part of a specific topic…say I receive an e-mail from MasterWish about my new account and I want to save it. Rather than dropping that e-mail in a folder marked ‘MasterWish’, I apply a label to that e-mail called ‘MasterWish.’ Ok, so whats the difference between that and folders? Here’s the kicker, I can apply a second label to that e-mail called ‘Account Information’…Then I can apply a third called ‘Sweet Websites’. Basically it allows you to put an e-mail into as many categories that you want which makes searching for the e-mail a whole lot easier. Now I no longer have to sit and think “Alright…this e-mail is about MasterWish so I want to put it in the MasterWish folder…but wait. It is also an Account Information e-mail….hrm.” Now I simply label it as many times as I want and I’m done!
  • Goolge Search Power! Yeah, rather than folders and moving e-mail all over gods creation, Google has a handy dandy ‘Archive’ button. If you don’t want a crap ton of e-mail that you have already read sitting in your inbox and you don’t want to delete it, Archive it! No worries, if you want to find it again simply use the google-style search box to find it again. Hugely efficient, hugely accurate, extremely easy, and faster than Outlook search :D
  • View entire e-mail threads. When you get a conversation going back and forth with a friend or business…i.e. you send an e-mail, they reply, you reply, they reply, you reply, etc. Rather than cluttering up your inbox with umpteen-million e-mails, Gmail places them in one! You can see every e-mail in a given discussion and expand/hide parts that you care/don’t care to see.
  • AJAX. (Asynchronous Javascript And XML). With Gmail there are few page loads. As you navigate around your Gmail account you may notice that the page usually doesn’t reload… Thats AJAX. Gmail and Google Maps have made it hugely popular. I’ll post a followup describing it later because it is its own topic in and of itself.

Google Talk
I just downloaded Google Talk today :) Google now has an IM application! If you have a Gmail account, you can get it and login without creating yet another account to remember. As my friends move towards Gmail accounts, this will become a slicker tool to use. If you have a Gmail account, I urge you to download Google Talk and give it a whirl. If there is enough end-user response to the application, I’m sure Google will be able to do great things in the IM market. Its simple. No ads. It offers one-click access to your Gmail account.

Google Desktop
Microsoft did it wrong (as usual)…Google has done it right (as usual) with Google Desktop. This tool will index all of your e-mail (Outlook, Outlook Express, Gmail, etc), your IM programs, visited webpages, text documents, and a crap ton of other stuff allowing you to search (using a browser) all of the above returning search results as quick as Google Search! If you have used the Microsoft search tool in Windows, you know from experience that its like watching grass grow.

Oh, and with the newest version of Google Desktop, there is a sidebar that allows you to monitor all sorts of things in addition to executing desktop searches. There is a photo rotater, a blog monitor (places newest posts on your most frequented site visits), an iTunes controller, etc.

The above is what I use and find extremely cool. Obviously there are a whole lot of additional web apps that Google is developing. I’ll be posting more as I use them ;) In the mean time, check out what Google has to offer at the Google Labs. Where are they headed? Are they slowly cornering/buying out various web markets for a ‘secret scheme’ or just trying to make right what has been horribly wrong for so long? Time will tell…we do know, however, that Google is making other companies *cough cough*Microsoft*cough cough* extremely angry as the Google competition is hard to top! If Microsoft is threatening to “Kill Google”, the company must be doing something right!