Slicing an image for faster load times? How?

[ArcticFox]

Call me a n00b, but I've noticed many sites use tiny images to make up one big image so it will loadmore efficiently, usually with logos. How do you do this, short of making each individual section by hand in Photoshop?

[davidamarkley]

Use the 'slice' tool in Photoshop.

I wish I had more time to tell you about this tool, but it's late and I need to get to bed.

I'll tell you the basics, and maybe expound on this info if need be...

Use the slice tool to split up your image(s) in however many sections you want, and however you want.

Then do a "File > Save for web..." and save it as .png, .gif, or whatever file format you want. Then click "Save". The dialog box will come up asking for the file name to save it as, and it will end with a .htm/.html. You want to save as type "HTML and Images (*.html)"

Then click save. It will save an .html page with the table coding for the picture, and then create a folder called 'images' for all the images to be stored into.

HTH,

David

[lost-and-found]

does slicing have any effect on loading times? When you download a web page, you usually download at a specific bandiwth, so when you download 2 things at once the bandwidth is halfed for each download (in an ideal world 50-50). Wouldn't it then take the same amount of time to download the full one slice image as one image composed of two or more pieces? It's still the same amount of data that you have to acquire just split into multiple sections, right?

I find slices useful when you're working with tables, but I never thought of them as making the image download faster.

[davidamarkley]

Yeah, it would take the same amount of time, as long as the total size of the images to make up the big image were the same size as the one big image without the slices.

In other words, as long as they're saved in the same format/quality you won't notice much difference in the loading times.

That's an interesting point though...

Might have to do some testing just for curiosity's sake.

David

[OuTpaTienT]

Slicing is useful to help deter people from stealing your images as well.

[davidamarkley]

It's kind of like stealing a puzzle that's not put together yet, huh??

Slicing is also a nice way to put links smoothly inside of pics without having to have an imagemap or some other complicated way of doing something.

Hope this helped you, AF...

David

[ArcticFox]

Thanks for the help, but here's one example where it would assist loading times:

You have a half circle, just a thick line that's curved. To display it, you would have to create a square image, and 80% of it would just be blank, wasted space where the line wasn't. With this method, you download little chunks of the image and in total would make for shorter load times? See what I mean? Maybe OuT can back this up a little clearer.

[davidamarkley]

Well, there's a couple flaws in your theory...

1. Even though you're slicing the image into smaller chunks, there will still be those images that were used to make a square shape when you put all those slices together.

2. The image data for the transparent/solid color background of the half-circle image would be the same color/hex value. So, if you saved it as any kind of compression format, such as .png, .jpg, .gif, etc. then it wouldn't really save all that per-pixel info for the big blocks of color.

Very Simple Example:

You have a 100x100 pixel square with the left half of the image being black and the right half being blue.



So, instead of the file basically saving per-pixel information like this:

[x=1, y=1]#000000;
[x=1, y=2]#000000;
[x=1, y=3]#000000;
[x=1, y=4]#000000;
[x=1, y=5]#000000;
[x=1, y=6]#000000;
[x=1, y=7]#000000;
[x=1, y=8]#000000;
[x=1, y=9]#000000;
etc.

It can save block info like this:

[x=1-50, y=1-100]#000000;
[x=51-100, y=1-100]#0000FF;

The bigger the blocks and long strings of the same color, the smaller the file can be.

So, at least in this case I don't see how you will save loading times.

And then you can get into the area of how browsers load. Some load sequentially, and some simultaneously.

If yours loads sequentially, then the images will load the first, then second, then third, and so on. That can sometimes take just a minute fraction of a second more than one big image of the same size.

Or, if yours loads simultaneously, then it will try to get everything at once, some browsers have a maximum number of connections at any one instant, so it may take a while to download all the little images that make up the one big sliced image. Also, if you are on dialup, then the loading times for a sliced image can be more than the loading time for one big image of the same size, because you have to remember one constant.

There is always a lag from the time that the browser opens the .html page and then sends a request for the image "X.gif" to the time that the request is granted. And the greater latency between the client and the server can aggrevate the delay when downloading several small images to make it more of a wait then one big image that would be downloaded all at once with only one connection delay needed.

I hope you can understand what I'm saying, if not just PM me for more info...


HTH,

David

BTW - Yes, I know that pictures don't save themselves in this sort of fashion, but I'm trying to make a point and a simple one at that!

[ArcticFox]

OK, here's a diagram of my theory:



I have an image that's 60x60 or whatever, but it's just a line running down diagonally. Theirs a lot of wasted space, because of the nature of the picture. Now, see how I made little boxes all along that line? Imaging each of those little boxes as seperate images. Their tiny, not huge like the big one. Sure, they have a little space wasted, but who cares?

Can you get what I'm saying? All those little images combined make up one line, the same as having one big image with a lot of white space!

[davidamarkley]

Ok, I had something else in my mind. I gotcha...

Also, I forgot to mention that there are ways to make the sliced image actually take less time to download, for example when you're making a header for a web page. You can change the compression/quality settings for the different slices individually, so parts with text or images or links you could have a higher quality, then where it's a simple design, or solid/repeating color then you could have it set to a lower quality.

David