Squashed images really hack me off

You go onto a website, usually a personal website about somebody's dog, and you see a picture of beloved Gromit but he's got a face as long as a horse because some muppet has reduced the width of the image without proportionally reducing the height. "Aaaaargh!", you scream.

Well this must not go on, the squished image STOPS HERE! My idiot's guide to squashing and squeezing begins below.

Firstly squashing. You want the height of the following squash racket reduced, however by just reducing the height the following happens:

Normal squash racket	Squashed squash racket

What you should have done was, reduce the height and the width together OR crop the image to the right height OR (if you're really clever and get far too excited when playing with photoshop - not me honest!) do a bit of both.

Proportionally reduced squash racket	Cut squash racket

Secondly squeezing. You want the width of the following limousine reduced, however just by
reducing the width you get a hatchback:

Normal limo	Hatchback limo

What you should have done was, reduce the width and the height together OR crop the image to the right width OR a bit of both.

Proportionally reduced limo	Cut limo

Multi angled squishing can occur for a number of reasons, I state the most obvious here and how to avoid.

1. You change the height attribute in the html for the image - by doing this but NOT changing the width attribute your image gets squashed. The BEST way to avoid this is by making the image the correct size in the first place in Photoshop or whatever and then not including a height or width attribute. Internet Explorer or whatever browser will display the image at it's original size and proportions.
2. You resize the image in some WYSIWYG editor, Word, Quark or whatever by pulling the handles on the edge - this will result in squishing. Only ever use the handles at the corner of the image and hold down SHIFT and keep it held down while you resize the image with your mouse. This will reduce the image proportionally. See my awesome diagram below:

So with this in mind let me never see a squashed, squished or squeezed image ever again. I need some fresh orange juice now.