Graphic Editing and Image Optimization

by Randall S. Davis

"Sharing ideas is what the Internet is all about!"

- Randall Davis
Japan

[BACK TO COURSE]

What types of graphic images can I use?
Where can I find free images?
How can I optimize images for my home pages?
What are the HTML tags for adding graphics?
How do I scan and create my own graphics?

Purpose of Lesson:

You should be able to add graphics to your home pages.

I. What types of graphic images can I use?

You can use most graphics that have been saved in .gif or .jpeg formats. Graphics can be purchased or, in some cases, downloaded free from the Internet. Be sure the images can be used legally on your site.

I. Where can I find free images?

There are many sites on the Web that provide free web clip art, but be sure you read their policies on the use of the images. Some sites only allow you to use images on non-commercial sites. Also be sure that the site owns the copyright to the images you want to download. Some web sites go around the Internet collecting images without asking permission from the true copyright holder, and this is illegal in many cases. To find free images, try visiting a search engine and typing keywords like "free clip art graphics." Visit Barry's Clip Art for one collection of images.

Perhaps you want to create your own 3D or animated (moving) graphics. Visit Media Builder to create custom banners and graphics like this:

If you want to edit your images, you can use GifWorks. The program only works with .gif images, but you can use Netmechanic.com to change your .jpeg images in to the .gif format. The original looks like this:

But the online tools from GifWorks let me edit it like this:

How can I optimize images for my home pages?

Once you have images, you should "optimize" them for the Web. Optimize means that you change your images so that they take up less space on your server and load faster on your pages. You can do this in several ways:

reduce the image's physical size;
reduce the number of colors displayed in the image;
reduce the resolution of the image in terms of dots per inch (dpi)

The result is that your visitors don't have to wait a long time to see the images. One great site for doing this is Spinwave. These sites reduce the size of images by reducing the number of colors of the image. In most cases, you should make your images as small as possible in terms of the amount of space it requires. My picture on the front page of this site is 6,889 bytes. To understand what a byte is, approximately 140,000 bytes fit on a 3.5 inch floppy disk; 1,000,000 bytes fit on a Zip disk.

Another other great site for optimizing or creating basic effects is MyImager.

What are the HTML tags for adding graphics?

Here is what a basic image tag would look like:

<IMG SRC="top.GIF">

Here's what this means:

IMG refers to "image"
SCR stands for "source" and points to the location where the image is found
top.GIF is the name of the image you are using

Here's what it looks like on the page:

<IMG SRC="images/top.GIF" WIDTH="14" HEIGHT="16" ALIGN="Right" ALT="top" >

Now, you can tell the browser how to show your images using the code below:

WIDTH and HEIGHT: Adding this information will allow visitors to read the text of the page even though the images haven't finished loading yet.
SCR: "source" and points to the location where the image is found
ALIGN: the location on the where the browser should show your image
ALT: the name of the image for those who view your page with imags off