Image formats for web
GIF (Graphics Interchange Format) supports 8-bit colour (8bits/pixel) and is best for inline images, line art and most logos; it supports special features such as transparency and animation.
JPEG (Joint Picture Expert Group) supports 24-bit images (up to 16 million colours) is the best choice for photos and continuous tone images; it uses an efficient compression method resulting in smaller file size than GIF images.
PNG (Portable Network Graphic) format has been developed by the W3C. PNG is an open, extensible format with lossless compression offering a more controlled degree of transparency and better compression ratio than GIFs. All current version browsers support this format although some older browsers don't support the alpha transparency of PNGs.
Using images on the web: a checklist
Use images and colour sparingly and only use images that directly relate to the topic of the page.
Keep file size of graphics as small as possible; resolution should be 72 dpi.
Always include the ALT text for text-only browsers that don't display images; keep this short and descriptive
Complex images conveying detailed information should be linked to a text description.
Single images where possible should not be larger than 50kb; larger images can be represented by a thumbnail image hyperlinked to the full-size image
Sharp or Strong Anti-aliasing should be used when small text is used in an image.
Large images are one of the main causes of slow loading Web pages; always optimise your images (using, for example, GIFBot to optimize images without loss of image quality). Adobe Photoshop is also available to most staff that are responsible for web content. Page download times can be checked with WebSiteOptimization.com's Analyzer.
Never use the web page editor to resize your image.
To avoid scrolling or loss of image when printing, make sure your graphic is not larger than 350 pixels wide in the main content area. Images in the righthand column most be no more than 200px.
Use animation (eg animated GIF, Macromedia Flash files) sparingly and make sure any animations do not loop indefinitely.
Obtaining photos for use on your site and copyright issues
Images to be used on web pages should be supplied at the highest possible quality - they will then be optimised for the web. The resolution will be reduced to the standard required for 'screen quality' may be obtained from several sources:
Copyright and permissions
Copyright laws apply to electronic publishing in the same way as print publishing; if you want to use images or extracts from another person's work, it is your responsibility to ensure that you get the author's permission. Many websites will have a page that provides information about the terms and conditions for using their resources. More details on copyright can be found on the TASI and EPUK sites.
Written permission should be sought for all photos involving members of the public.
Please note that gaining copyright clearance can take time. Be sure you allow adequate time to deal with this. You should also note that some copyright holders will charge a fee and that in some cases it may not be possible to gain clearance.
Marketing and Communications can provide all the images you need (they also have a collection of free images that you can use). You can also create your own graphics using a drawing package or by scanning original photos/line drawings.
Scanning is the process of converting images into digital images that can be manipulated using graphics software. The final image for the web should be saved at 72 dpi. You can scan at higher resolutions if you wish the image to be larger than the original. This is important if you want to crop the image or enlarge it. After your image is the size you want, resave for the web using 72 dpi.
You will find it useful to have an image viewer/editor (to enable you to resize the image, convert between image formats, create transparent backgrounds, etc).
[Top of Page]