How to use images on web pages

Images that you want to display on a web page always have to be stored as separate files, and reference is made to them with the img element from the XHTML page. General instructions for how to add images to a web page:

  1. Store the image in the same directory as the web page. If there are many images, create a separate directory for them (see code example below).
  2. Add the img element to the place on the page where you want to display the image and give the file name of the image as attribute to the element; the image will be displayed where you placed the img element on the web page. Give the image an alternative name with the alt attribute:
<img src="dogpics/dogggie.jpg" alt="A Picture of My Doggy!" />


If you copy an image from e.g. a web page, make sure that you have permission from the copyright owner before you publish it on your own web page.

How to use images on the Internet

The file formats for images on web pages are usually JPEG, GIF or PNG. JPEG is very suitable for photographs, while GIF and PNG have their own uses (read more about these file formats).

If you wish, you can also use images in your CSS files; you can use the CSS file to define e.g. a background image for any element.

Sometimes, people link e.g. photos taken with a digital camera directly to a web page. Such photos can be very large, so you should resize them before publishing them on the web. Many users go about the wrong way when they try to specify the size of an image in the XHTML code of the web page.

An example of the wrong method: Raymond has a digital photo of the size 3200×2100 pixels. He wants to resize it for a web page, so he gives the image element a smaller size with the help of the width and height attributes.

<img src="luiro.jpg" width="600" height="200" alt="" />

An example of the correct method: Raymond opens the digital photo with an image-processing program and resizes the image. Then he links the resized photo to the web page without trying to manipulate it through the XHTML code. As a result we have aweb page that loads quicly and looks neat.

If you need to resize an image, do not ‘minimize’ it by forcing it to be displayed in a smaller size, but use am image-processing program!