A huge image..

[Nathan]

I am working on a website for a customer and he is insistent about this giant image (it is a menu for the restaurant) being on the site. I told him that it wasn't a good idea to have an image this big on the site, but there is no arguing that point. So I was looking for some tips on how to speed up the load of a huge image such as this (best file type, any preloading tricks, etc).

 

[Premiere]

• How big is it?

• Can you convert to JPG and reduce size?

• Have you tried showing it as a thumbnail then allowing user to click on thumbnail for full image?

 

[Zepia]

Slices with GoLive perhaps?

 

[nasaboy007]

Slices with GoLive Photoshop perhaps?

FTFY

I would advise slicing, even though it would probably still be the same filesize total.

 

[Nathan]

• How big is it?

• Can you convert to JPG and reduce size?

• Have you tried showing it as a thumbnail then allowing user to click on thumbnail for full image?

This is the image: http://themonkskitchen.com/Images/Images/Monk Menu 2.jpg

Thanks for the input so far. I don't really see how slicing it would help...

 

[Gene]

First of all, the image needs to be reduced in size at least enough to prevent having to scroll side to side. I'd recommend 760pixels wide. Possibly cut the menu into three sections as it is laid out. If they insist on using it full size, you need to at least reduce the file size for faster loading. The image right now is over 6 megs. It can easily be reduced to under 1 meg without losing too much quality. I've attached a reduced file size of the menu below. This is 913kb.

 

[Nathan]

Gene, you are amazing, thank you so much! How exactly did you do that? Just save it with different settings in Photoshop or something?

 

[Gene]

Gene, you are amazing, thank you so much! How exactly did you do that? Just save it with different settings in Photoshop or something?

You're welcome. I did it in ImageReady CS2. Any graphics software that lets you control the file/quality settings will do it.

 

[Premiere]

Yep that's what I was thinking, file too large just modify output in any image editor. Under 1 meg should be a reasonable size for most web services.

 

[Zepia]

Have you tried to save it from "save for the web" on ps3?

 

[weblord]

it's so huge even the loading is very slow
you may do this, left that image untouched.
create another one or turn that one into .gif
make sure you use enough like 256 colors or optimal colors
then slice it, put those 2 images on different .html page and upload them
show your customer both pages and let him/her compare the loading times of the images, same images/presentation but the second you've optimized will load up faster.

then he can make decisions.

 

[gjvblack]

Try using PNG (as long as you have a fix for IE users) or GIF with Photoshop. Stay away from BMP and if it a very big picture, possibly JPG would be your best chance. Or save it as a good quality but not too high.

 

[Ross]

Honestly what gene has suggested would be your best bet. None the less he has condensed the size for you already. Breaking the menu up in to 3 parts and then putting them on different pages might not be a bad idea. Use flash to "flip through the menu". Make a cover for the menu and i think this might work. Or you could just ignore my ideas lol.

 

[Gene]

Just an additional note: I tried converting it to the other formats: GIF, PNG, etc. but in this case, JPG still won for smallest file size with a decent viewable quality.

 

[Ziggery.com]

I would still make the one Gene did smaller in dimensions and put a link to the full size converted image underneath it saying something like" Click here for full size menu" or something like that!