image size and download

Something I've been wondering about ... if I have an image that's, say, 60Kb, do I gain or lose anything by chopping it up into three pieces that are 20Kb each?

Another way of asking the same question is: Are images downloaded simultaneously? Or is it just the total number of kbs that need to be downloaded, one way or another, and so it doesn't really matter how you slice it or dice it?

I'm assuming that all images are already optimized, and that I won't gain anything by chopping the image along color lines so as to make the sum total of the optimized chunklets smaller (that would be cheating, and it wouldn't work in my case -- I'm building an html shell that will contain an image (or sub-divided image) that hasn't been created yet.)

Does this question make any sense? Please tell me if not and I'll clarify.

Thanks

It depends upon the browser.

Can you be more specific? If I understood the issues a little better, that would help.

I vaguely remember reading somewhere that cutting big images up helps a little bit, but I've never really investigated, so I can't speak with much authority.

Psychologically, however, a series of smaller pics loading in a more-or-less staggered pattern can feel faster than having to wait for the whole image to show up (kinda like interlacing, but not as ugly).

try for yourself

the top image is whole. the bottom one is split into 3 vertical blocks.

i find (on my 600k DSL) that the bottom one loads block-block-block (each block quite fast) whereas the top one loads all at once but takes longer....

The whole point of slicing your image is to keep the viewer's attentio while your page loads. If you have a large image on the top of your web page as a single image, viewers are more likely to exit your site rather than wait. The same applies for object placed on a web page, including SWF or flash animations, that's why they have preloaders. You can include a preloader page that takes you to your main site within 60 seconds, which give the page with the large or many images to load completely

There are some sites that load a large image first while the rest of the page loads. It is better to cut up a large image into 3 seperate images because they will see 2 (20kb) images before they would have even seen the 1 (60kb) image. But 60kb isn't even that big to worry about. Not too many people use a 24kb modem anymore to browse the internet. Most sites aren't built for them anymore either. Just don't try and cram up your site with 50 seperate 20kb images

Thanks everybody, that makes sense: it's more interesting to watch a few small things happening quickly, than one big thing happening slowly.

Depending on your point of view, of course.

In addition to all this, everyone should get an image compression application, that reduces the image file sizes XAT.COM has a few really great ones.

Note that most surfers can see JPG and GIF not all surfers can see PNG format (which I like the best) however if you embed images in flash it doesn't matter what format, everyone can see them, you need just worry about the size of the flash file, for this I exclusively use PNG and compress them to death, take a look at an example here:

www.bridetobeinfo.com a Flash into with a 68 page website which is a magazine, in which I had to compress all the images.

Two or three aditional comments:

1) For large images you can also have the image load in passes. For gif this is known as interlacing whilst JPEG call it Progression. This means that the image will load a low res version first - quite quickly, and then load succesively higher quality versions of the same image afterwards.

2) Slicing images really comes into it's own to optomize a large image according to complexity. Say you had an image with a simple background but a complex subject. You could cut it up and use heavy compression for the simple bits and lighter compression for the complex elements. This would lead to a lower file size overall than if you just applied one compressioon setting to the whole image. It also means you can keep certain parts of the image crispy sharp. This technique is used by apps such as Image Ready and fireworks and can be used to design an entire website. eg my lame homepage at www.xset.co.uk

3)

I disagree, with the rapid proliferation of moblie internet browsers (PDA's, smart fones etc) I think web designers should really look long and hard at every image they put on a page and ask - is this really neccersary? 60kp takes no time over DSL or even 56k dial up but over a GPRS connection it will slow a page right down - as well as using up valuble bandwidth which costs money. After all, there is a very good reason browsers like opera let users "turn images off"

Icy