Using Fewer Images
Image 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 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.
January 5th, 2007 at 4:29 pm
magnetiq.com » Blog Archive » Using Fewer Images…
…
February 1st, 2007 at 10:17 pm
[…] magnetiq.com » Blog Archive » Using Fewer Images image rollover trick with only one image (tags: css webdesign) […]
March 25th, 2007 at 7:01 pm
[…] I recently found Ates Goral’s article on how to use less images on your webpages. His article highlighted how to use the background-position attribute in CSS when you mouseover an image to change the position of the background image. This forces site visitors to only have to load a single background image and CSS will just change the position. When you use his method you will still have to create two images. One will be in black and white, and the other in full color. […]
March 29th, 2007 at 2:35 pm
[…] CSS Trick: Using Fewer Images […]
April 16th, 2007 at 5:57 pm
[…] Using Fewer Images with Image Rollovers In CSS […]
May 1st, 2007 at 2:52 am
ah ah az mi sprite bob kaydirdik
simdi webde kaydiririz nedir ki…
kaydir.
May 6th, 2007 at 9:59 am
[…] CSS Trick: Using Fewer Images […]
May 22nd, 2007 at 2:49 pm
[…] ?ашел в ?ети ??ылку на по?т буржуй?кого блога, опубликовавшего заметку “Using Fewer Images? (и?пользование меньшего количе?тва изображений). […]
June 11th, 2007 at 4:12 am
Using Less Images…
[…][…]…
June 11th, 2007 at 4:20 am
Using Less Images…
[…]Image 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 image offsets…
June 11th, 2007 at 5:07 am
magnetiq.com » Blog Archive » Using Fewer Images…
[…][…]…
July 1st, 2007 at 7:29 pm
[…] CSS Trick: Using Fewer Images […]
July 10th, 2007 at 7:21 am
[…] CSS Trick: Using Fewer Images […]
July 10th, 2007 at 3:09 pm
[…] CSS Trick: Using Fewer Images […]
July 27th, 2007 at 11:37 pm
[…] Using Fewer Images (for rollovers) Image rollovers are usually composed of 2 images; one for the default state and one for when the mouse is hovered over the image or link, it’s advantageous to use a single image by taking advantage of CSS image offsets, a trick for optimizing your website. […]
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 11th, 2007 at 10:47 pm
[…] CSS Trick: Using Fewer Images […]
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.