7. Graphics Graphics à la "the Web"
Sending text over the Internet is just old fashioned e-mail. People have been
doing it for decades!
When you can include Pictures, your message can be much more informative!
Is the going rate still 1000 words per picture?
After this lesson, you will be able to:
- Identify the graphic formats for the World Wide Web.
- Discuss key points to consider when including graphics in WWW
- Download a graphic file to your computer.
- Use the correct HTML format for including pictures in your
Lean back and relax! This lesson is mostly an introduction to graphics
for the World Wide Web. But we'll have you do a little activity below.
The Web's Graphic Format
There are numerous file formats for computer graphics. PICT. GIF. TIFF.
It sounds like cryptic poetry. Then there is EPS, BMP, PCX, JPEG...
a web browser displays graphics is HTML format indicates the location of a graphic
file in a single format that can be interpreted by different types of
computers. For example, when the information in that format is received by your
Macintosh computer, the web browser knows to display it as a
picture format for Macintosh.
However, when that same information is received by your Windows
browser, it is displayed as a Windows graphic.
In technical jargon, we would say that this picture format is
platform independent. HTML itself is platform independent, since
plain text characters can be understood by any computer.
The standard format that can display within a web page is
GIF or Graphics Interchange Format. The GIF compresses the picture
information (reduces the file size) and translates it to binary code that
can be sent over the Internet. GIF compression is most effective
on graphics that have contiguous areas of solid color.
The other file format used on the web is JPEG (named after
the Joint Photographic Engineering Group that designed this format).
According to HTML 2.0 standards
JPEG images are not displayed in the page but are displayed in
a separate window, using an external "helper" application. While several browsers
support in the page JPEG graphics, it is not yet standard. JPEG compression
is very effective for photographic images; sometimes the file size can be
decreased by a factor of 10 (i.e. a 1500 kb file reduced to 150 kb).
For more information about these file formats, see OTIS' page on
Graphics File Compression
Several graphics programs have built in features to save files as GIF
format. If not, listed below are several shareware programs/utilities for performing
the conversion. You can look for them using the
Virtual Software Library
- PhotoGIF (plugin for Adobe PhotoShop)
Some Points to Consider When Using Graphics
For this tutorial, you do not have to use one of these graphics
programs. We will show you how to save a copy of any image
that you can see on a web page.
However, as you begin to develop your own web pages,
you should become familiar with creating pictures in either GIF or JPEG
format. If your web pages include graphics, consider the following suggestions:
You may design a beautiful web page, loaded with large pictures,
that may load nicely from your computer, but may be excruciatingly
slow by a viewer using a slow modem over a busy network.
- Large and numerous images may look great on a high end computer,
but they will frustrate users who must wait for images to be sent
over the network. (like how many of us have a Sun SparcStation at home?)
As a suggestion, keep images less than 100k in file size. Smaller is even
- On a similar note, not all of us have a 21 inch computer monitor!
Keep graphic images no wider than 500 pixels
and no higher than 400 pixels to avoid forcing users to scroll or resize
their web browser window.
- For GIF format, color gradients may look pretty but they do not
compress as much as solid color areas. Also, many dark tones on Macintosh
computers are not discernible on Windows computers.
- Rather then displaying all of the images on the web page, have
them linked as external images that are downloaded only when a viewer
clicks on a hypertext item (this will be covered later in
lesson 8a and in lesson 8d). If you have numerous pictures to
display, try to break the web page into a series of linked pages.
- A single image (i.e. a small "bullet")
can appear several times in a web page with little added delay each time
you use that same image.
- Many web browsers now "cache" images (storing them
on your computer) meaning that using the same file in several
web pages will load them from the viewer's computer rather than
loading them across the Internet.
- Most importantly, make sure that the images are ones that
add meaning to your HTML documents.
Saving and Including Pictures in Your web page
For the next lesson you will first need to download a copy of a GIF
image of an erupting volcano (watch out for that hot lava!).
Follow these steps to save and include a snazzy picture
that will be used to attract interest for the first part of your web page:
- Go to the web browser window containing this page.
- If you are unfamiliar with saving graphics files
to your hard drive, first see the instructions
for saving images from a web page
- The picture below is a reduced copy of the image. Click on it
once to display/download the GIF file to your computer.
- Save it in the same directory as your HTML text file as a file
Check Your Work
Check to see that the file, "lava.gif", is saved in the
same directory/folder as your HTML text file,
"Volc.htm". If it is not there, check to see if you
accidentally saved it in another directory/folder. Then, move it to the
- What are the two graphic formats used for the World Wide Web?
- How can a graphic file display on different computers?
- What are some key points to consider when including graphics in
- How did you save the lava graphic for use in your WWW
Surf the World Wide Web to browse the Internet for pictures. Try to download at
least one image that might be useful for your page.
Write the HTML to have the lava picture displayed in your
Writing HTML Lesson 7: Graphics à la the Web
Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona
The Internet Connection at MCLI is
Alan Levine --}
Comments to firstname.lastname@example.org