Using Fewer Images
August 27th, 2006Image rollovers are usually composed of two individual images; one for the default state and one for when the mouse is hovered over the image or link. However, it bears some advantages to use a single image by taking advantage of CSS background image offsets. Here’s how a rollover for an anchor is usually done:
The HTML code could look like something like this:
<a href="#" id="yaprak"> </a>
The associated CSS would then have items like:
a#yaprak {
width: 64px;
height: 64px;
background-image: url(yaprak_bw.png);
display: block;
text-decoration: none;
}
a#yaprak:hover {
background-image: url(yaprak_color.png);
}
Two individual images for the two states would have to be uploaded to the server and they would look like this:
Finally, the end result would be:
The default image that is visible to the user is the black & white yaprak_bw.png and when you hover over the image, it’s replaced by yaprak_color.png with its full-color glory. However, if this is a user’s initial visit to the website and therefore the color image hasn’t already been cached, there may be a user-perceivable delay in switching to the color image. The net annoyance will depend on factors like the user’s connection speed, the load on the web server and most importantly, the attentiveness of the user. A couple of methods can be applied to pre-load alternate images to avoid the perceived latency but I will advocate for something else: don’t use separate alternate images in the first place. You can use a single image where the two rollover images are flush with eachother, side by side or one on top of another. Here’s how:
The HTML code is the same. The CSS this time has:
a#yaprak {
width: 64px;
height: 64px;
background-image: url(yaprak_bw_color.png);
display: block;
text-decoration: none;
}
a#yaprak:hover {
background-position: 64px 0;
}
There’s only a single image:
The end result is:
Using fewer images might marginally speed up the load times for your website while also decreasing the load on your web server. Another scant advantage is that you’d have less images to worry about maintaining and uploading to your web server.
August 27th, 2006 at 4:40 pm
This is really cool. I’ve seen this written about before, but seeing it here, with such a simple explanation, finally made me do it. Thanks.
May 1st, 2007 at 2:52 am
ah ah az mi sprite bob kaydirdik
simdi webde kaydiririz nedir ki…
kaydir.
August 14th, 2007 at 10:01 am
While this is a cool idea for mouseovers, it’s not limited to mouseovers.
You can create a single image containing all your icons for a website (or specific part of a website) and use background-position offests (along with specific width, height attributes pertaining to the specific icon) and no-repeat to populate your site with icons.
This way you have consolodated your graphics into image collages.
October 25th, 2007 at 8:52 pm
Great Article,…
… and you seems to have provided the benefits of using a single image…
However as a designer,… and dealing with optimizing images for the web daily,… I must say that this option is limiting,.. because I have to chose one format for both states which may not necessarily result in smaller file sizes… with 2 images for the respective states, I can now have each image saved in the format that generates the best results with the smallest possible file size:
e.g. yaprak_bw could be in gif/jpg/png (whichever generates a smaller size)
cheers
December 20th, 2007 at 3:50 am
this is a great way to decrease the potential for javascript conflicts as well…thanks for the simple explanation
December 26th, 2007 at 1:13 pm
cool
January 7th, 2008 at 9:28 am
Amazing technique. I changed one of my buttons as soon as I read your article because my button was noticeably slow to load on hover. Now it’s smooth running!
~David
January 17th, 2008 at 7:23 am
i’m a newbie blogger and i’m still learning stuffs like CSS. I’ve learned from your post. keep posting tutorials like this and people will come back to your site more often. :-)
January 26th, 2008 at 4:23 pm
Great, i never saw a simple explanation of this technique.. Thanks
January 30th, 2008 at 10:11 am
Nicely explained, congrats.
July 9th, 2008 at 1:07 pm
is there a way for it to display inline?
when i change block to inline, it does not work
is there a way around this?
July 15th, 2008 at 10:06 pm
Wow, thanks a lot! Decreased my file sizes by 118 kb using the single image version. :D
August 7th, 2008 at 8:40 pm
am i a lil late here? nevermind. but here i’ve found what i’m looking for. thanx for the useful tutorial man. ;)
August 14th, 2008 at 3:14 pm
Better to be late than never! This is a gem of an idea. Not totally foolproof as lawrence points out, but very useful none the less!
October 12th, 2008 at 8:37 pm
Hello again. I created more than one image (here: eminelle.com) but it doesn’t work if viewed with Internet Explorer (IE). Do you know how to solve it?
Thank you.