Preparing Images and Graphics for a
By John Alldred
Image File Types
Acorn Image Files
The two main types of graphics file that are "native" to Acorn
Note that Spritefiles should only be used in "square pixel"
modes (not the rectangular pixels as in mode 12 for example).
DrawFiles (generically known as "vector" graphics), from
SpriteFiles ("bit-map"), as produced by !Paint.
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
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 (Graphic Interchange Format) files: roughly equivalent
JPEG (Joint Photographic Expert Group) files, which achieve
a high degree of file-size compression by allowing a slight
loss of detail; and
TIFF (Tagged Image File Format), which usually gives the
best results for photographs providing file-size is not a
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
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
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
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
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
However, as stated earlier, WebGif2 will always generate
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:
drag a SpriteFile onto the !WebGif2 icon-bar icon, and a
window will open showing what the image looks like.
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
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).
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).
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
!Creator can be downloaded from Argonet's FTP site
can create GIF files too); this is "ShareWare".
What exactly you do will all depend on what particular
combination of hardware and software you have!
One tip that I use:
PS: Remember to ask for as many colours as you need, but no
Decide what size (width and height) in pixels you want the
finished image to appear;
Measure the width and height of the photograph (or rather,
of the portion you want) in inches;
Divide the dimensions in pixels by the dimensions in inches
(you should get approximately the same answer for each) to
Get the scanner to scan at the dpi resolution you've just
calculated (or the nearest to that it offers).
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
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.
if you include them on a page, that page will take forever
to download, but
if you don't include some images, nobody will know what
pictures are available.
The minimum HTML code to achieve this might look like:
(preceded by some text instructing the reader to "click on a
thumbnail to download a JPEG").
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
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