CSci 220 - Lecture 9

Web Page Design

© Morris Firebaugh


I. Chapter 9: Adding Images and Other Page Elements

A. The Image Tag Syntax

B. Image Compression Formats - GIF & JPEG

C. Image Size and Resolution

D. Advanced Image Formats

E. Embedding Other Page Elements


II. The Image Tag Syntax

The Image Tag is a single <IMG> with lots of attributes:

GoLive Example:

Specifying Image Files




Effects of the ALIGN attribute:

This is some follow-on text

This is some follow-on text

This is some follow-on text


Making Space Around Images



Providing Alternative Text with the ALT attribute


III. Image Compression Formats - GIF, JPEG, and PNG

The Problem with Images --> Size

How big is the file?

Answ: 8 x 10 x 3002 x 3 = 21.6 Mb

HTML supports Three Image Compression File Formats

Features of GIF

Features of JPEG

Other graphics formats

To demonstrate the effects of compression, consider the following image from the Pacific Crest Trail:


Summary of file compression results:


 All these can be inter-transformed with GraphicConverter

IV. Image Size and Resolution

The general rule is: Keep graphics files to 600 x 300 pixels or less


How about scanning images?


Some Image-Size Common Terms

Button = Small in-line picture, about 15x15 pixels
Bar = decorative horizontal rule, typically 600 x 10 pixels
Icon = Active button causing link action, typically 40 x 40 pixels
Thumbnail = In-line image serving as link to another image/URL, 50 x 50 pixels
Portrait = Informative picture, typically 150 x 200 pixels
Banner = Full-width, decorative image, usually 600 x 100 pixels
Panel = Image dominating screen, typically 600 x 400 pixels


Introduction to GraphicConverter





V. Advanced Image Formats

GIF may be on the way out and JPEG is lossy. Can't we do better?

PNG (Portable Network Graphics)


Vector Graphics (OOP)

VI. Embedding Other Page Elements

Other Elements we demonstrate here, and explore more in detail later, include

Java Applets

 Sound Files

QuickTime Video Clips

Horizontal Rule

The HTML tag

<hr noshade size="15" width="15" align="left">




Date & Time

Mon, Feb 12, 2001, 4:18 PM

VII. Laboratory Assignment #5




Updated February 12, 2001