Use CSS to reduce image HTTP Requests.

Today when we analyze web pages we commonly see 50 to 60 images per web page. The more round trip server requests you require in your pages, the longer your load time becomes. One way to reduce the number of HTTP requests is to combine adjacent images into one composite image and use CSS background position to show the correct part of the image in the provided space of a div, span, or other HTML elements.

Yesterday I took some time out to see if I could use this method on Artician, turns out it works fabulously. Here's what we got:

The image below is saving every page load on artician 15 HTTP requests. All rounded corners on Artician used to be composed of individual images top left, top right, bottom left, bottom right, and then called into the CSS. Even when an image is cached the image location is still checked and sent back to the browser. So here we have one image that's not even 1kb than contains 15 rounded corners used for various containers on Artician.

Rounded Corners:


Then I use CSS to make sure each rounded corner is being displayed in it's appropriate area for example:

CSS Example (Only top 4 corners)
Notice! they are all using the same background image, but I'm using a negative background position to hit the right spot on corners.gif.

Top left corner is using a basic CSS background position of "top left" which is the very top, and very left of the image.
Top right corner is using a background position of "right -6px" which mean all the way to right, but -6px down on the image.
Bottom left corner is using a background position of "left -12px" which mean all the way to left, but -12px down on the image.
Bottom right corner is using a background position of "right -18px" which mean all the way to right, but -18px down on the image.
The other CSS you see like "height:5px;" and "margin-left:5px;" are not effecting the background image, only accounting for the way I setup my rounded corner containers which can be see here. (view source for HTML and CSS)

Keep in mind: the CSS above has all the background properties in one declaration for optimization
The following CSS is using separate background declarations:
[code].outer_tr {
background-image: url(/images/layout/container/corners.gif);
background-repeat:no-repeat;
background-position: right -6px;
}
<!--c2--><!--ec2-->

So there ya have it!
Combine all your little itty bitty images on a site, and let CSS do what it's got to do. This method has been tested in FF2, IE7, IE6, Opera, and Safari

Here's another example being used on Artician:

Networkbar Icons:


And the CSS...
[code]#quick #user span {background: url(/images/layout/network_bar/icons/all.png) top left no-repeat;}
#quick #submitwork span {background: url(/images/layout/network_bar/icons/all.png) left -15px no-repeat;}
#quick #usercp span {background: url(/images/layout/network_bar/icons/all.png) left -30px no-repeat;}
#quick #customize span {background: url(/images/layout/network_bar/icons/all.png) left -45px no-repeat;}
#quick #search span{background: url(/images/layout/network_bar/icons/all.png) left -60px no-repeat;}
a#logout {background: url(/images/layout/network_bar/icons/all.png) left -75px no-repeat;} <!--c2--><!--ec2-->

Hope this is helpful! It really was for us, we already saved a total of 23 HTTP, and I got plenty more to do. The main page (logged out) went from 92 HTTP requests to 69.

Thats so cool Eric! I didn't even know CSS could do that!

Eric should write a book on CSS. It would be a best seller. lol

Haha thanks guys!

wtf h4x! Eric is a genius.

That's great Eric, I'm sure I'll use this somtime!
Thanks!

You use the same technique for hovers and stuff right?

Yessir.


Haha, thanks but the only genius's in here are Akujin, and KnightAR - PHP Masters!

Damn I've never thougt about that kind of extensive use with bg-image positioning. Noiice eric, really. Proud of ya!

Ha, thanks my CSS brother

Haha props : D
Very clever man.

Thanks kman

there is a name for this methods "sprite css " or image mapping

change from


replace with


note: there is a cross browser bug with background position using "alpha numeric value" ie ( top -6px or 40% left ... ) its better to used absolute prop like 0px 2px, 50% 40% or center left;


-- should be


the default background position is always set at" top left "(0px 0px) coordinate so no need to set .outer_tl. hope this will help others write better code and understand CSS inheritance.

This is awesome. I am doing my first site with round corners and am only now starting to get into CSS properly. Thank you so much for this guys. It is going to be a huge help.

Thanks for that tutorial! Its a great help ~