Lecture 11

Graphics for the Web

Many maps and other graphics are now made for the Internet.
Maps we draw can be converted for this purpose.
- only a few types of image are displayed by web browsers
- we must understand them to work with them
- need vector to raster conversion for our maps

Browser image formats:

- GIF

- JPG (or JPEG)

- a few others less commonly used (e.g. PNG)
- all are raster formats, not vector

we will consider only GIF and JPG

GIF images

Graphic Interchange Format
.GIF file extension in Windows
- developed by Compuserve for pre-web internet use.
- compresses image to reduce transmission time.
- very effective at reducing some file sizes
- less effective with many photographs
- excellent with drawings including maps
- works best with flat blocks of colour, not gradients

- indexes colours.
- makes histogram of colours in image, selects 256 most common colours, discards the rest.
- pixels with other colours are converted to closest remaining colour.
- Most of our maps have only a few colours.

JPG images

Joint Photographic Experts Group (JPEG)
.JPG file extension in Windows.
- JPEG: team who developed a new kind of image compression.
- very effective way to reduce file sizes.
- variable compression - make images large or small.
- quality suffers if compressed too much.

the JPG process:
- software breaks image into small squares.
- each square is analyzed to find pattern of colour variation.
- mathematical model is found which resembles that pattern.
- smaller squares or closer match gives good image but not much compression.
- larger squares or weaker match gives poor image but great compression.
- very poor results around sharp edges.
- very good results with gradients.
- good for photos, bad for most drawings.

Vector to Raster Conversion

GIF and JPG are raster image formats.

Our maps are vector drawings.

- convert vector to raster.
- place drawing on an imaginary grid.
- each grid cell becomes one pixel in raster image.
- each grid cell crossed by a line is given the line colour.
- this includes all lettering.
- only effective if the grid cells are small enough.

- small grid cells capture fine detail.
- but many cells make large image.
- trade-off between detail and file size.

Design for the Web

For best results, design specifically for the web.

- converting other drawings may cause problems:
- low resolution, text or fine lines hard to read.
- high resolution, legible but file too big.

pointers for web drawings:
- use larger fonts, so still clear after conversion.
- use thicker lines (not hairline).
- or omit line (use transparent line around coloured shape)
- avoid gradient shading.

Some images are combinations of drawing and photo.

- export as GIF and JPG, see which works best.
- use maximum quality settings on JPG for best results.
- avoid gradients if using GIF.

Exporting Corel drawings as GIF or JPG:
- use file - export menu, not 'save as...'

Editing raster images

Raster images can be modified using photo editing software,
- e.g. Adobe Photoshop, Corel Photopaint.
- we have Photoshop on scanning stations.

GIF and JPG images can be opened in Photoshop.
- but remember you can't edit objects separately.

options:
- change size.
- change brightness, colours etc.
- add photos or other details.
- you may prefer to add photos to drawing at this stage.

limitations:
- many effects can't be used with indexed images.
- other effects can be used but don't work as well.
- change indexed colour to RGB first, in Photoshop.