Adding Graphics to Home Pages

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 (click HERE to see an explanation of these types). 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?

Let's say you want to add this graphic to your page:

Here is what a basic image tag would look like:

<img src="top.GIF" height="14" width="16" alt="top" ALIGN="Right" >

Here's what this means (Note: You can use upper-case or lower-case letters for the code):

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
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.
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 images off

Steps to Scanning Images

Here are some basic steps to scan images with an Epson scanner if you have Adobe ImageReady installed on your computer on a Windows machine (these settings are based on the location of the program on the machine I am using, but would be similar on others):

1. From the Start menu, open Programs - Adobe - Photoshop - Adobe ImageReady.

2. Open File - Import - Twain Acquire. This will open up the scanner in Manual mode.

3. Select the area you want to scan and then click Preview.

4. The default, or usually setting, is for color pictures, so you do not need to adjust the Image Type setting. Just set the scanning resolution at 72 dpi (dots per inch). This is the ideal setting for web images.

5. Click Scan and then the image will appear in the ImageReady window. You can close the scanner settings window. You can adjust the size of the area from the Image menu in ImageReady.

6. The image will appear in a window with several buttons at the top (Original, Optimized, 2-up, and 4-up). Click on the Optimized tab to see the image. You can also make additional changes with other settings in the program, including the options that appear in the Optimze window at the right of your screen.

7. Open File Meu and select Save Optimized As . . .

8. Save the image as a jpeg file to your Zip disk.

9.Upload to your website and link to your html pag

Practice Quiz Questions

[BACK TO COURSE]

CHAT HANDOUTS LINKS SEARCH STUDENTS TESTS TOOLS VOCAB HELP