Adding Images to Your Web Pages

This document is intended for teachers in the WWW Institute at Fermi National Accelerator Laboratory. It is an introduction to adding images to web pages. It assumes that the teachers use Netscape as their browser. Teachers should read the document and then do the Hands-On activities suggested at the end. This document is on the web at http://www-ed.fnal.gov/net_train/train_graphics.html.

Formats

Images come in various formats. Generally, you must take two steps to create a file that you can display in WWW: Generating a PICT or TIFF file and then converting it to a GIF file.

Some formats that you might encounter are:

GIF (Graphics Interchange Format) - the format most used in WWW work, not usually used as output from graphics programs on Macintosh; you have to convert to GIF from other formats using a converter.
PICT (Macintosh) - standard output from most graphics programs that you will use for most of your work.
JPEG (Joint Photographic Experts Group) - good when the image has at least 16 colors; requires a helper application to be viewed. (This is different from MPEG which refers to a movie)
TIFF (Tagged Image File Format) - another format you will encounter on the Mac
XBM (X Bitmap) - similar to GIF files, used mainly in the UNIX environment.

Review of How to Display Images with HTML

Inline Images

Inline images show up on the same page as the text, like the red Fermilab logo above which is displayed using the HTML command <IMG SRC="Graphics_Tutorial1.gif">. You can add ALIGN=TOP or ALIGN=MIDDLE to your command to align the image next to text on the same line. You can also add ALT="alternate text" to take care of users who don't display graphics. For example, <IMG SRC= "graphics/train_graphics1.gif" ALIGN=MIDDLE ALT="Fermilab Logo">.

NCSA provides a more complete discussion of inline images at URL http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.6.

Linked Images

Linked images are accessed by clicking on a link. Click on Leon M. Lederman Science Education Center to see a picture of the Science Center. This link is made using the following html command:

<A HREF="http://www-ed.fnal.gov/graphics/lsc.gif> Leon M. Lederman Science Education Center</A>.

The Netscape browser usually displays gif images. The user can choose to launch helper applications to display images of different formats (JPEG, etc.) using the Preferences item under the Options menu.

A review of HTML for images can be found at http://www-ed.fnal.gov/net_train/train_link_worksheet.html#image

Making Your Own Images

You can use the following hardware and software to make your own images. You usually save the images from these programs as PICT or TIFF files. You can also cut and paste directly between the documents in these programs and GifConverter.

Drawing Programs (e.g., Works, MacDraw)
Paint Programs and Graphics Programs (SuperPaint, Adobe Photoshop, Canvas, Fractal Design Painter)
Digital Cameras (e.g., Quicktake Camera from Apple)
Scanners
Screen Grabs ($15, Flashit); command-shift 3 and crop with GifConverter.

REMEMBER: keep them as small as possible (20K or less better)

Converting to GIF Format

Conversion Software

Two programs are available to convert image files into GIF format: GifConverter and Graphic Converter. Both are shareware so you need to register and pay for them. Just open your image (usually a PICT) file and then Save As and select GIF format. It will make a file with the extension .gif.

The University of Washington's Mac Development Tools include Graphic Converter and GifConverter at the URL http://www.uwtc.washington.edu/Computing/WWW/Mac/DevTools.html#Graphics"

Check out the Good Tutorial on Graphic Converter from the Web66 site at the URL: http://web66.coled.umn.edu/Cookbook/Pictures/Pictures.html. GifConverter and Graphic Converter are quite similar.

Cropping and Scaling

It is often very helpful to users with slow connections to provide thumbnails of the images on your page and then let them choose to see the larger image if they want. For example, on a Fermilab WWW server page John Peoples, the Director of Fermilab, appears in a small image (14K). But by clicking on the Full-sized image link below his picture, you can see a larger version of the image (178K). Try going to the page and try it.

GifConverter can also be used to crop and scale images.

To crop, use the crosshair tool and then click and drag over the area you want and then select Crop under the Image Menu.
To scale, choose Select All under the Edit Menu and then Select Scale under the Image Menu. You can use the scaled images as thumbnails for larger images.

Web66 at the University of Minnesota has a Tutorial on Making Thumbnail Pictures using Graphic Converter at the URL http://web66.coled.umn.edu/Cookbook/Thumb/Thumb.html.

Getting Images from the Web

You can find all sorts of images on the Web, but remember you cannot use them unless you have permission. Always check the page to see if you are free to use the images. If you are in doubt, send e-mail to the author of the page. Also if the author wants credit for his image, be sure to include it. Here are some URL's where you can find some:

Yahoos List of Icon Sources at http://www.yahoo.com/Computers/Internet/World_Wide_Web/Programming/Icons

