Help: Images

First of all, the HTML you use to place an image on your page is
<IMG SRC="your_image's_URL">

There are three main forms that your image can be in: Bitmap (.bmp), CompuServe GIF (.gif), and JPEG (.jpg). Out of those three, only two will show on all browers: .gif and .jpg (.bmp only works on Microsoft Internet Explorer). From what I have learned, .gif images load faster on websites. .jpg images take only a little longer to load, but have more color (16 million colors compared to 256 colors in .gif). So whichever one you use is what you prefer.

I'll be using this image as examples:

that's it as a .gif. This is it as a .jpg:

Here is the code for the image in as a .gif:
<IMG SRC="https://members.tripod.com/whitewolves/smallhowl.gif">
simple, right?

You can do things with an image like with text (see "Covering the Basics"). You can center it:

And put it to the right:

Here are some things that help your image to load faster when viewing.

One thing you can do is put a height and width command in. Here's how the HTML looks:
<IMG HEIGHT="90" WIDTH="84" SRC="https://members.tripod.com/whitewolves/smallhowl.gif">

You can find out your image's height and width by veiwing the image by itself and looking at the top of the screen for the width and height. Click below to see what I mean (it'll open in a new window):
<IMG SRC="https://members.tripod.com/whitewolves/smallhowl.gif">

Now look at the top of the screen for "GIF image 84x90 pixels". See it? That's the width and height. The width is 84 and the height is 90 (width is always first). To find your images height and width post your image without the height and width tags. Then you view your page, right click on your image, and click "View Image". There! Now you can insert the height and width tags (yay!).

Here's another command you can use that helps the image load a little faster: the alt command. Here's what it looks like:
<IMG alt="Triandafilou Howling" SRC="https://members.tripod.com/whitewolves/smallhowl.gif">

The alt command puts words sort of "behind" the picture so people can see them while the image is loading. You can also see them when you put your curser over the image. A little yellow box pops up with them in it. Put your curser over the image above...see it? If you can't then that means you probably have a Netscape browser that's lower than 4.0. When I had 3.5 I couldn't see it, but now that I have 4.0 I can.

Want your image not to have that annoying white square background on it? Here's how you do it. This isn't HTML, but it helps make your site look better. What you'll need is Paint Shop Pro or LVeiw Pro. I use a demo of Paint Shop Pro 3.
Here is the image I'll be using. I want the blue to be transparent so that you can only see the wolf:

Open your image and then click on the eyedropper tool. Right click with the eyedropper on the color that you want to be transparent. You need the background color to be the color that you don't want to show (the foreground can be anything else). So look at the tool bar (usually to the right) and find the two boxes. See how one is overlapping the other? Well, the one in the back is the one you want to have the color that you want to be transparent in it. Now find "Colors" at the top and go to "Decrease Color Depth". Now click on "256 Colors". If that is faded and you can't click on it then that means that it already is 256 colors. To make the transparent background work you have to save it as a .gif. Now, go to "File" and click on "Save As". Choose "GIF - CompuServe" as the Save as type and "Version 89a - Noninterlaced" as the Sub type. Now click on Options (which is to the right of the Sub type). Click in the radio button next to "Set the transparency value to the background color" (which is the third one down) and click OK. If you don't want your paticular image to have a transparent background then click in the radio button next to "Do not save any transparency information". Now click on OK to save your image and there you go! Here's what mine looks like:

Questions? Maybe you'd like to know something that isn't on this page. Ask Me.