Preparing Images and Graphics for a Web Page

By John Alldred

Image File Types

Acorn Image Files

The two main types of graphics file that are "native" to Acorn are: Note that Spritefiles should only be used in "square pixel" modes (not the rectangular pixels as in mode 12 for example).

Unfortunately, the World Wide Web started up without consulting Acorn first(!), so neither of these types are suitable for Web-site images.

WWW Image Files

The three types of file (all "bit-map") that are acceptable are: Of these three, TIFF usually contains far more colour detail than is likely to be reproduced by an average browser; and many browsers do not support it at all. While it is a good way of storing a photograph digitally, it is not usually appropriate for graphics on a Web page.

GIF Image Files

GIF is the most popular file format.

Theoretically they can contain 2, 4, 8, 16, 32, 64, 128 or 256 colours; but those created by conversion from SpriteFiles will usually be limited to one of 2, 4, 8, 16 or 256 colours, or 4, 8 or 16 greyscales; and those created from WebGif2 are always 256 colours.

They can include a "palette"; indeed, unless they are simple 2-colour black-and-white, I'd say they should have a palette. However, a palette for a 256-colour GIF takes up 768 bytes, so bear that in mind if you're trying to keep your image-files small!

GIFs can be "transparent"; but instead of having a separate "mask" (like SpriteFiles), one of the "colours" in the palette is assigned to be transparent (leaving 3, 7, 15, or 255 colours left to play with).

GIFs can be "interlaced": this means (roughly) that the order of the rows of pixels is swapped around so that the procedure in the browser that plots it on to the screen can first plot every (say) fourth row of pixels to quickly build up a low-resolution image, then carry on filling in the missing rows for the final full-resolution version.

There is no point in interlacing small images.

Note that in !Voyager, all GIFs received are actually converted to sprites first, and then plotted to screen all in one hit, so you won't actually see interlaced images "building up".

The data in GIF files is "compressed", so the file-size can be significantly less than that inferred by its pixel-count.

JPEG Image Files

JPEG is popular for photographs. The high degree of data-compression that is used enables even quite large pictures to be held in a file occupying only a fraction of the number of bytes that a spritefile or GIF would require.
However, they offer no advantage at all over a GIF for encoding something simple like an icon sprite.
Because they need decompressing by the display section used by the browser, there can be a significant delay before they appear on screen.

How many Colours?

Let's say that not many visitors will be viewing in 16 million colours, so there's not much point in putting up an image of that colour-depth!
If you're going to have a downloadable TIFF or JPEG file, you might well want a "deep" (24 bits-per-pixel) colour image; but for an "inlined" image (that appears on your page) that's far too much!

For simple icons, and possibly logos, 16 colours are usually enough (and sometimes just four will suffice).

For colour photographs (or complicated logos with graduated fills) you will usually want a 256-colour image (the maximum for a GIF).

For black-and-white photos, you could in principle have 256 greys, but in practice your visitor won't be able to show such subtlety, so sixteen grey-levels will do (remember that a 256-colour screen mode only contains sixteen greys including black and white, and the RiscOS 16-colour Wimp palette contains eight greyscales).

Remember that !Paint Spritefiles can have their palette edited; You can create a mode 20/27 sprite in sixteen different shades of green providing you don't want any other colours!

However, as stated earlier, WebGif2 will always generate 256-colour GIFs.

File Conversion

DrawFile to SpriteFile

The easiest way is to display the drawfile on-screen in !Draw, change the "Zoom" factor to get it to appear the actual size you want, select a screen mode which has as many colours as you want the sprite to have; and use !Paint's "Snapshot..." facility (from the icon-bar) to capture the part of the screen that contains the Draw image.

You can then load the sprite back into !Paint to tidy it up; this also allows you to add a mask if you want a transparent surround. Make sure your sprite has a palette.

SpriteFile to GIF

Argonet have provided a utility called !WebGif2 (inside WebKit2) which does just that. It has a !Help file: so read it!

At its simplest:

  1. drag a SpriteFile onto the !WebGif2 icon-bar icon, and a window will open showing what the image looks like.
  2. A control pane underneath allows you to select "Interlaced" or "Mask" ("transparent"); if you select "Mask", you also choose which colour number will be converted to transparent.
  3. There are two icons, one each for GIF and Sprite (the utility can convert in either direction); and the last-known filename of the image (initially, wherever you got it from).
  4. Delete or edit that filename into what you want to call it (if you're converting to GIF, a name of six or fewer lower-case characters, followed by "/gif") and drag the GIF icon to the directory containing your site (or wherever else you want to keep the file).

SpriteFile/JPEG/TIFF to SpriteFile/JPEG/TIFF

Your best bets here are either !ChangeFSI or !Creator.
RiscPCs (RiscOS 3.5 and up) include !ChangeFSI in Utilities, otherwise you can download it from Acorn's FTP site ftp://ftp.acorn.co.uk/pub/riscos/releases/changefsi.arc
!Creator can be downloaded from Argonet's FTP site ftp://ftp.argonet.co.uk/pub/Acorn/PD/Graphics/creator.spk (and can create GIF files too); this is "ShareWare".

Photograph-Scanners

What exactly you do will all depend on what particular combination of hardware and software you have!

One tip that I use:

  1. Decide what size (width and height) in pixels you want the finished image to appear;
  2. Measure the width and height of the photograph (or rather, of the portion you want) in inches;
  3. Divide the dimensions in pixels by the dimensions in inches (you should get approximately the same answer for each) to get "dots-per-inch";
  4. Get the scanner to scan at the dpi resolution you've just calculated (or the nearest to that it offers).
PS: Remember to ask for as many colours as you need, but no more!

Thumbnails

There will be occasions when you want to have a number of high-quality photographic files on your site (probably in TIFF or JPEG format), and find yourself in a dilemma because
  1. if you include them on a page, that page will take forever to download, but
  2. if you don't include some images, nobody will know what pictures are available.
The solution to this is a "thumbnail": a small low-resolution (GIF) image which does occur on the page, and on which the reader can click to download the full-resolution version if they decide they want it.

The minimum HTML code to achieve this might look like:
<A HREF="photo.jpeg"><IMG SRC="thumb.gif"></A>
(preceded by some text instructing the reader to "click on a thumbnail to download a JPEG").

Navigable Image-Maps

This refers to a single picture (or montage) containing a number of different "subjects"; when the visitor clicks on a particular part of the image, their browser sends the pixel-coordinates of that point to the web-site server, where the coordinates are decoded and converted to one of several hyperlink URLs.

The graphic is created in the same way as any other graphic; but it is necessary to know and record the exact dimensions of the graphic (in pixels), and the coordinates of each of the active areas within it.

JohnA ZFC:B 20Jy96

Back to ZFC Home Page . . . . . . Back to "Guides" page