Icon Browser from Pisa at http://www.di.unipi.it/iconbrowser. This one has a few naked ladies among some 7000 icons so you might want to avoid using it with the students.

Images and Icons from the Virtual Library at http://WWW.Stars.com/Vlib/Providers/Images_and_Icons.html

Misc Icons at http://www.bsdi.com/icons/misc.html

Tony's Icons at http://www.bsdi.com/icons/tonys.html

You probably have clip art that you have purchased. Before using it on the web, make sure that you have permission to use it on the network. Some companies only intend their artwork to be used in printed materials where it is not so easy to copy.

Making your pictures better.

Transparent GIFs

Notice the difference between these two images on the gray background that you usually see in Netscape. The first second one is transparent and the first one isn't.

For some images, you want to get rid of the white or blocked style of the image. A tool to fix this is called Transparency. You can download it from the URL ftp://ftp.med.cornell.edu/pub/aarong/transparency/. You choose a color that you want to be transparent in the image. Make sure that the color you pick as transparent doesn't occur anywhere in the image besides the background, or your image will have ``holes'' in it!

Look at the Web66 Tutorial on Transparent GIFs from the University of Minnesota at the URL http://web66.coled.umn.edu/Cookbook/Transparent/Transparent.html. The tutorial shows using Graphic Converter to fill in all the area that should be transparent with a color that is not used in the rest of the image. You only need to do this if the color in the area you want to be the background is used in the image itself.

A URL describing Transparent and Interlaced GIF Resources is provide by Netscape at http://dragon.jpl.nasa.gov/~adam/transparent.html#Mac.

Interlaced GIFs

To quote the Web66 Tutorial from the University of Minnesota:

"When downloading a picture, some browsers will draw the picture as they receive it. For a standard GIF, this means it will slowly draw from the top of the picture to the bottom of the picture. For an interlaced GIF, it will first draw every 8th line, then every 4th line, then every 2nd line, etc. This way, you get a pretty good idea of the picture content before it is completely drawn."

Look at the Web66 tutorial from the University of Minnesota on using GifConverter to make an Interlaced GIF file at URL http://web66.coled.umn.edu/Cookbook/Interlace/Interlace.html

Controlling the Background and Color - Advanced Netscape

Netscape 1.1 has added some featires that will exist in the next version of HTML. You can improve the appearances of your pages with these commands. However, remember that users looking at your pages from other browsers may not be able to see these new features.

Netscape 1.1 supports setting a the color of background, text, links, and explored links. It also allows the displaying a background image. The latter can require long loading times for the background image so use if sparingly if at all. Also consider how legible your text is over the backgrounds you choose. The grey background and black text may seem dull, but they are quite easy to read.

To learn more about these features, look at URL

Extensions to HTML at http://home.netscape.com/assist/net_sites/html_extensions.html

Controlling Document Backgrounds at http://home.netscape.com/assist/net_sites/bg/index.html

Netscape Background Sampler at http://home.netscape.com/assist/net_sites/bg/backgrounds.html.

Background color codes at http://www.infi.net/wwwimages/colorindex.html

Other Related URLS

The following URLs might be useful:

Macintosh WWW Development Tools from the University of Washington at http://www.uwtc.washington.edu/Computing/WWW/Mac/DevTools.html

The Graphic Utilities' Site & Version FAQ at http://www.public.iastate.edu/~stark/gutil_sv.html

Classroom Internet Server Cookbook at http://web66.coled.umn.edu/Cookbook/contents.html

Links for Graphic Converter, Gif-Converter Transparency, JPEGview at http://www.qub.ac.uk/sigweb/mac-comms-utils.html#stillc

HANDS-ON

Do the following activities: Use references in the body of this document to find more information on each step. If you need to, download the software, (e.g., Transparency, Graphic Converter)

Complete the Tutorial on Using Microsoft Works to Create Graphics For Your HTML Page by Stephen Meehan at URL http://www-ed.fnal.gov/net_train/train_graphics_works.html . You will make a drawing in Works and then save it in Pict format and use Gif Converter to convert it to a GIF and then display it on a page.
You should try to use each of these techniques to put images on your pages. You can either display them as inline images or as links to images: Quicktake Camera, Scanner, Screen Grab using command-shift 3 and cropping with GifConverter, an image from the web.
Use GifConverter to scale down one of your large images and save it with a new name. Display it inline on your page as a thumbnail. Include a link to the larger version of the image.
Try making an interlaced GIF, by clicking the Options button in the dialog box and choosing interlaced. Display on your web page. Notice the difference in how it is displayed by Netscape compared to a non-interlaced GIF image.

Author: Liz Quigg - liz@fnal.gov

Web Maintainer: ed-webmaster@fnal.gov

Created: July 21, 1995

Last Update: July 28, 1995