Handout 4 - Images and Graphics

Handout 4 - Images and Graphics

Almost all web pages incorporate some sort of graphics in them. The format this graphic takes varies widely: logos, pictures, bullets, background images. Well used and well placed graphics can greatly enhance a web page's appeal.

Here are some important things to remember when deciding on how to use graphics on web pages:

• » The graphic should support the content of the page, like everything else in your layout.
• » Graphics should be used judiciously, not cluttered all over the page or in bad positions on the page.
• » Try not to use too many graphics on a page - some graphics may take a long time to load causing your page to load slowly.
• » Use the correct format for each image depending on what the image consists of - GIF, JPG, or PNG.

Image Types

There are three main types of images used for graphics on web pages: GIF, JPG, and PNG. Each type of image has its benefits and its drawbacks, and each type is best suited for certain types of images. Try your best to use the correct format for each image depending on what the image consists of..

Here are the types of images commonly used on the web:

• » GIF - This is the Graphics Interchange Format. This is the most widely used image type on the web because images of this type are small (less than 10K). However, these images can only have 256 distinct colours, which makes it best for icons, logos, black and white images or images with few distinct colours, and line drawings. These types of images also support transparency - they let the underlying colour of the web page to show through.
• » JPG/JPEG - This is short for the Joint Photographic Experts Group. These types of images are also widely used on the web primarily because they render a larger range of colours - 16 million. They should be used for images with a wide range of colours, such as photographic images
• » PNG - This is the Portable Network Graphics format, and is a relatively new format so all browsers might not support this format. This format attempts to combine the best features of the JPG format and the GIF format - it takes up a small amount of space but allows for a wide range of colours.
• » BMP - This is the Bitmap format. This is the oldest image format and consequently the most widely supported on the web. However, bitmap files tend to be large if the image contains colour because the files are not compressed as they are in the other formats. The quality of the image varies according to the number of bits used for each pixel - more bits means better quality, and a larger file. This is why bitmaps are not often used for images on web pages.