Image Resizing for Web Use

This probably must be the simplest thing to do for most web designers - but yet so many get it wrong.

Or perhaps, it's incorrect to use the term 'web designers': I think what I should say instead is, because everyone thinks this must be simple to do, even non-designers attempt it and get it wrong in the process.

There are two ways in which I have seen this done wrong:

1] HTML resize of images.

Take an image and enter the modified dimensions in the img tag.

So I would say <img src="" height="50" width="50"/> for proportional resize of a square image. [If you enter only one dimension, the image gets resized proportionally anyway].

The problem with this approach is a) The image is not actually being downsampled and you are making your end user download a much larger quantity of data than what's needed b) Most browsers render this resized image incorrectly (except the extremely smart Safari in my experience). Some examples: The right has been resized in a photo editing program (actually the nifty Windows Live Writer did it by itself).

http://blog.burrp.com/2007/09/03/the-green-blue-bday-bash/

Right click on any image and select 'View Image' you will see that the original images are much larger than as they are shown in the content.

2] Indexed color resize of images.

Several of us actually manage to fire up Photoshop to do a resize, but then end up with really ugly resized versions. 

The problem here is that a lot of resizing gets done on logos which are in the .gif format. That means that it has only a specified number of colors allowed (called Indexed color), what needs to be done is to change the mode of the image to RGB before resizing it, subsequent to which it can be saved in the .gif format again.

L-R 1] Original, 2] HTML resize, 3] Photoshop resize in Indexed mode, 4] Photoshop resize in RGB and then saved to index.

  

Hope this is useful.