Controlling image size

With the width and height properties of the <img> tag, you can control the width and height of an image. You should not use these values to make a large image display smaller on the browser window. If you need to adjust the size (width and/or height) of an image, do that in an image editing software. Then use that new image with new width and height values. Note that though specifying these values is optional because if you don't the browser will calculate dimension for the size of your image. But if you do specify those values, you will save the browser from calculating the dimensions and that turn make the pages load faster.

The following example shows how to add width and height for a particular image,

<img src="http://www.scriptingmaster.com/images/scripting-master-logo-small.jpg" width="200" height="33">

The order of these two attributes (width and height) does not matter :

<img src="http://www.scriptingmaster.com/images/scripting-master-logo-small.jpg" height="33 width="200"">

In both of these instances, we specified that the width is 200 and the height is 33; the result is:

However, if you change the width and height for the same image as:

<img src="http://www.scriptingmaster.com/images/scripting-master-logo-small.jpg" width="100" height="40">

This will distort the image and it will look like:

To avoid distorting images, use the actual values for the width and height of an image.