Images

WYSIWYG editors take a lot of the effort out of adding images to a page, but it helps to understand what is going on.]

Some packages e.g. The Web Publishing Wizard from Microsoft attempt to upload the images for you when you upload the page. If you are using WS_FTP or another FTP package, you will usually need to upload every image that is included "in" your page. [Although there appear to be seven images on this page there are in fact only 3 image files that are referenced]

For practical purposes, images on a page must be in GIF (Graphic Interchange Format) image.gif or JPEG (Joint Photo Expert Group) image.jpg. PNG (Portable Network Graphic) is not supported by the 3.x series browsers.

Trouble-shooting images

GIFs can also be transparent or animated

Paint Shop Pro will convert most standard formats (BMP, WMF etc) into GIF or JPEG

JPEG is a "lossy" (not lousy!) compression technique. You can set the degree of compression in JPEG - the higher the compression, the more detail is lost. GIF is lossless.

The general recommendation is to use JPEG for "real life" photographs (because it supports 16 million colours) and GIF for icons, buttons etc (GIFs are up to 256 colours)

To incorporate an image use the tag:

<IMG SRC="smilfce2.gif">

If you include ALT="A smiling face", people browsing without images or waiting for images to download will have more idea of what's going on your pages.

<IMG SRC="smilfce2.gif" ALT="A smiling face">

It is usual to incorporate the image dimensions (this allows most browsers to set the page layout and download the text whilst waiting for the images to download)

<IMG SRC="smilfce2.gif" ALT="A smiling face" width=200 height=202 >

You can add a border:

<IMG SRC="smilfce2.gif" ALT="A smiling face" width=200 height=202 border=5 >

and with Netscape, by enclosing the image in a tag and setting the colour attribute, you can change the border colour.

<FONT COLOR="#FF0000"> <IMG SRC="smilfce2.gif" ALT="A smiling face" width=200 height=202 border=5 > </FONT>

Altering the image dimensions allow you change the apparent size of the image:

<IMG SRC="smilfce2.gif" ALT="A smiling face" width=400 height=202 >
<IMG SRC="smilfce2.gif" ALT="A smiling face" width=100 height=100 >

See the HTML Primer and HTML Reference Library for other tags that apply to images

Transparent and animated GIFS

A standard GIF	A GIF with red set to transparent	An animated (transparent) GIF

Creating Transparent GIFs

Creating Animated GIFs

I have most often used GIF Construction set from Alchemy Mindworks, but there are now quite a few out there.

I repeat:
Some packages e.g. The Web Publishing Wizard from Microsoft attempt to upload the images for you when you upload the page. If you are using WS_FTP or another FTP package, you will usually need to upload every image that is included "in" your page.