We can change the size of an image using the width and height attributes. In general, it is not advisable to reduce image size using these settings, since the image will transferred over the Internet in its original size no matter what reduction is set for it. This will slow the loading of our web page. This means, that if we have an image that is bigger in size than we want it to be on our page, we should reduce the size in a graphics program, rather than reducing the size on the web page using the width and height attributes.
On the contrary, sometimes, it cab be wise to enlarge images using this technique.
Below are two setting of images using width and height attributes:
<img src="http://www.yahoo.com/rainbow.gif" width="60" height="60">
<img src="http://www.yahoo.com/rainbow.gif" width="120" height="120">
If we leave out the settings for width and height, the browser will automatically use the real size of the image. However, we should always enter the settings for width and height, even when using the real size!
The reason is that if the settings are left out, the browser can not build the page until the image is loaded entirely. This means, that the visitor cannot read text around the image while the image itself is loading - which in turn will give the visitor an impression of a slow loading page. This becomes especially true if the image is inside a table. In that case, the whole table will not be shown until the image is loaded entirely.
Post a Comment
Your feedback is always valuable for us :