Images : Resizing - HTML Tutorial

HTML Images :

RESIZING

You 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 be transferred over the internet in its original size no matter what reduction is set for it. This will slow the loading of your webpage.

This means, that if you have an image that is bigger in size than you want it to be on your page, you should reduce the size in a graphics program, rather than reducing the size on the webpage using the width and height attributes.

On the contrary, sometimes, it can be wise to enlarge images using this technique.

Below are two presentations of the exact same image - with different settings for width and height.

If you leave out the settings for width and height, the browser will automatically use the real size of the image.

However, you 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't 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.

<< PREVIOUS