Setting Image Sizes Using HTML

We'll begin this tutorial by discussing the meaning of the word pixel. A pixel is one of the tiny little specks of light that you see by looking very closely at your computer's monitor. Pixels are the chief unit of measurement for many computer properties, including that of image sizes.

If you were to open up an image file using your computer's browser, the measurements for the image would likely appear in the top bar of your broser, reading something like 310X244 Pixels. This measurement means that your image's size is 310 pixels wide by 244 pixels high.

When you use an image on your web site, your visitors' computer will automatically display the image in it's full size, unless you specify otherwise.

The image's full size may not be the right size for your site, however. Suppose you had a huge high resolution family photo to display on your site, but wanted to scale it down to a manageable size. You could accomplish this by using the HTML code presented below.

An Explanation of the HTML

Placement : Height and width specifications occur directly within the image tag.

Format : Rather than placing the > right after the image file name use a space, type height, equals sign, quote, a number (this will be read as pixels by computers accessing the site) value for height, quote, space, width, equals sign, quote, a number value (computed as pixels again) for the width, quote, >. This tells your visitors' computers to show the image using the height and width measurements you provided.

Image Size Tags : Since any number of pixels can be specified, you have complete control over how large your images will appear.

We are now faced with one of the problems that comes with image resizing. Unless we carefully compute the proper height/width ratios, our image will be distorted. We can save ourselves the math in doing this by specifying just one of the values, either the height or width, but not both, as the code below presents.

An Explanation of the HTML

Image Size Tags : You'll notice the code for each of these cases is identical to that we saw earlier except that only one value is specified.

The images are now correctly proportioned, the computations done automatically by your visitors' computers.