Why should i slice/cut large images

advice please

[Andrew Thomas]

I have a top static banner which I want to show on every page of the site.

I have optimized the banner but it still indicates it will take 7 seconds to appear using a 56k modem.

I have the option to slice the images into pieces.

Does this actually speed up the download process? As the images put together still amount to the same size? so whats the point?

thanks

[ggrot]

Generally, the space savings is highly dependent on the image. You add extra size to the total files by having each one need the image header, instead of just one of them. However, by slicing you might get some of your images to require only 1 or 2 colors to look acceptable, which would reduce the size of that image. I've had a photo once, where there were two sections that needed a good bit of resolution on either side, but the middle could be blurred enormously without losing much. Slicing it into three shaved off a few kb in the final process.

[Andrew Thomas]

thanx....

all though my image is complex all over, so I guess im stuck with the 7 second dowload time??

Its the main header, and on every page (not using frames) is there anyway at all of reducing the size further - as I see more complex header designs on sites which appear instantly on my browser. Its a jpeg and has been optimised using photoshop 6..

any ideas or tricks to reduce the overall size??

[tedster]

> Its a jpeg and has been optimised using photoshop 6.

Did you use "Save for the Web" or just the standard Photoshop jpeg save? "Save for the Web" has much better compression algorithms for screen display, and it often can compress further and still look good.

This option really exports to ImageReady where you have more control, including the possibility of weighting the compression higher in one area of the image than in another area.

[cntrymannj]

There is many of things which you can do to lower the kb for your image. First of all, what did you optimize at? when you saved as a jpg it asks you how high of quality you want to save the image at. The higher the resolution the higher the kb. Try and save at a lower number and see how it effects the look of your image.

[mivox]

Depending on the style of your graphic, you may see a size reduction by saving as a GIF...

But slicing a graphic is generally best done (IMO) with very large images, to give the illusion of faster loading time. Since the individual "chunks" of the graphic will load fairly fast compared to the whole, seeing the pieces loading gives the site visitor the feeling that it's going faster than if they had to wait for the whole image to load at once. There really isn't a size saving.

(edited by: mivox at 9:08 pm (utc) on Feb. 25, 2002)

[tbear]

At the worst your visitors need only wait once if you always load the same file, i.e. save always point to the same file in the same folder on your server. That way the file gets taken from your cache after the first viewing. I believe....

[Marshall]

Since a browser is capable of reading and downloading multiple images, slicing can improve time. I do it all the time. And as tbear pointed out, it should only happen once. You just have to be careful pasting it back together. What's important is that the visitor see something other than a blank screen. Even a colored cell is better than nothing.

[mivox]

downloading multiple images, slicing can improve time

True, it can improve time to download that specific graphic... (assuming you have a faster internet connection than I have at home ;) ) But slicing doesn't reduce overall page or image size.

If you slice a 20K graphic into 10 pieces and reassmble it within a table, your page size will increase because of the extra code reuired to call all ten images and load the table... and the overall graphic size may also increase, even if you just add up the individual slice sizes.

Personally, for a page header, I generally do a header table with a logo graphic and navigation buttons/secondary images... and place them all in a colored table rather than having an actual graphic for the entire header bar. It's been a very long time since I used any graphics large enough to bother slicing them.

[Andrew Thomas]

Thanx for all your comments....

I have been 'using save for web' and the best I can get away with is saving it on 'medium' before the image looses all its quality.

Although I havent tried it as a GIF, I also didnt realise saving and linking it in the same directory would speed up times as it is in the cache, so thanx again for all your help

[tedster]

> the best I can get away with is saving it on 'medium'

The ImageReady interface (which Save for the Web takes you to) lets you control the exact percentage, as well as the more general "medium" setting. Every single percentage point doesn't make a difference in the file size, but there are many precentages that fall within the "medium" range and you may be able to improve your results that way.

[Andrew Thomas]

Oh, I didnt realise I could change the % within the 'medium' option, thanx that will probably do the trick....

What do you think is a reasonable download time for the users to wait. I try to get it under 4secs, my site will have more images than text!

[tedster]

If your visitors see a scrollbar and content after only a 4 second wait, then you're doing much better than most sites I visit these days. Very few sites seem to pay attention to download times - I regularly see 100kb to 250kb total page-weights.

My target has been 40kb-50kb for several years. I still find that is the sweet spot.

Because the overweight page is so common today, the window for the bandwidth savvy website has been opened wider. I say, take advantage.