Objectives of this Tutorial

Generally: To add images to a web page.

Specifically: On completion of this lesson, you will be able to:

• Insert an image into a web page
• Display alternate text
• Specify the image size for quicker downloading
• Link icons to external images
• Add space around an image
• Change the alignment of an image
• Add horizontal rule lines

About Web Graphics

Most images displayed on web pages are bitmap-type graphics. This means the image is made up of pixels.

Tip: Do not confuse bitmap-type with the Bitmap (.BMP) file type used in Windows. Graphics can be a bitmap without being Bitmap.

The colour of each pixel is determined by the balance of Red, Green and Blue in the image (the RGB value). Each colour can have a value from 0 to 255. The file size of the image is nominally determined by the number of pixels (the height and width of the image) and the number of colours, but web file formats also use compression to reduce the file size.

Creating graphics

You can create graphics by using a drawing or painting application, by scanning a picture or using a digital camera. Graphics can be edited in a variety of applications, most of which will be suitable for producing web page graphics.

When using graphics, you have to bear in mind that colours can be displayed differently on some systems. For maximum portability you need to ensure that your graphics only use colours from a web-safe palette. Most editors will have an option to dither an image to a web-safe palette.

You must make sure that the file size of the graphics you use is as small as possible. Large files mean that the page will take a long time to display.

You also need to save the file in an appropriate file format. Only two or three file formats will work with popular web browsers.

Graphics file formats for the web

Three file formats are used for web graphics. The choice of format depends on the type of graphic.

• GIF - Graphic Interchange Format
  GIF files are suited to "artificial" graphics, where there are blocks of the same colour. The colours in a GIF are saved in a palette of 256 colours, which means the format can accommodate the web-safe palette of 216 colours. GIF uses a lossless compression system, which means that there is no change in quality in the image. However, effective compression depends on there being blocks of the same colour.
  
  Special types of GIF can also be used to create transparent areas in the image or animations.
• JPEG - Joint Photographic Experts Group
  JPEG uses an algorithm to work out the optimum way of storing colour information in an image. JPEG uses a lossy compression system, but you can set the trade-off between image quality and file size on a sliding scale.
  
  JPEG is suitable for continuous-tone images, that is natural looking images where there are many subtle differences in colour, scanned photographs being the best example. JPEG is not suitable for block colour images, because the format will actually introduce new colours into the image.
• PNG - Portable Network Graphics
  The PNG file format is a patent-free replacement for GIFs, but is only supported in browser versions 4.0 and up (and some features of the format remain unsupported in these).
  
  PNG offers a large number of features for the web developer, but while support for it remains patchy it would be unwise to use it extensively. Check on the web for more information (for example, www.libpng.org/pub/png)

Add an Image to a Web Page

When selecting images to display on your web pages you need to bear in mind the amount of time that an image will take to download. Estimates of visitor patience vary from 8 seconds to 30 seconds. A casual visitor to your site will not waste much time waiting for large graphics to load. A regular visitor will become increasingly frustrated at slow pages and start to look for alternatives.

Image links

To display an image on a page, you enter the URL of the image file to display. The graphic is not stored as part of the HTML file.

When you add the URL of the image, it is best to use a relative URL. This means that you enter the location of the graphic file relative to the location of the HTML file that will display it. If the graphics file is in the same folder as the page you are displaying it on, the URL is simply the name of the file and its extension. If the graphics file is located in a subfolder of the folder containing the page, the URL would be the name of the subfolder, followed by a forward slash and the name of the file and its extension. If you are referencing a file that is at a higher level in the file hierarchy, you enter two periods (full stops), followed by a forward slash, then the relevant folders, the file and its extension.

Any image file that you link to should be stored within the root folder of your site.

To insert an image onto a page

• Position the insertion point where you want to image to be displayed
• Type <IMG SRC="imagename.extension"> for images that are stored in the same folder as the page

OR

• Type <IMG SRC="foldername/imagename.extension"> for images that are stored in a different folder to the folder that the page is stored in

Tip: If you want the image to start on its own line precede the image tag with either <P> or <BR>.

Example of tag to insert an image file stored in another folder

Resulting image displayed on the page

Continued...