Introduction
Many of us already know the basics to posting graphics.
This topic will teach you how to post them so that they will not slow down the loading of the rest of the page (or topic).
 

The Tags:  <IMG SRC>
There is one basic HTML tags for posting images.  It's the <img src> tag.  This tag denotes the location source of the image you are wanting to show.

 
<IMG SRC>
The IMG SRC tag shows the viewer's browser where to find the image.  The location for the instructor worm above is found at http://www.rivcowm.org/Recycling/Images/worm_teach1d.GIF, so the basic tag for the image would be:

<IMG SRC="http://www.rivcowm.org/Recycling/Images/worm_teach1d.GIF">

 

MOST PEOPLE STOP WITH THIS LIMITED INFO!  PLEASE READ ON- THERE IS SO MUCH MORE.

SIZING!
We have all seen it.  You come to a web site or a discussion board topic and the whole page is stopped as we wait and wait and wait for one image to load.  Stop the wait by sizing your image.  When you size an image, the viewer's browser reads the image size and "reserves" that space while continuing to load the rest of the page.  It continues to fill in the image as it's loading instead of holding up the whole page while it loads.

How do I find the size?
If you use Netscape, simple right click your mouse over the image and then click on "view image".  The image will show up on a page all it's own with the size noted in pixels (a unit of measurement) at the top of your browser.  It always lists the width first and then the height.  The instructor worm's size is stated as "GIF image 163x203 pixels - Netscape"  The tag for the image with the correct size would look like this:

Ok, now we're done, right?  No!  There is one more VERY important element to the tag.

The ALT element
Many browsers are not able to view images for one reason or another.  Some people turn off the image option to enable pages to load faster.  Blind people cannot see your images and their browsers will tell them what is in that spot if you have used the 'alt' portion of the tag.  If a person does see images (as most of us do), then while the image is loading, they will see the "alt" portion of the image first.  Also, you get the added "umph" by putting whatever you want in words when someone passes their mouse over the image.  Run your mouse over the instructor worm at the top and you will see how I used the "alt" element here.

The tag is now a lot longer, but we have maximized the effiency for all viewers.  Here is how it looks:

One last note on the tag elements:

You now have four elements to the tag:  SRC  WIDTH, HEIGHT, ALT.
You do need a single space after each element except for the last one.  Look up at my tag above.  There is one space after the " (before "WIDTH"), one after "163", one after "203".  Unfortunately, HTML needs the spaces (but only one!) to be able to decifer the information.

You use Microsoft Internet Explorer???
(If you use MIE and can give the basic info on how to locate the size, please post it here. Thanks!)
 

Sources for Graphics
Animated gifs - http://www.animatedgif.net/
Disney clipart - http://www.disneyclipart.com/
Everything! Sorted by category - http://webclipart.miningco.com/mlibrary.htm?COB=home&PID=2747
Another mega-link page - http://www.fishnet.net/~gini/cool/

{Please post as many graphic links as you want and I will include them on the web site with this workshop.}
 
 
 
 

As always, feel free to use this topic as your area for practice, questions, input and links to share.   This topic will be reposted on Saturday and added to the website later in the week.

Best Wishes,
Starie Eyes
 

Next session: Posting links