Graphics

GRAPHICS

Graphics make your page look better, but it's important to keep in mind that the more graphics you use on your page and the larger their file sizes, the longer they will take for the user to download. It may take only a few seconds for a huge graphic file to load into your browser from your hard drive, but it may take several minutes for the same graphic to load over a modem connection, so please have mercy on your visitors. This also works to your advantage. If users get tired of waiting, they'll just hit the stop button and move on to someone else's website, and you could lose potential customers.

One way to shorten the waiting time is to reuse the same graphics throughout your site. Once they've been downloaded to the user's cache, they get quickly reloaded from their hard drive. This also helps to give the site a consistent look.

Make sure that the design of your page allows it to be used by people who can't see the graphics. Some people use text-only browsers, while others surf the net with the graphics turned off in order to speed up their access times, and visually impaired people use browsers that translate the text into speech or braille.

To create graphics, you can use a scanner to turn your photographs or artwork into graphics files. Also, there are many websites that offer free graphics that anyone can put on their page, but try to choose images that hundreds of other sites haven't already used. Don't steal graphics from sites that aren't offering them (but many people tend to be nice about it if you email them and ask permission). You can create your own graphics from scratch using one of the many software packages that are available. Finally, there are many companies that sell collections of clip art images on CD-ROM.

Graphics Formats

While many formats exist, the two most important ones for the internet are: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group), also called JPG.

GIFs are the older format and are more widely supported by various browsers than JPGs.
GIF images can contain from 2 to 256 colors, while JPGs can contain from 2 to 16,700,000 colors, although the more colors you use, the larger the file size will become. The file size of a 16,700,000 color JPG will be huge. 256 colors is more than adequate unless extremely high image quality is important to the website.
JPGs allow you to choose how much the file size will be compressed, but the more you compress it, the lower the image quality will become. GIFs will usually (but not always) have a larger file size than a JPG of the same image, although GIFs of simple line drawings or text will often be smaller than the comparable JPG.

Generally, you're probably better off using GIFs unless your website is dedicated to art or photography where the image quality really matters.

Interlaced GIFs / Progressive JPGs

Normally, the image will appear on the screen a little at a time from top to bottom as it downloads. With interlaced GIFs and progressive JPGs, a blurry version of the entire image will appear first and gradually come into focus. They let the viewer see what the image will be before it finishes downloading at a slight increase in file size. Progressive JPGs are new and not as widely supported. Your graphics software should let you choose this option.

Animated GIFs

Animated GIFs are created by taking a series of still images and putting them all into the same GIF file using special software. The GIF file then displays the images one after the other like frames in a movie. They can get a bit annoying if overused. They also increase the likelyhood of the dreaded General Protection Fault that will crash a user's computer. I made one for the travel directions page (hit "reload" if you want to see it repeat). The Animated GIF Artist's Guild has a lot more information as well as free samples. Not all browsers will support this feature.

Transparent Backgrounds

Graphics software enables you to indicate that a specific color in a GIF file (such as blue in this example) will be transparent. This causes the background color or pattern on your web page to show through the image, although not all browsers will support this feature.

Adding Graphics to Your Webpage

The Image Tag <IMG> places a graphic on the page by containing the source command that lists the graphic's filename. Case matters with the filename but not the rest:

Always include the width and height in pixels. You may have noticed that, on some webpages, the text is displayed right away along with empty "boxes" where the graphics will be when they finish downloading. On other pages, you see nothing for a long time, and then, suddenly, the entire page appears at once. Some browsers cannot display the text until they know the size and shape of the graphics, so they are forced to wait until most of the graphics have downloaded before displaying anything. If you tell the browser what the graphic's width and height will be, it can display the text immediately:

By changing the width and height numbers, you can make the same graphic appear to be many sizes:

Important: Even if you use this command to make a big graphic appear to be very small, the file size is still the same. To speed up the download time, you may want to create a smaller version of the graphic and use that instead. Of course, if you use this command to make a small graphic appear very big, this situation works in your favor.

The ALT command allows you to include some text that will be displayed in the graphic's place in browsers that do not display graphics. Otherwise, the user will see the word, "[IMAGE]" or something similar. It's especially useful if the graphic contains important information that is not included elsewhere on your page:

<IMG src="happy.gif" width=139 height=142 alt="This is a sample graphic that is being used to demonstrate the ALT command">

(If you hit the Reload button, you should be able to get a peek at the text)

If the graphic is just for decoration, the ALT command allows you to make the image completely invisible in nongraphical browsers, so users won't wonder what they are missing:

The ALIGN command determines how the text will position itself around the graphic (for purposes of clarity, from here on I'm going to show only the command being demonstrated; you should always include width, height, and alt):

<IMG src="happy.gif" align=bottom> Notice that there is only one line of text displayed along side the graphic. The rest is placed under it.

<IMG src="happy.gif" align=middle> Notice that there is only one line of text displayed along side the graphic. The rest is placed under it.

<IMG src="happy.gif" align=top> Notice that there is only one line of text displayed along side the graphic. The rest is placed under it.

<IMG src="happy.gif" align=left> Use align=left if you want all of the text to flow along side the graphic. This and align=right are the ALIGN commands that you will probably use the most.

<IMG src="happy.gif" align=right> Use align=right if you want all of the text to flow along side the graphic. This and align=left are the ALIGN commands that you will probably use the most.

Using HSPACE and VSPACE, you can control how many pixels of horizontal space and vertical space will be between the graphic and the text (or other graphics).

<IMG src="happy.gif" hspace=12 vspace=6>
Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures. Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute.

<IMG src="happy.gif" hspace=36 vspace=6>
Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures. Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute.

<IMG src="happy.gif" hspace=12 vspace=36>
Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures. Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute.

You can put a BORDER around the graphic and specify the width in pixels:

The border will be the same color as the text that you set in the <BODY> tag. Normally there will be no border unless you insert this command. However, if you use the graphic as a link, the border will appear automatically using the link color unless you insert BORDER=0.

The <IMG> tag can be placed within the <CENTER> tag the same way text can:

Putting it all together, the <IMG> tag is capable of containing a lot of information:

SRC is required. WIDTH, HEIGHT, and ALT should also be included. The rest are optional, depending on the situation. The order in which you list them doesn't matter. Also note that there is no the </IMG> tag.

Previous Section

Table of Contents

Next Section

HTML by Robert Delaney
robert.delaney@liu.edu