COI Toolkit Beta


4
Content Elements

How to provide images that are the correct format and that communicate your intended message quickly, clearly and with good accessibility.

How to avoid misusing pop-up windows and pop-outs (‘tool tip’ type elements).

Basic pointers on using and producing accessible PDFs


Optimising images for web use

download the MP4 excerpt of optimising images for web use

Description
Demonstrates how and why to use GIF or PNG for block images and JPEG for photographs. Uses a graphic design package to make images different formats and different sizes and shows the effect on the quality of the resultant images.

Summary
  • Optimising images for web use
  • Many image processing / design software packages allow you to optimise your images
  • This demo shows using "Adobe Fireworks", your software should be able to do similar simple things.
  • Why to use GIF for any 'solid block' images such as line art, cartoons, text, etc
  • For simple block images, GIF produce small file sizes
  • For simple block images, GIF produce small file sizes
  • These can be reduced further by reducing the number of colours used
  • Often without any noticeable loss of quality
  • Do not use JPEGs for simple block images
  • For the same file size as a crisp and clear GIF a JPEG will appear fuzzy
  • To approach the crispness of the original you have to increase the file size
  • PNGs can also work the same as GIFs if used on the right settings
  • The file size can be reduced down without any noticeable loss of quality
  • When converted to a gif of the same file size the quality is very poor
  • When the GIF colour is increased to a more acceptable image, the file size becomes very large
  • Use GIF or PNG for block image, use JPEG for graphic images

© Crown Copyright 2004-2010