Height & Width Tags

On this page I am illustrating images displayed in their original format then, again with the height/width attributes modified. 

This is the image using it's true height and width in the image tag.
<img src="images/blockM.gif" width="63" height="48" alt="blockM">

Changing, the height and width sizes that are not proportional to the original image will cause the image to be distorted.  As illustrated where this example increases width but not height, result is distorted image.  width="163" height="48"

Same image using with height & width tripled, i.e. 
width="189" height="144"

Same image using with height & width five times original, i.e.
width="315" height="240"

  
This simple line drawing seems to scale well without much distortion as it is displayed using larger height and width dimensions, but other images may suffer more distortion as they are displayed larger.

   This image of the sun, sun.gif   displayed using original size, 
width="64" height="64", followed by the same image enlarged four times with: 
width="256" height="256"

Note the distortion of the image as displayed using the larger dimensions.

What about changing height and width of  JPGs?  The last two illustrations present a small image of  WoJo, one of the TA's for the online course.  The first image is displayed using original size with the second doubling the width and height dimensions.  Note the distortion in the second picture.

Note this technique for including large images on a web page created by small image files works better on solid color gifs than jpegs.  Here is an image of WoJo, where the image has width="122 " height="111"

Here is the same image of WoJo, sized as:    width="244 " height="222"

Last updated on 02/13/2003  by L.M. Hicks