Sizing Images & Adding Image Borders @ OWDC

LESSON 1-07-03: Sizing Images & Adding Image Borders

Web Design Lessons > Lesson 1-07-03: Sizing Images & Adding Image Borders

Previous Lesson | Lesson Index | Next Lesson

In order to set a size to an image, we're going to use the "width" and "height" attributes of the <img> tag. These attributes are generally used to preset the size of the images in an HTML document, so that when the document is being downloaded, it doesn't change shape everytime an image loads. Modern browser actually try to find out the width and height of images lacking "width" and "height" attributes before rendering web pages in order to get around this problem, resulting in a slower download time. Therefore, Online Web Design Course recommends the use of "width" and "height" attributes with every single image you use in your HTML documents.

Sidenote: Never, ever use "width" and "height" attributes to shape or resize images. If you wish to change the size of an image, use an image editor. The "width" and "height" attributes should reflect the real width and height of your images. All of the images used in this free online web design course have their "width" and "height" attrributes set.

Setting The Width & Height

In order to set (or PREset, actually) the width and height of your images, you'll need to use the "width" and "height" attributes inside the <img> tag. Surely, you'll need to know the dimensions of your images first.

You can learn the dimensions of your images by right-clicking the image files and selecting "Properties" from the menu. The image dimensions should be written somewhere inside.

Sidenote: If you're using Windows XP, you can just hover your mouse over the image files for a few seconds and see the dimensions inside the description box that'll appear.

After you learn the dimensions of your images, you can set the "width" and "height" attributes correctly. We're going to use our horse picture again as our example. Below is the HTML code you'll have to use in order to set the dimensions of our horse image:

As you see above, the dimensions of our horse picture are 300x225. The above HTML code will create the same output as the one in web design lesson 1-07-02, but this time our image is much more browser-friendly. The output is below:

Bottom line is... By PREsetting the dimensions of the images you use in your HTML documents, you'll prevent your site from reshaping itself as the images get downloaded and you'll have a faster-rendering website.

Adding Image Borders

You can add borders to your images by using the "border" attribute inside your <img> tags. Image borders are an optional feature, but may sometimes come in handy as far as the design of your website is concerned. Copy the below image to your hard drive if you haven't already done so in web design lesson 1-06-02:

Now let's write down some HTML code:

In the above HTML code, notice that we have changed the filename to "bg.jpg" to reflect the filename of the above image. We've also changed the "width" and "height" attributes to reflect its dimensions. The "border" attribute contains the value of "1", but it can be any number you choose. Let's have a look at the output:

Notice the thin, black border around our image? Yup, that's what the "border" attribute produces!

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Next lesson of your free online web design course will help you understand the difference between the GIF and JPEG image formats. Let's proceed...

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!

Setting The Width & Height

Adding Image Borders