~ overflow ~

Problem:

When you need to build up a page with lots of little images , like the borders, gradients, different backgrounds , slideshows etc. All into the same page.

You probably will have lots of images on the same page, specially if you cut them to save much bytes as you can, however, you might fall into a different issue:

Too many images will make the load slow as well, since browser will open only 2 connections at same time with the server (every connection takes a while to actually start downloading something since it needs to go thuru all the hops and reach the server etc etc), meaning that all that nice optmization you did worth nothing since you got lots of images.

No good!

Solution:

I’ve seen this only one time at fleXcroll script, and many times on old games textures.

The technique used on both is the same, although might not ring a bell for you it’s pretty simple to use, a little complicated to add on css, but will do the work.

picmap png file zoomed

This is a zoomed version of a picmap (I don’t really know a formal name for this that’s how i will call it) png I did, you can see it got transparency and stuff.

The different colors and green lines are just to highlight the different images i merged here, they will be used all in background at the css, meaning that i can have the position easily set.

As you can see on the bottom there’s 2 huge blocks, this is for the horizontal repeat, since i can’t define a fixed area on the image for the browser to pick as pattern for repeat-x (for example) I need to do this. You may think that it would be a waste, since usually, you can do a 1px width image for this type of thing, however, when you merge pictures toguether you’re not only saving the connection delay time, but for some image formats you have a header on the file or a color index that, when merged, became smaller than the separated files.

In the original 2,65kb png, I managed to merge 17 different pictures, that separated were 4,79kb, and yet you can see that there still some space left to add more things if i wanted to.

The css for the top circle (which is actually 4 corners) would look like this:

.bB,.bC,.bD,.bE{height:9px;width:9px;font-size:1px;}

.bB{background:url(img/b.png) 0px 0px;}
.bC{background:url(img/b.png) -9px 0px;}
.bD{background:url(img/b.png) -9px -9px;}
.bE{background:url(img/b.png) 0px -9px;}

Note that all the positions are negative.

Depending on the usage of your picmap you might want to have repeat-y’s for example, so you need to rethink the layout in order to take maximum of it.

For me, i only have repeat-x backgrounds, so I broke it in different formats, gif, png and jpg, doing that I could take the best of each.