Web Graphics

Graphics by R. Glass
Revised:

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

Here we go ...

The question is, Was it worth it?. It took some time to make (and just about as long to download! It is over 50K!) but is there a value to it? It is technically accurate (the buttons match the equations). It might make for a nice image map (an image map is a graphic that has certain areas defined as links see: the the Department home page example of an image map)where the reader can click on part of the image and be taken to that page.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

A Picture Can Be Worth Over a Thousand Bytes.

In fact, a thousand bytes is a small. The little thumbnail (small images usually the size of an icon) gifs used as on department homepages are about 500 bytes each. The question really is, "Why use them?". I like the idea of a image associated with a page. It allows for recognition and easy navigation. If possible, I make a thumbnail gif and use that as a link back to the referring page. Obviously, this doesn't always work out. Some images when resized become just a blob of color resembling a biology experiment gone bad.

For example, the gif on the top of the main page looks like this : .

Not very informative. I could always make something like this:

which would get the message across. Instead, I decided to create this:

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

HTML and the <IMG> tag

Assuming we do want to add images to a web page, it can be done very easily with <IMG> tag: The syntax is:

<IMG SRC=filename options>
where
filename is the URL to your graphic and
options are options available for the <IMG> tag. (See url.htm for information on the image tag.

Of the options, there are several important ones.

ALT=: This is text that gets displayed to browsers that do not have graphic capability. The newer generation of browsers (example Netscape 3.X) reveals this text prior to displying the image.
WIDTH= HEIGHT=: This could be used to re-size images but not all browsers obey it. Although the image is smaller, the the actual number of bytes is the same. A better reason to use these options is that it will allow the browser to begin displaying text while the image is still being downloaded.
The height and width of an image can be gotten from any graphics program (displayed as height x width). One advantage of HTMLed is that when using the IMAGE button, that information is automatically filled in..

The graphic can be in many forms. The most common is GIF (Graphic Interchange Format) (PC extension: .GIF) and JPEG (Joint Photographic Experts Groug) (PC extension: .JPG) Both have their respective advantages and disadvantages. JPG files are compressed. The compression algorithmic will alter and blend some of the colors. It is often refered to as a lose-y compression. On the other hand, since they are compressed, the files are smaller and will download quicker but are then decompressed by the browser.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

Transparent Images (GIF87a and GIF 89a) and Interlaced GIFs.

The idea of a transparent gif is that a particular color is transparent, namely that color will take on the color of the background. A nice little program that can accomplish that is called LView (MMedia Research: LView Pro web page). This program allows some important and few basic features. The first is a cosmetic feature while the other can enhance speed up the appearance of the page.

GIF Files.

There are two types of GIF files 87a and 89a. The background on a GIF 87 file will always show through as the rectangular region surrounding the gif.

comparison of GIF 87a/89a
Gif 87a	Gif 89a

Now change the color of the background using your browser (If you are using Netscape, go to Options, General Preferences, Colors. Click the custom color box and pick a color - maybe a nice pink, now check the box marked ALWAYS USE MY COLORS, followed by OK). Don't forget to go back and uncheck the box saying ALWAYS USE MY COLORS. There are many references to GIFs and making them trasnparent. One such page is http://members.aol.com/htmlguru/transparent_images.html.

Interlaced GIFs

Have you ever noticed how some images fill from top to bottom while others some seem to 'come into focus'. The latter is what is called an interlaced GIF. Interlaced GIFs also provide the advantage that it allows your browser to place the text on the page prior to the GIF fully appearing. This allows the reader to scroll down through the document to find important text or links without waiting for the image. Try it with this document. Clean your browsers disk cache and quickly scroll down. You will notice that all the text is is available prior to the image appearing.

Other comments on LView Pro

These are some of the feature of the program:

Allows creation of GIF87a, GIF89a.

Creates an interlaced GIF.

Imports GIFs, BMPs (Bitmaps), PCXs, JPGs.

Crop and re-size documents to a smaller size.

Adjust contrast and colors using Gamma correction, Hues and interactive RGB (Red-Green-Blue) options.

Add text to a GIF.

Screen capture (either Window, Client or Desktop) feature. This will allow you to easily capture graphics and text from other programs.

Will not convert PC icons (.ico files) to GIFs. For that, you may want to also use Graphic Workshop available from Simtel or some other software respository.

Does not provide a browser to view images. Graphic Workshop will.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

LView Instructions

Steps In Creating a Tranparent GIF89A Using LView.

Get the image into LView. This can be accomplished
- opening the file (.PCX, .GIF, .BMP etc), you will have to change what file type you want.
- Or starting LView and under EDIT, choose CAPTURE (I usually capture a Window Area), then click on window you want captured.
Using the mouse, outline the area you wish to keep then choose EDIT - CROP.
Under OPTIONS, choose BACKGROUND. A color chart will appear. I perfer using the DROPPER button on the color chart.
Click the DROPPER and then CLICK on an area of the graph that has the color you wish to be transparent (dissappear).
Choose SAVE AS and make sure you select GIF89A.

Using LView to capture screens

Run LView, and then minimize it.
Position the window you wish to capture on top.
Restore LView and choose EDIT then CAPTURE followed by WINDOW. LView will minimize.
Click in the window to capture.
LView will pop up with the captured window.
Using the cross hairs, box the area you wish to retain.
Choose EDIT then CROP. The toughest part is that the menu bar for the captured window and the LView are both there. Be sure to use the TOP menu bar.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

Creating Graphics

You can find loads of graphics on the Internet ranging from high quality photoimages to 32x32 thumbnail images. Sites such as
These sites are by no means the only. A simple search will reveal many such sites. If you know of any, please drop me a note and I will list it here.
Using LView you can capture the contents of a window. This is useful technique when looking to create graphics from say, a word processor or spreadsheet.
You can use inexpensive paint programs such as Paint Shop Pro, PC Paintbrush Designer or even the free Paint program that came with windows.
You can use high-end graphics packages such as Corel. The new versions support making web-ready graphics. Namelly, they will automatically create the GIF89A format.
Draw or TextArt features of word processors such as Word or WordPerfect.
You can use your imagination. Any program on your system can be used to create graphic resources.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

JPEG Versus GIF.

For fear of it dissappering, I copied the following text from http://www.boutell.com/faq/jpeggif.htm

Which format is better for WWW image purposes, JPEG or GIF?

Almost all browsers can view inline JPEG, and there are free libraries available to do that, so the remaining browser vendors are very short on excuses. There is no need to avoid inline JPEG any longer. So the proper question is, which format is better for your specific purpose?
JPEG is for photographic images. GIF is for line-art images, such as icons, graphs and line-art logos. You will very likely find that JPEG produces smudgy line art and GIF produces large and washed-out photographs. Use them accordingly.
However, never convert GIF to JPEG if you can possibly help it. Once your photograph has been reduced to the mere 256 colors supported by GIF, it's too late. Go straight from a lossless 24-bit format supported by your scanner, such as TIFF or PNG, to JPEG.
Since JPEG is an approximate representation of the image, you shouldn't save things as JPEG and then edit them further later and save them again. You can expect progressive loss of quality each time you do that, especially with different JPEG quality settings. If you must edit a photographic image, work with it in TIFF or PNG format until it is ready for publication, then convert it to JPEG for the web.
If your images can't tolerate being reduced to 8 bits for GIF or losing precise accuracy for JPEG, TIFF and PNG are your best options. Web browsers are beginning to support the latter, and many external viewers support both. The vast majority of web sites should be using GIF for line art and JPEG for everything else, and migrating from GIF to PNG as browser support for PNG becomes more widely available.
Also see the Independent JPEG Group's JPEG FAQ <URL:http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/top.html> for more information about JPEG and software that can produce JPEG-format images, including progressive JPEGs.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

Some Examples

For the mathematical science people reading this, you can capture formulas from your word processor. The mathematical formulas in the following statement were first created in Word Perfect and then captured and cropped using LView.

If for and diverges then diverges.
Certainly this technique is not restricted to mathematical sciences. Todays' word processors provide drawing tools, text art that can also be captured. Don't forget spreadsheets where graphics and tables can also be captured.

The following graphics were assembled using PC Paintbrush®, an inexpensive paint program (approximatly $12.00) on a CD Rom. One can also use the paint program that comes with Windows to accomplish the same.

For example, the following was generated in about 2 minutes using Paintbrush.

Using the text element, you can create graphics by choosing the different fonts. The box was made by

making the box with a thick border using the box drawing tool.
coping to the clipboard
changing the black border to gray
pasting back and overlying the box with the black border offset.

You can sometimes get better shadowed text by using the 'box' idea mentioned above.

I have used a variety of tools ranging from Paintbrush to Corel Draw. One useful tool I found was PC Paintbrush Designer, an inexpensive paint program (approximatly $12.00) on a CD Rom. Another was a collection of Windows icons (actually cost me $1.99). This gave me over 1500, 32x32 Windows .ico files and a decent editor to modify them. Using Graphic Workshop, I converted them to GIF format.

Some of the resources came from mathematical graphing programs such as Converge®, and Maple® by simply cutting and pasting. Mathematical equations were also cut and paste from my exams.

The following graph was made with Maple and colored with Paintbrush Designer.

Example of Graphic Cutting and Pasting.

I'll use an as example of pulling together resources from various sources, the image at the top of this page. I'll change the size using the HEIGHT= WIDTH= attributes. If your browser doesn't support it, the image will be the same size.

First notice the center, that tube-like object floating in space. That is actually of of the sample tube plot from Maple, (cos(t),sin(t),0 ) t=Pi..2*Pi,radius=0.25*(t-Pi)]). This was then cut and pasted to the PC Paintbrush designer and saved.
Going through my mathematics exams, I performed a cut and paste of several mathematical equations. I then captured the Word Perfect window using LView.
Using my $12,00 Paintbrush Designed, I drew the rectangles, color-filled the areas (the program has a gradient fill option that produces the light to dark patterns).
Making use of several windows, each containing the various graphic elements, I assembled (via cut and paste) and re-sizing the images and text to fit inside the rectangles.

Table of Contents
Introduction	Image File Size	<IMG> Tag	Transparent GIFs (89A)
LView Instructions	Creating Graphics	JPG vs. GIF	Examples

R. Glass