HTML Tutorial, Basic Lesson Six, By AmeriYank

In this lesson, we will learn how to compress graphics for web use. Ever been to a web site that seemed to take years to load? How long did you stay? Did you ever go back? Probably not.

The biggest cause of slow-loading sites is heavy graphics. So, how do you make them smaller in file size, but still look good? Since most of us in this group are interested in showing off the graphics we create, either to give them away for others to use, or just to say "See what I did", some of our pages might be a bit long-loading. But there are somethings we can do to make our vistor's happier.

Since this class is made up of people who use Paint Shop Pro and simply wanted to learn a little HTML, our discussion of graphics compression will be in regards to use of our favorite graphics program.

First, you can use thumbnails. These are smaller versions of the same graphic. In other words, to make a thumbnail, first make a copy of the larger graphic. Then, go to "Image", "resize". Click the circle by the words "percentage of original". Then, write a number in the "width" box. Start with 50 and see how it turns out. You can change the percentage of reduction if your first attempt doesn't look good.

VERY IMPORTANT: ALWAYS MAKE A COPY OF YOU GRAPHIC BEFORE YOU MAKE YOUR THUMBNAIL. THAT WAY, YOU ORIGINAL IS SAFE IF YOU MAKE A MISTAKE.

Now, on your page, you will LINK your ORIGINAL graphic to your thumbnail. What will happen then is this: your visitor will see the thumbnail, you have some text there that says something like, "Click here to see actual size".

For example, suppose you are giving away tubes that are 200 pixels by 200 pixels. And, the jpg images are 20,000 kbs each. And you have 25 of them on one page. The load time for your page will be so big, many people will just say "Heck with this" before they even SEE what you have to offer.

If you reduce the jpg to 50% of original, your 20,000 kbs become about 5000 kbs. Then you just link the two. Lets assume your original graphic is named "example.jpg" and your thumbnail is named "exampleth.jpg". The code on your page might look like this:

<a href="example.jpg"><IMG src="exampleth.jpg"></a> 
Click on above picture to see it actual size.

When your visitor clicks on the above link, they will see the graphic in it's actual size. But, they will also leave your page for a new one, and there is no navigation to bring them back to your original page. So, we want to force the new graphic to show in a new window. To do that, you write:

<a href="exampleth.jpg" target="new"><IMG src="example.jpg"></a> 
Click on above picture to see it actual size.

If your site is on NBCi, you need to use a little Java script to make it go into the new window. Soooooooo, if your site is on NBCi, use this code instead:

<a href="#" onClick=window.open('example.jpg');>
<IMG src="exampleth.jpg"></a> 
Click on above picture to see it actual size.

Choose a graphic you have created and make a thumbnail out of it. Where I wrote "exampleth.jpg", write the actual name of your thumbnail. Where I wrote "example.jpg" write the name of your original graphic.

Now, open your original page on the web site we are working on. Place your code into your page just BEFORE the "Visit AmeriYank's Site" section. Use this if your site is NOT on NBCi.

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

This is my first lesson in creating a web page. 

Please be patient with me.

<a href="exampleth.jpg" target="new"><IMG src="example.jpg"></a> 
Click on above picture to see it actual size.

<a href="http://www.ameriyank.com">Visit AmeriYank's Website</a>

<a href="http://www.ameriyank.com">AmeriYank's Site</a>

<a href="mailto:myemail@address.com">Send me email</a>

<a href="./folder1/page1f.html">to folder1 page1</a>
 
<a href="./folder1/folder2/page2f.html">to folder2 page2</a>

</BODY>

</HTML>