GIF

Derek Bridge

Aims: to understand GIF images well enough to know

GIF image files:

GIFs are good for

An image that uses 8-bit indexed colour has a palette containing a max. of 256 colours
But different images can have different palettes
Image manipulation tools let you choose the palette
- from a set of predefined palettes
- including the so-called web-safe palette (where each of R, G & B are restricted to 00, 33, 66, 99, CC, FF (hex)/ 0, 51, 102, 153, 255 (decimal) / 0, 20, 40, 60, 80, 100 (%))
- or an optimised one based on the colours you've actually used

LZW compression builds a table that assigns short codes to certain sequences
If the sequence repeats, the repeat is replaced by the code
Hence, it's lossless
- No info in the image is thrown away
- Decompression restores the original image
Class exercise: Explain why this is good for images with large areas of solid, flat colour but not for photos
But there was a patent on the algorithm!

'Normal' GIFs are stored and displayed row by row, from top to bottom
But you can choose to save a GIF with interlacing
Then the rows are stored and displayed in a different order
- first every 8th row, starting with row 0
- then every 8th row, starting with row 4
- then every 4th row, starting with row 2
- finally every 2nd row, starting with row 1
Class exercise: Why would we do this?

A transparent image lets the background show through
GIF offers only binary transparency:
- an area is either 100% transparent or 100% opaque
How?
- One colour in the palette (usually grey) is designated as the Transparency Index Colour
- All pixels that are painted with that colour will be transparent when viewed in a browser

A GIF file can contain a number of images (frames)
A browser can display them successively
Instructions in the file specify the delay between frames and what to do with the previous image
Eye-catching or irritating?

Typically, each frame is created as a layer
But when saving as a GIF, do not flatten the layers
Instead, store them as separate frames of an animation
In simple animations, each frame is a complete scene, which replaces the previous frame
In more sophisticated (and space-efficient) animations, each frame contains just the changing portions of the image, and they are displayed cumulatively

The header block: which version of GIF you are using
The logical screen block:
- the size in pixels of the GIF on the screen
- the global palette
For each image/frame in the file,
- a control block
  - whether this image/frame has its own local palette
  - whether there is transparency
  - if so, which colour designates transparency
  - delay in 1/100ths of a second between frames
  - what to do with the previous image (replace, cumulate)
- an image block
  - this image/frame's size in pixels
  - whether it is interlaced
  - an optional local palette for this image/frame
  - the raw (compressed) data for this image/frame, including the table of codes
The trailer block: terminates the file

General advice:

Limit the dimensions of the image
- avoid large images unless essential; crop irrelevant areas; scale down large images
Use thumbnails
Reuse the same image across your web site
Keep the compression algorithm in mind when designing the image
Optimise!

Fill areas of the image with solid, flat colour rather than continuous changing shades
Prefer sharp edges over blurred transitions
Hence, avoid anti-aliasing diagonals, curves and text (Demo: http://www.cambridgeincolour.com/tutorials/image-interpolation.htm#anti-aliasing
Favour horizontal fields of colour when you can because horizontal stripes will compress better than vertical ones

Reduce the colour depth, i.e. use a palette that has fewer than 256 colours
If converting an image that uses one set of colours to a GIF that has fewer or different colours, consider turning dithering off