Images and the web

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen.

Images

Why won't my images display?

Optimizing images

What file types are supported?

Image borders

How do I create a slideshow? (JavaScript)

How do I stop people copying my images? (JavaScript)

Creating and using thumbnails

Images as page backgrounds

Background images without tiling

B) If it was, does the directory structure of the link and the actual directory structure match?

A couple of things you should know about web-servers. Most run UNIX not Microsoft software, this makes them behave slightly differently. When you specify the directory structure Microsoft uses "\" but also understands "/". Unix uses "/" but does not understand "\". For example, you may have a directory called "Images" inside a directory called "Web". To ensure you can link into the "Images" directory you should use the form "Images/Web" not "Images\Web" as you would do in DOS.

Unix is also case sensitive, what this means is that MyPic.gif is not the same as mypic.gif. You must ensure the name of the file and the link that refers to it are spelled the same, including the letter casing.

One of the slowest things to load when viewing web pages are the graphics. We've all been to sites where there are huge, pointless images that take forever to download. This is a short introduction of how to optimize your graphics for web pages.

The images you start with should be good quality. I regularly start with scanned .BMP images several megabytes in size for use on this site. These are usually scanned at 300dpi (dots per inch) or better and contain the full range of colours. What I usually do is save the image at each stage of the following operations, so that if I do manage to mess it up, I can always reload it, or in the worse case, reload the original image. If you plan to use photographs it's best to use bitmaps (such as BMPs) for working on an image. Only convert it to JPG once you've done the following to it.

The first thing to do is to take a look at the image you want to use and ask yourself a few questions. First of all, is it relevant, do you actually really need that graphic? The next thing to ask is how much of that graphic is relevant? If you decide that you don't need all of an image to make your point then you can crop the unwanted part away.

This photograph is of a mural in Marshall, Illinois
but most of the photo is of the wall, not the mural
The size of the original image is 5,594Kb

By cropping the image it looks much better, if I want to concentrate on individual parts of the mural then that can be done as well...
The size of the unoptimized image is 1,838kb (32% of the original)

Now you've got an image that you really want to use on your site you can now fiddle with it to reduce the file size. Start by lowering the dpi of the image, 72dpi is usually a good standard to work with for web pages, but I often use 100dpi. Next, size the image to what you want on your website. I usually use images that are 2, 3 or 4 inches high, and at most 6" wide. My favourite image editor, Picture Publisher 8, can do both operations at once.

JPG - 50 dpi, 256 colours, 20% compression - 16Kb
A slightly smaller file size but pixilation is visible

The next step is to reduce the number of colours in an image. You'll have to experiment with this a bit. When using GIFs, for simple images then anything less than 16 colours may usually be enough. For photographs the you may be able to get away with 256. The number of colours in a JPG doesn't affect the file size so much as the appearance of the image.

These GIFs have been saved at 256, 16 and 8 colours
the images sizes are 5.23, 3.69 and 2.81 Kb respectively

When using photographs you may find the image went slightly fuzzy when you resized it. Most image editors have a "sharpen" tool that can correct this. This should be used as late in the process as possible. The reason being is that these tools don't actually sharpen an image, what they do is increase the contrast between adjacent pixels or at the edges of an area of pixels. By repeatedly "sharpening" an image you may be losing detail. Most of these image filters may not be available when you decrease the colour depth so it has to be done before you do this.

Once you've got the image to the size, resolution and colour depth that best suits your needs save it as both a GIF and a JPG. After a while you'll learn which format gives the best results for which type of image. You can't say for sure which is going to give the most acceptable results for which type of image and file size without seeing the file sizes for yourself.

JPGs are lossy, that means the lose detail in an image to reduce the file size. Converting and saving to JPG format should be the last thing that should be done. Working on JPG images almost invariably means losing too much detail as you work on them. JPGs are fine for images with detail in the background that you don't mind losing, GIFs are better for simple images, or those that need to be kept sharp.

When you add the image to your page, ensure that you specify the images dimensions in the HTML. The code should look something like this :-

Although you've already specified the image dimensions when you saved it, putting the dimensions in the HTML reserves a space for it. This prevents the text on your page jumping around as the images load.

If you're using thumbnail images linked to show a larger image don't force the image you've just created into a smaller space by using something like :-

This is because the larger image still has to be downloaded and resized by the browser simply to create the thumbnail. Simply create a smaller image of the correct dimensions from the larger image and use that instead. I usually put a "t" after the image name to signify that it's a thumbnail of a larger image. So my code will look like :-

Most sites say that only the .JPG, .GIF and .PNG images file types are supported. However, more and more image types are being added, these include .jpeg, .bmp, .wmf, .xbm and .art. Sime browsers can display an enormous amount of different image file formats, but there are problems. The reason that the three main formats are GIF, JPG and PNG is that these are machine independent. That is, a GIF created on a Mac are viewable on a Windows computer and vica versa. They also create much smaller image sizes than other image formats.

GIF - Graphics Interchange Format. This format is used as it supports transparency and interlacing. The GIF 89a format supports multiple GIF images that can be displayed one after the other to produce simple animations. Their biggest disadvantage is that they can only show a maximum of 256 colours, which 256 colours is up to you as it supports palette information. The file size of GIFs can be reduced by reducing the number of colours used in an image. GIFs are best suited to simple images and diagrams.

JPG - Created by the Joint Photographic Experts Group. This format supports very high compression ratios and 24 bit (16 million) colours. It uses a "lossy" compression technique which means the more the image is compressed, to reduce file size, the more image detail is lost. The format is best suited for photographic type images. It does not support transparencies but does support progressive scanning, a type of interlacing.

PNG - Portable Network Graphic. PNG uses lossless compression techniques. It can support millions of colours, transparencies and interlacing. It will produce slightly smaller image files than the equivalent GIF image.

Image file sizes (Kb) - (300 x 500 image at 100dpi)
	BMP	TIF	PCX	GIF	PNG	JPG (10%)	JPG (50%)
Full colour	456	257	367	-	228	26	11
256 colours	154	98	127	83	74	27	11
16 colours	77	24	40	24	22	28	11
8 colours	77	16	27	15	14	29	11
2 colours	77	4	4	4	3	14	9

BMP (Bit Mapped), TIF (Tagged Image Format) and PCX formats are not optimized for the Internet and should not be used on web pages. They are included here as a comparison.

Photographs usually look best with at least 256 colours or shades of grey and saved at not more than 50% compression (I find 20% is good) as JPGs. Diagrams, charts, cartoons and other images are best at 16 colours or less and saved as GIFs or PNGs.