Basic HTML Tutorial: Scaling Images

Home > Build > Programming > HTML > Basic HTML Tutorial

2.4 Scaling Images

So, what if your image is too big?

You can use the HEIGHT and WIDTH attributes to scale your images. You can set the height and width to an either an absolute number in pixels, or a percentage.

The file we have been using, w3nation.gif is W 250 x H 215 pixels. We could scale the image in half by using the HEIGHT and WIDTH attributes:

<IMG SRC="..\..\..\graphics\w3nation.gif" WIDTH="125" HEIGHT="108">

This is how the image displays:

But you have to be careful to keep the WIDTH and HEIGHT proportionate, or your image will skew. This is okay if you're going for an artsy effect, but in most cases doesn't come out right.

Here's an example:

<IMG SRC="..\..\..\graphics\w3nation.gif" WIDTH="125" HEIGHT="215">

This is how the image displays:

Also, since these images are composed with Pixels, enlarging them would decrease the resolution of the image, making it less clear.

Here is an example of that same logo, doubled in size:

<IMG SRC="..\..\..\graphics\w3nation.gif" WIDTH="500" HEIGHT="430">

See it in the Browser

The image now looks less clear. If you look closely, there is a dither pattern on the text. Now, let's double this.

See it in the Browser

It's also a better practice to reduce the image in your image editor if you would like to scale it down. Remember, that even if the image is scaled in half, the browser still has to download the image at the size of its normal scale. If you scale it instead with your image editor, the size of the graphic will reduce.

2.3 Attributes of the <IMG> Tag

Tutorial Index

2.5 Giving Your Image a Border