• creating them yourself
• scanning them into your computer
• using a commercial clip-art package
• copying and saving them from the Internet

Bitmap images are composed of tiny small squares known as pixels.  Pixel stands for "picture-element".  How big is a pixel?  About the size of the period at the end of this sentence.  Each pixel has a color value and a location.  Bitmap images are most commonly used for electronically displaying photographs and other graphic images on the World Wide Web.

Unlike some other graphics types (i.e. - vector graphics in DTP mathematically resize images), if you try to make a bitmap image larger than the original, jagged edges and loss of quality will occur.

Making a small bitmap image larger results in a severe loss of quality.  Notice how the original pixels have seemed to become very large!

M. Shaw, 1997, 2002

M. Shaw, 1997, 2002

Resizing or scaling a bitmap image down is not a problem.  There is no noticeable loss of quality. Remember, always scale down, not up!

Computer display screens are made up of a grid of thousands of pixels. The number of pixels that they can display per inch or ppi, gives us the information we need for determining the size or image resolution our bitmap graphics should have, which for the Web is 72 ppi.
 

M. Shaw, 1997, 2002

A computer screen can typically display *72 pixels per inch.  That’s 72 pixels high by 72 pixels wide, or 5,184 pixels.  This means that our graphic images should be created at 72 ppi, which is the industry standard.  Any higher setting will not make any difference in quality, as the screen simply cannot display anything greater than 72 ppi, and the file size will be unnecessarily large.  Anything less and we will loose resolution. (*PC default is slightly higher but not important)

The image file formats that you will use in developing Web pages are:

GIF – limited to 256 colors or less.  A poor choice for large images or photographs.  Very popular for small web graphics and animations.

GIF89a – limited to 255 colors or less.  Provides transparency features.  Popular for web graphics and animations that 'let the background show through'.

JPEG – a very common image format for photographic images.  It can maintain a reasonably high quality image with many colors while still compressing file size (the amount of compression is flexible).  There is always some image degradation with this lossy format and image quality can decrease with resizing.

PNG – a new format which is lossless but not very popular at the moment.  It incorporates a transparency feature and may someday replace GIF in popularity for Web graphics.

For more information on these and other file formats, visit the following sites:

The Kodak Digital Learning Centre

Apple's file format site

Martin Reddy's graphics file formats site at U. of Edinburgh

There are many excellent programs available that allow you to convert one file type to another.  One of the easiest ways to do this is to open the original file in a paint or graphics program, then re-save it in the new format you require.  The thing to be on the lookout for is ppi and resizing.  We have already seen an example of what can happen to image quality when you increase the size of a bitmap image!

Netscape Composer supports both GIF and JPEG file types. If you do import images such as BMP files into Composer, it will automatically convert the images to a Web-friendly format. 

Clicking on the 'Insert Image' icon will bring up the Image Properties Requestor. It's a good idea to experiment with the placement of various images by using tables and the different text alignment and wrap around features.  You can also create hyperlinks with your image, add borders or spacing and more.

If you drag an image from a folder on your desktop or from your Navigator browser window and drop it into your web page,  Composer will insert the image for you. 

By default, Composer saves a copy of the image in the same folder as the page so that the image will always appear with your web document. If you move the image file from that folder, it will no longer appear on your page. 

Scan resolution is virtually the same as image resolution.  Different software provides various ways for you to select the proper size required for a specific application. The most common mistake made is scanning at a resolution too high for the Internet, resulting in large files that take ages to load!

For further information on image scanning, check out the site from Barnard College or Wayne Fulton's site.

There are thousands of free clip art images available on the Internet.  To download a graphic image, simply position the cursor over the image you want and hold down the mouse button (on a PC right-click).  A requestor will appear.  Select "save image as" and a requestor will appear prompting you to save the file.  Many things are available on the Internet. This includes textual information, audio, photographs, graphics and other images. It is important for you to realize that these things are usually the property of someone else, and using information or materials that belong to someone else can be an infringement of copyright, and against the law. Some images on the Web are not free, and you are not allowed to use them without permission, acknowledgment or even payment. For more information on copyright, visit: A Brief Introduction to Copyright - by Brad Templeton.