Web Hosting Talk







View Full Version : Image optimization and Image Maps


jinca
01-01-2006, 02:35 PM
My site is image based, a photoshop image sliced in Image Ready, edited by hand and with Dreamweaver. The images load in about 4-6 seconds on 230Kbps broadband connections, and I am currently optimizing them for size to reduce the initial download time. A few questions about this process.

I have heard that each table cell should have something in it to make the table stable, basically that there should be no   definitions in the table cells. Is this true? If I define the height and width dimensions for each table cell in pixels, do I need to put a spacer image in the cell? Also, is it enough to put a small spacer image in the cell that matches the cell width but not height, or visa versa. And is it important to have a spacer image which fully fills a cell, (has the same dimensions of the cell), in certain parts of the table, for example on the top cell or far left cell? Would these 'foundation' spacer images act as a foundation for the other cells on the table, which could have no image or small images? How solid is a cell if it has no contents, but its height and width dimensions are specifically defined?

Where I am going with this is, in cells with just color spacer images, can I define the cells background color, and use a small spacer image or no image, and therby save on the download time for my site?

Also, what are the optimal quality settings for color and text gifs, ideally as shown in Image Ready, for my website's images. What is the limit on the size of the images folder that I should aim for, so that broadband viewers will have a quick initial download of the site, and dial up viewers will have a tolerable wait? Also, what, in your opinion, is a tolerable wait for broadband and dial up. My site is for pretty tech and video savvy clients, most of whom (I think?) have broadband connections, do I need to worry a lot about dial up download time? Can I track the modem speeds of the viewers that are currently visiting my site? If a broadband user gets info at 230Kbps, what is the equation to figure out the size of the images on the page in relation to download speed in seconds?

Someone suggested that I create an Image Map of my image heavy homepage, to reduce the initial download time. Do image maps work well on all browsers? Does one type of Image Map work better than another? Any suggestions of a good tutorial website on image maps? Is it a good idea to make an image map of the site, are there problems with them? I made a test one yesterday and it looks like it could work visually.

Also, I have some images in my site of video gear that should look as sharp as possible. Does it make a big difference to use JPEGs for special images?

Thanks for the help.

bluedreamer
01-01-2006, 04:59 PM
You don't have to have content in a table cell to make it "stable" so long as the browser knows how to render height and width + number of rows/columns.

Some people use a transparent .gif image as a spacer image, personally I have never seen the point of this because if your html table is correctly formatted then there is no need for them.

The optimal file sizes for images will vary a lot. With gif images you only get deterioration if you remove colours. If you make a gif image with 256 colours and optimise it to 64 colours you will lose some definition. The trick is to make your gif files with the minimum amount of colours in the first place.

With jpg files it very much depends on the quality of the orginal. Very high resolution images often be taken down to 50-60% witn no visible loss, snaps from your average digital camera certainly no less than 75%. Personally I usually do jpg's to 90%.

At the end of the day you have to play with your image editor and do a trade off between quality and download time.

Interesting question about broadband waiting time tolerence. As I see it there's no difference between dial up and broadband here - if the user see's nothing happening in 3-4 seconds and there is no useful content on display after 15 seconds then they will go elsewhere.