Example: http://www.leaperrins.com/about.html

Doesn't it take longer to load up fragment by fragment, than to just display the whole picture?

i believe if the image was one big file, it would load up very slowly, getting unblurred as it loads. as fragments, each individual picture takes a very short time to load and i guess "bursts" to load faster.

I have seen some sites do this in an attempt to prevent people from stealing their images.

The reason I slit some images is because I want to make some parts of it clickable (hyperlinks) and sometime evern use JavaScript mouseover. This way you only load the part that needs to be changed instead of loading another big image for each mouseover.

But I also agree with CJB, it could be used for that as well.

Consider there are 1000 people accessing the server at any given minute. By splitting the images, these people can start downloading portions of the images files when those files are ready for them to download. This way, people will be able to see parts of the image and might know what it is even before all of the parts are downloaded (kinda of looking at incomplete jig saw portrait... you can fill in the blank)

If the image is one single file (and usually big) then everybody has to wait until this file is ready for them to download or the files will be downloaded very slowly, from top to bottom. Harder to picturize what the full image really is before downloading all (or most) of it.

cheers,
:beer:

I always do this now. I create my layouts and then hack them all up in Fireworks, what this does is take a single image that is usually around 50k+ in size and distribute them into fragmented images that are usually between 3 and 12k in size. Kind of like using thumbnails, it just gives a faster view of what's coming. Overall, I think it works much better, rather than watching one image loading on your screen. I see some people do this though with no use of image size tags, this makes the pieces jump all over the place until it's done loading. Like Zolbian said, it's also useful for javascript and if you wanted to animate a section of the image.

Also keep in mind doing this can sometimes save file size as one part of an image might be better as a gif and the other a jpg. Splitting them up will allow you to thus reduce the overall size. Another reason would be to reduce each areas color pallete to reduce size.

-BW

Originally posted by dektong
[clip]
If the image is one single file (and usually big) then everybody has to wait until this file is ready for them to download or the files will be downloaded very slowly, from top to bottom. Harder to picturize what the full image really is before downloading all (or most) of it.

cheers,
:beer:

What are you trying to say here? Are you trying to say that Apache is unable to serve the image to multiple processes simultaneously? That is absolutely not true on any standard unix implementation.

Multiple threads to a file for read only access is a very common occurance. If it were not, the entire system would be unusable with 10 processes running.

-t

Yeah, that sounds very wrong dektong. People waiting for their turn to download an image from a website? Unless you mean that you're going to run out of bandwidth, but still that wouldn't make much sense..
:confused:

Yea... I guess I might be totally wrong... But it's not the problem with Apache that I am thinking, but the problem with the HD. Anyway, let me think about it more... I guess I have been thinking that this was the reason :emlaugh:

cheers,
:beer:

What programs do you all use to split graphics? Is there a program that does it automatically?

Also how small should you make each fragment? like chopping em down to 1k to 3k each is good?

I use Macromedia Fireworks to do all the slicing. The size of the image usually depends on how I want it to fit into the layout, what areas I might want to edit easily later on, etc. The more simple sections i'll usually reduce the colors for and keep the complex parts a higher quality. I've been using this method for a while and find it easier to design the site as one image in Photoshop, slice it up in Fireworks, then add the effects using Dreamweaver.

Originally posted by dektong
Yea... I guess I might be totally wrong... But it's not the problem with Apache that I am thinking, but the problem with the HD. Anyway, let me think about it more... I guess I have been thinking that this was the reason :emlaugh:

cheers,
:beer:

The image comes off the disk much faster than Apache can send it over the Internet. If you have a number of simultaneous accesses, the image may even be cached in the disks read cache...

-t

Originally posted by lowblow
What programs do you all use to split graphics? Is there a program that does it automatically?

Also how small should you make each fragment? like chopping em down to 1k to 3k each is good?
I use ImageReady. I personally don't chop graphics unless there's a compelling reason (like JavaScript rollovers or the aforementioned making part of the graphic jpg and part gif to save space overall).

its simple. Speed.. its faster to load a 100 smaller things rather then one big image :)

Originally posted by kunal
its simple. Speed.. its faster to load a 100 smaller things rather then one big image :)

Aha... I was on this line of reasoning, but right now I don't really see the reason... Can you explain why this is so, Kunal? I was thinking that the HD may be saturated if it has to handle thousands of request (at the same time) for a big image file at than if it has to handle thousands of request for a smaller image files (again, still at the same time), but I don't see why this is the case :(

cheers,
:beer:

I was always under the impression that a single image would load faster, but lots of smaller images gives the impression that its loading faster (because you can see the image start to take shape sooner).

There are exceptions of course, such as BW suggests, when a split image might load faster.

In terms of web servers and hard drives, don't you get some sort of overhang on opening a file, no matter what its size? If that was the case I'd be thinking retrieving lots of smaller images was slower. Although perhaps multitasking makes it better to have lots of smaller images.

Conclusion: I don't know. Just some ideas :D

Lets say if you split a 100kb image into 20 smaller images where each one is 5kb. To me this sounds like your server has to open/close 19 more files which I would guess takes more CPU. Also your webserver has to handle 19 more requests and add 19 more lines to the LOG file.

So, would this really increase the download speed or is it just how it seems? Instead of splitting it up every time I suggest in PhotoShop you choose "Save for Web" and set it to use as little colors as possible without having the picture look bad. You can also try saving it as JPEG (also here you can play with the quality) and see what file size you get. Then take the best one. From my experience you can save 30%+ this way (depending on the image).

I believe some people will split images down to use them for multiple purposes, take for example Microsoft
On their site the split everything down to small images, an example below

Win.jpg, dows.jpg, 98.jpg, 95.jpg, nt.jpg, 2000.jpg

once you have downloaded each of the segments they are simply patched together in different sections, thus meaning you are going from cached images instead of seperate images all the time.

Splitting images down makes certain parts of the image re-useable.

Just my personal opinion, tear me apart on my inaccuracies if you like :)

Actually there's a lot of reasons for splitting images and quite a few are already covered. :)

Yes it does increase the 'illusion' of load. Seeing a lot of small images load one by one makes you feel something is happening faster than watching that whopping great image load.

Some sites are built from one single image. All navigation, headers etc are created as a single file then split up. Not a bad technique to get a good over all look to a site - can be annoying if changed are needed after the image is split though.

gif Vs jpg: A good example is a photo of a person surrounded by a circle or pattern etc. Solid colors should always be gif while photos should be jpg to lower load time. Sometimes if a photo had a lot of solid color areas it can be converted to gif all but important detail areas (such as a face which the human eye picks errors from easily).

whitespace: If the site design has areas of whitespace the same color as the background it's pointless loading a solid color graphic over it. I just gets deleted from the table or at the most is replaced by a 1x1pixel transparent 'shim' graphic sized up to fill in the gap.

reusables: Often things such as logos and background colors can be used throughout a site over and over. It makes sense to cut them in a way that it's easy to just point to the same file later in a site. As it should be already cached in the browser it'll be an 'instant download'

Another reuseable trick is to use the same body graphics in different circumstances. A section of a header that has a great top half that would look good as a footer table background can just be used again on the same page. If the file has 'rubbish' in the bottom half, not a problem - just make the table cell itself half the height of the image. The bottom will never appear as it's hidden below where the table ends. :)

web design uses a lot of 'trickery' to increase load time and some slicing makes no sense when you first look at it. In some cases it may even appear to slow down the index page. Usually the designer is just being sneaky and building content that is used later on (or even on the same page). It's also one reason many DTP people have trouble moving from print to web.

Greg Moore

Wow! Excellent replies. This will help me alot.

Thanks guys!