Graphics

Working with Graphics

SInce we've introduced various pictures, let's take some time to look at the issue (sorry...).

Web browsers are designed to display graphics which are either in GIF or JPEG format. GIF stands for Graphics Interface/Interchange Format, and is denoted by a suffix of .GIF. JPEG stands for Joint Photographic Expert Group, and is denoted by the .JPG suffix.

In a nutshell, GIF's are used when the graphic is composed of uniform colors, such as a chart, graph, or line drawing. JPG's are used when the graphic is a photographic image. GIF's use a higher compression, and are usually smaller in size, which translates to a faster download time. You must be careful when saving JPG's as GIF's, as you will find much color detail is lost or altered.

There are several programs designed for converting graphic images. Most "paint" programs, such as Adobe Photoshop will do the job with style. However, if you prefer the free programs, there are several available for both Macintosh and PC formats through http://www.shareware.com.

A Few Graphics Utilities
Macintosh	PC/Windows
GIFConverter GraphicConverter	WinGif 1.4 Lview 3.1 PaintShop Pro

Some general rules to follow when using graphics:

Higher compression/smaller file size is better, as larger files take longer to download
Images should fit within a 640 X 480 screen, but 400 X 300 is a good goal
Only use pictures when necessary

Image Tags:

<img src=       tells the browser to find an image at the following source:

"images/brain.jpg"       the image named brain.gif in the folder called images

width=215 height=163 border=0       defines the height, width and no border.

Before we can add this html code to our html page, we need a graphic. One of the best ways to obtain information, especially graphics, is to simply take them as your own. In fact, some prople refer to the entire Internet as aa "large file server". This is not to imply that everything you see is yours for the taking, as many pages and graphics are copyrighted. But, rather than get into a philosphical discussion on the issue, let's learn how to steal a graphic which will not result in litigation. If you click on the following "steal Phil's graphics" page, you will find instructions.

Now, let's add some graphics to a new page and change some parameters:


<html>...

(you know, the usual: html, head, title, body stuff)

This is a brain:<br>

<img src=images/brain.jpg width=215  height=163  border=0>

<p>This is a bigger centered brain with a border:<br>

<p><center><img src=images/brain.jpg width=430  height=326  border=3></center>

<p>This is a brain on drugs:<br>

<img src=images/brain.jpg width=215  height=163  border=0><br>

Drugs

Save the file as graphics.html, and view it in your browser. Hopefully, it looked something like this example.

Other Image Tags

You can place text around an image and even define a space or "buffer zone" around that image. This becomes quite helpful when you are using an image to demonstrate a point in the text. Following is a list of tags which go in the <img src= tag:

hspace=5	defines a horizontal "buffer" 5 pixels wide
vspace=10	defines a vertical "buffer" 10 pixels wide

Index of topics

next topic: Linking to other Documents