Preserved Topic: Resizing Images - Maintaining Quality

What would be the best way to scale down images while maintaining optimum quality for the web?

Our website (75% of our newspaper online) has a large amount of graphics and I would like to reduce the load time without losing the graphic integrity.

As it stands, I convert my images to indexed color and then use the save for the web feature. Dependant on the graphic (photo or line art) I reduce my colors appropriately. Seems if I go lower then 128 for photos they start to lose a large amount of quality.

Any help would be appreciated.

Photos should almost always be saved as a .jpg file. I would not index the color on photos. However a different option would be to offer an indexed color .gif thumbnail image that is a link to a larger .jpg file (maybe a .jpg pop-up window?), this would reduce the load time, and it would give you viewers the option to see the photo. Not everyone reads by pictures.

Thats probably one of your biggest problems.. if you are saving in indexed color mode, that usually means you are saving the file to a .GIF format. A photograph, however, is much more suited to the JPG style of compression, and your file sizes will be considerably smaller if saved at a medium jpeg compression, such as 50 or 60.

that all depends on the tpye of image.

few colours/sudden transition images such as llustrations/pen work should be fine using few colurs and an indexed colur format (i.e. Gif format)

photographic/gradiented colur transitions will usually be best optimized using the jpg format.

As to your specifics it is hard to say not knowing what type of graphics you are trying to optimize?

Things that could help you would me to minimize your dpi. The less dots per inch the smaller the file size and hence the quicker the download time, *however* its a balance.. fewer dots per inch (dpi) will lead to less image quality etc/

A good rule of thumb is that for images for the web, 72dpi seems to be the standard. Any higher tends to be over kill.

Presuming your source images are of a higher dpi to begin with.. you will have to try and reduce thtem by either altering the base dpi, or perhaps by resizing them? again.., it depends alot on the type of graphics you are working with.

from personal experience... there is no way to teach/show someone this.... I would recommend picking several test cases (images) and experimenting with them.. and try and get a feel for your outputs. Dont forget also that image quality can vary from monitor/resolution. One cannot predict what your end user has their monitor settings at.. so all your hard work might be in vain regardless....

Not sure what your running at locally (res/monitor ect) but I wuld opt for working around 800 x 600 and at least 16bit colour... optimise your images trying several different settings, dpi's quality setting etc, and then based on the results, pick one.....

tis a debatable subject, but like I said... its someting you grow a feeling for after experience working with images.

hope that help a bit.. post back with more details if you can

~Vp~

EDIT: darn.. I have to learn how to type quicker! hehehe... what those guys said above... I was just too slow!



[This message has been edited by vogonpoet (edited 01-22-2001).]

We are doing a trial run using low level jpg's...

Should have thought of that b-4...but just figured they would be larger in size than gif's....

Thanks for the advice...

If you want to check out our website you can reach it at www.sasklifestyles.com

For what it's worth.... I view in 1024 x 768 ... and the interface repeats itself on the right side of the screen.

Thanks taxon....I will be fixing that up.....