Web Design - Web Authoring / Intermediate HTML: Graphics
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H  |  Part I

Image Size

Considering Image Size

Consider the Favorite Vacation web page, DreamVacation.html, displayed previously. As you saw, the photo referenced is very large. In fact, it takes up almost the entire browser window. While the picture may be beautiful, it is not a good idea for image displayed to be so big – for a couple of reasons:
  1. The larger the image, the slower the page download time.
  2. Text listed after a large image may be “lost” to readers.

As with any file on the Internet – the bigger the file, the longer it takes the file to download. When a web page opens, the text is automatically displayed because it is actually listed in the HTML document. The image does not immediately open as it is being “brought into the page” from another location on the web. If the image size is big, the web page will take a while to display the image and in the mean time the layout of any text or other HTML elements on the web page may be displayed incorrectly until the image is fully loaded.

The second reason for not displaying large images refers to “lost” text. This is not to say that the image erases text from the web page, but you will find that most visitors to your site do not want to scroll down the page if they don’t have to. If you have a large image on your web page that takes up most of the viewable browser window, a visitor to your web page may not realize that there is text listed below the image.

Ensuring Image Size

There are two methods to ensure your web page images are correctly sized:

  1. Use an image-editing software application to modify the canvas size of your image[s].
  2. Use the width="" and height="" attributes in the <img> tag to modify the images' dimensions.

To ensure images are correctly sized and displayed on your web page, you can edit them in an image-editing software application - reducing their image size proportionately.

Additionally, the width="" and height="" attributes can be added to an <img> tag to modify the dimensions of the images used on a web page. In the Favorite Vacation web page, we can add the width="" and height="" attributes to the <img> tag and specify the value for each in pixels. The problem with this method of resizing your images is that you may disproportionately modify the image’s dimensions. It is always advised to first resize an image in an image-editing software - noting the image's new dimensions - and then use those dimenstions as the values listed in thewidth="" and height="" attributes.

Let's See it in Action icon. Let's See it in Action: Using Paint to Edit Image Size

presentation Watch the video below to see how to use Microsoft Paint to edit your image's size.

Next Next

© 2008 KCDL. All rights reserved.