Preparing Images and Graphics for a Web Page

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 four types of file (all "bit-map") that are acceptable are: Of these four, 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.
PNG is not fully supported (yet) by all browsers, so should be used with care.

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 (nor transparent ones).

Note that in ArcWeb/WebVoyage, all GIFs received were actually converted to sprites first, and then plotted to screen all in one hit, so you did't actually see interlaced images "building up"; but Fresco (and Browse) now do implement the effect.

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

GIF files can also contain multiple images which can be rendered to produce an animated graphic: but this may only be implemented on the more recent browsers.
There are full details on generating animations on the Animated Graphics page.

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 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.

PNG Image Files

These can do everything that a GIF can do (except animations), and also offer lots of extras such as more and deeper colours, an "alpha" channel for transparency/opacity, built-in gamma correction, better interlacing, etc.

A fuller description is given on the <OBJECT> and PNG page.

But it is a comparatively new format, and so not widely supported yet (though Fresco and Browse will render them).

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, the RiscOS 16-colour Wimp palette contains eight greyscales, and a Wintel 216-colour mode may offer only 6 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).
If you want more control over the GIF produced (and in particular to generate a GIF with fewer than 256 colours), you may prefer to use spr2gif which is available within the GifPack suite;   note that this is a command-line-driven utility, not an icon-bar application.
However, I have written a "front-end" for this, called !SprToGif , available from the Progs&Downloads page, which gives you the ease of use of "drag'n'drop" that you expect on an Acorn.

More recently a "de facto" Sprite-to-GIF converter has become available, Peter Hartley's InterGIF6; this is available on Argo's FTP site, but/and the latest version is best obtained from Peter's InterGIF web-site.
This can generate animated GIFs; and can also perform Draw-to-GIF conversion.

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 ;
also !Voyager contains a copy of !ChangeFSI.
!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").

This is described in more detail in a downloadable Thumbnails text-file.

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, 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.

I prefer to generate image maps initially in !Draw (which can incorporate sprites too, and scale them), then take a !Paint "snapshot", tidy the spritefile up in !Paint, and finally convert to GIF (or less-frequently JPEG), as described earlier.

This is described in more detail in a downloadable zip-archived textfile <imgmap.zip>.

John Alldred, <john@protovale.co.uk>, 22Oct98

Back to Home Page . . . . . . Back to "Tutors" page