Header
Text Colour:
|

Welcome to the E-Learning Website for using vector and bitmap images on the Web

This website provides useful information that will guide you in making the right choices in regards to vector and bitmap file formats when creating your own website.

The website consists of 8 pages:

  • Vector
    This is where all the information about vector images are. File formats discussed here are .SVG and .SWF
  • Bitmap
    This is where all the information about Bitmap images are. File formats discussed here are .JPEG, .GIF and .PNG
  • Comparison of Formats
    This section collates the information about the two types of images and discusses the differences between each of them
  • Quiz
    This section provides a quiz on Vector and Bitmap images
  • Forum
    This is where you can ask your fellow students for help or answer questions from other students
  • Links
    This section will provide you with multiple external links to useful websites about Image formats, Web Development, etc
  • RSS
    A RSS feed from the BBC website will keep you upto date with all the technolgy news

By the end of the using this website you should be able to:

  • Describe the difference between static and animated vector and bitmaps as used on the web.
  • Describe the advantages and disadvantages of each format and be able to choose the appropiate format for different situations.

Quick introduction to graphics

Two Types of 2D Graphics
Graphics are integral to good web design. They can be used to create a background, provide visual information or as an embellishment to make page more interesting.

Computer graphics are either vector drawings or bitmap (or raster) graphics and have very different histories and application areas.

Until recently bitmaps were the only graphic type used on the WWW but the development of XHTML 1.1 browsers and the introduction of Flash have seen an increased usage of vector graphics.

 Vector - Zoom
Vector Image 		Bitmap - Zoom
Bitmap Image

The Differences Between Both Formats
Vector Images are made up of many individual, scalable objects. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. As you can see in the picture on the upper right.

Bitmap Images are made up of pixels in a grid. Pixels are picture elements; tiny dots of individual colour that make up what you see on your screen. As you can see in the picture on the upper right.

XHTML Image Tag: <img src="filename" alt="short description of image"/>