We all know about using one image and CSS to create a rollover button, and I was thinking about that last night and I got this idea. What if the entire website was made using one image. Put all the background images you are going to use for a site into one image. Then using the CSS attribute background-position you could set the X and Y coordinates for the particular image you wanted. It would be like a big image matrix for the entire page. So the question is would loading one image for the entire page be faster then loading each individual image separately? As far as the code it would not be any more work to code something like this, it is pretty simple. Say you had a div container that needs a background image you would just add the background-position to the class like this:
.container
{
background-image: url(/images/main.png);
background-repeat: no-repeat;
background-position: 100px 50px;
width:100px;
height:35px;
}
The first number value for the background position is the X coordinate (the horizontal position) and the second value is the Y coordinate (the vertical position). You would just have to be sure to set the width and height for every image. I will have to try this some time and see if it is faster then loading each image separately. I have a feeling that it probably isn’t faster, but who knows maybe I will be surprised.
November 21st, 2008 at 9:32 am
It isn’t faster. At least, not enough to warrant that sort of labor. It’s true that loading one image is easier on the browser, but the overall filesize of the image grows exponentially with each addition. And it gets even more complex when you have transparent PNG images. A large PNG image-map would be huge in filesize, and the only alternative is to use GIF’s (again, rather large and very poor quality for broad-range images), or a JPG (no transparency). And if you’re like me, you use different image quality settings for different images. Some should be higher quality, some really don’t need to be at all.
It’s too complex of a system for the very small amount of load reduction it yields. I don’t recommend it, but there is no harm in doing it if it suits your purpose, I suppose.