8.3 Image Size
The size of images displayed on a webpage can be controlled using two more useful attributes: width and height. The purpose of these attributes is pretty self-explanatory, and they can be used with many other elements too. They can be used with the image tag to control size, as in the following example:
<img src="logo.png" width="141px" height="32px" />
Here the image, whatever its actual original size, will be displayed 141 pixels wide and 32 pixels high. The width and height attributes can be used to control the size of an image in pixels (px) or percentages (%). Here we've used pixels, which are the units of measurement used in screen resolution. Unlike millimetres, pixels are relative units which depend upon the resolution of a particular screen (the most common one currently being 1024x768 pixels). If the width and height are not specified, the image will be inserted to its actual original size. Tke note that controlling image size in this way does not affect the size of the image file in kilobytes, meaning that a reduced image will still take the same time to load and will use the same amount of bandwidth as the original. Resizing the image using an editor would be another option.
One useful application of using these attributes with images is where the same image will be presented in different sizes in a webpage. For example, using an image called globe.png which has an original size of 100x100px:
<img src="globe.png" width="33px" height="33px" /> <img src="globe.png" width="66px" height="66px" /> <img src="globe.png" />
This would look like this in a browser:
Using these two attributes in the HTML documents and inside the img tag is not best practice these days, but the same two attributes can be specified as properties using CSS, which will be discussed later in the CSS Tutorial.