About graphic images
There are two basic formats for images displayed on a computer – bitmap and vector.
Bitmap images are precisely that, a map of the colours of each point on the image. Photos are a good example, although any image could be displayed as a bitmap. Examples of bitmap formats are tif, jpg and gif
The other type is the vector image. Here the image is represented through mathematical curves and fills. Although the image ends up as a set of dots on the screen, these dots are calculated 'on the fly' at the time the image is displayed. Such images remain sharp at any size, whereas with a bitmap, magnification will eventually render the dots visible and outlines will be fuzzy (as in shot 1 illustrated below). Because maths varies between programs, most vector image formats are program specific, although some simple images can be represented in wmf or emf.
When it comes to web page images, the final image is always a gif
or jpeg file, since these are readable by most browsers. Thus vector images have to be pre-exported to gif or jpg.
Gif files are usually the best way of rendering diagrams and logos
that are made up of large areas of one colour.
Jpg files are the most efficient way to represent photos. There is a compression
mechanism built in that reduces file size in return for a slight loss of quality.
(You can choose how much) With images containing large areas of one colour, this
compression
can
lead
to
visible 'artefacts'. Every time a jpg is resaved, it may deteriorate, so always
keep your original or save your prepared image as a tif before saving as a jpg.
Treating Photos
Think in pixels
Computer screens have a set resolution of pixels per inch, so anything
of higher resolution will be rerendered by the browser for display
on the screen. This means that for web pages there is an optimum dimension
in pixels based on 96 or 72 pixels per inch, This is significantly
less than the printed version, which may be around 300 dots per inch.
Photos for the web need to be processed down to this optimum size by
a process known as resampling or downsampling. So, if you know your
page width in pixels (typically 600-800 pixels) then you can calculate
the required image width as a proportion of that number. Always specify
the required size in the html image tag. This allows the rest of the
page to appear around the image before the image is fully loaded.
The optimum order of processing should always be rotate, crop, resample, brightness/contrast, touch-up, convert to sRGB (if necessary, many images are already in sRGB) sharpen, export to jpg. Once resampled, always view your image full size while processing.
Preparing diagrams, buttons and logos
Ideally these will be drawn using a vector program. The pixel dimensions will be set to match the requirements of the final image size on screen. The image will be exported to a gif, during which the number of colours can be chosen to keep the file size down. Every time a change is needed, the vector image is revised and re-exported.
About anti-aliasing
The pixels on your screen are effectively visible to the naked eye. When representing
a curved boundary between two colours on the screen it is not possible to create
a smooth curve using just the two colours. Shot 2 below shows the best that
can be done. Image programs get round this by blending the two colours at strategic
points along the boundary. This 'blurring' of the boundary is known as anti-aliasing,
as illustrated by shot 3.
About transparency
It is possible to set one colour (and only one) in a gif to transparent, allowing
the page background to show through, as in shot 4 above. When doing this, place
the
button or
logo against the background colour of your page, and choose the transparency
option.
If you don't do this, you may get a tide-mark as the object is antialiased
against the wrong background - in shot 5 the background was magenta.
« This section to be completed »
