<IMG SRC="name_of_image.gif" or "name_of_image.jpg/jpeg"
HEIGHT="% of # of pixels"
WIDTH="% of # of pixels" ALIGN="baseline/left/right/middle/ bottom/texttop/absmiddle/abstop"
BORDER="# of pixels" <!if you do not apply a "0" as border size then your image will automatically be bordered with your link colour if you make the image a link>
ALT="text to be read by those with no image viewing" />

Names of image files and pathnames must be written precisely.

If the image file is in a folder stored in the same folder as your referencing html document, specify the folder then the image:
e.g <IMG SRC="pics/oksauce.html">

If the image file is in a folder in another folder other than the one storing the referencing html document you tell the broser to go back layers until it finds the first specified folder by first typing 2 periods and a forward slash:
e.g <IMG SRC="../history/pics/oksauce.jpg">

You can also specify the full URL for the image. This can be useful if you are using an image stored on another site or change the location of the referencing html document:
e.g <IMG SRC="http://www.labyrinth.net.au/~saul/history/pics/oksauce.jpg">

<IMG SRC="../history/pics/oksauce.jpg" WIDTH="108" HEIGHT="204" ALIGN="middle" BORDER="0" ALT="OK sauce graphic"> calls this image:

But even a small change, such as substituting uppercase for lower, means the browser has no hope of finding it.

E.g <IMG SRC="../history/pics/OKSAUCE.JPG" WIDTH="108" HEIGHT="204" ALIGN="middle" BORDER="0" ALT="OK sauce graphic""> results in a 'missing image' icon"

• If you are scanning images scan them at as high a dpi as you can (suggested 300 dpi for most images) and keep a native format copy7 of the original image.
• Only make a web copy when you are sure that you have finished editing the image.
• Always save web images at screen resolution (72dpi)
• Never save images at a larger size than you are going to display them.
• Alway try for the smallest file size you can whilst maintaining acceptable quality

CompuServe's Graphics Interchange Format (GIF)

Always use the GIF graphic format for images that mostly consist of flat colors (including line drawings); e.g diagrams, navigation graphics, or any graphic that contains text.

Advantages

• The most widely supported graphics format on the Web. All graphic Web viewers support the GIF format for inlined images.
• GIFs of diagrammatic images look better than JPEGs.
• GIF supports transparency and interlacing.
• Only GIFs can be used for background images and GIF animations

GIF compresses images in two ways. First, it uses something called Lempel-Ziv encoding, which counts rows of like-colored pixels as a single unit -- that is, it compresses horizontally across the image. Second, it limits itself to indexed color.

GIFs with sufficiently few colors realize greater compression: 128 or fewer colors are referenced with 7-bit data; 64 or less with 6-bit data; and so on, down to a 1-bit, two-color GIF. This makes GIF an optimal format for simple line art, and that means there are limits and rewards to adding or removing colors.

256 colours 29K	128 colours 24K	64 colours 19K	32 colours 14K	16 colours 11K
	8 colours 8K	4 colours 5K	2 colours 3K

Interlaced	not interlaced
Transparency applied to yellow

Interlacing

The conventional (non-interlaced) GIF graphic downloads one line of pixels at a time, and Web viewers like Netscape display each line of the image as it gradually builds on the screen. In interlaced GIF files the image data is stored in a format that allows the browser to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is still downloading. The "fuzzy-to-sharp" animated effect gives users the illusion that the graphic is downloading faster than it actually is.

Transparency

The GIF89a file format allows you to pick one color from the color lookup table of the GIF to be transparent. Using current image editing software like Adobe Photoshop (and many shareware utility programs) you can select one color to become invisible. Normally the color you select is a background color.

Antialiased images will have a fuzzy 'fringe' of pixels because they are a slightly different colour from the opne chosen as the transparency colour. To prevent this either make sure your image is not antialiased or choose a background colour that was close to the colour you made transparent.

What is a GIF

GIF was popularized by the Compuserve Information Service in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted the GIF format for its efficiency and widespread familiarity. You may see references to the different GIF formats, such as "GIF87a," or "GIF89a." All forms of GIF images will work in Web browsers that support the basic GIF file format, so that you do not have to worry whether your readers will be able to see your GIF graphics, regardless of the GIF version that you use. Users whose browsers support the transparency and interlacing (such as Netscape Navigator and Microsoft Explorer) will see more sophisticated visual effects, but everyone will see your basic GIF images.

JPEG

Developed for use with photographic and continuous tone imagery. Do not use for flat-colour or line-work graphics.

Advantages

• Huge compression ratios are possible, for faster download speeds.
• Gives excellent results in most photographs.
• Supports full-color images (24-bit "true color" images).

How it works

The JPEG format compresses images by accurately recording the brightness of each pixel but averaging out the hues, which our eyes distinguish less accurately. In effect, it records a description of an image, not the literal composition of that image. The viewer's Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image. The accuracy of the reconstructed image depends on how much compression is applied. The decoded hues are rendered in sample blocks with diffused shapes. Since these blocks tend to overlap, it's very difficult--and takes a lot of data--to produce a distinct boundary between colors. But this technique works very well for photographic images with gradual color changes and no sharp edges.

Warning

If you open a JPEG and modify it, you're modifying the interpreted bitmap rather than the JPEG data itself. Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process, and the resulting image will be further degraded. Never resave a JPEG if you don't have to.

JPEG Image Artifacts

The JPEG algorithm was optimized for compressing conventional pictorial photographs, and is also very good at handling complex realistic illustrations (which look like photographs). Photos and art with smooth color and tonal transitions, and few areas of harsh contrast or sharp edges are ideal for JPEG compression. However, most page design elements, diagrams, the typography within images, and many illustrations are composed of hard-edged graphics and bright colors that are seldom encountered in photographs (part a; b is a magnification of the diagram). JPEG compression can be quite poor at handling many computer-generated graphics, buttons, type in images, or any other hard-edged "artificial" colored object seen in artwork or diagrams. When compressed with JPEG, diagrammatic images show a "noise" pattern of compression garbage around the transition areas (c, below) the JPEG algorithm "wants" to see smooth tonal transitions and cannot properly reproduce the harsh transitions at the edges of diagrammatic graphics.