Introduction

Images help to convey information as well as illustrate text and come in a variety of forms:

  • photographs
  • icons and graphics
  • infographics

All images used must be within copyright and come from legitimate sources. See ‘Find Photos and Graphics’.

Why optimise?

All images must be optimized to allow them to appear correctly on a page and function on any given device the viewer happens to be using.

Resolution

Images designed for print are high resolution – meaning they’re typically 300pdi (dots per square inch) and very large in file size; even if not in actual size (in centimetres). Images for the web need not be this large in size as screen resolutions aren’t able to display with this level of detail. Typical screens operate at 72dpi, with modern ‘high-resolution’ screens reaching 200dpi.

Size

Physical size also plays its part. Print widths work in centimetres and millimetres, while screens work in pixels. High definition screens are currently around 2000 pixels wide. Adding images that are large in physical size (millimetres) to a page is unnecessary. An image cannot be reduced on the page by dragging the corners to resize. It may visually appear smaller but this is merely how it displays on the screen. To properly resize, an image needs to be cropped to the intended size in pixels.

Speed

High-resolution, unoptimised images uploaded to the web are slow to download, making browsing between pages difficult. This may not seem overly troubling if you have a fast broadband connection. However, students access information in all manner of ways. If this is via a mobile phone connection, your large image is draining data and taking longer to download unnecessarily.

Accessibility

People with visual impairments will have difficulty in seeing images. So they are not disadvantaged images need to be made accessible by adding Alternative Tags. Also known as an ‘alt tag’, this is a hidden description of the image. It is used by assistive technologies to tell the ‘viewer’ what the image contains. In some browsers it’s possible to see the alt tag by hovering a cursor over the image for 3 seconds.

‘How to’ guide

File types

There are two standard file types images should be saved as when being uploaded to the web.

  • .jpg – used for photographs
  • .png – used for icons and graphics

Where .bmp and .gif are used, these should now be converted to a .png file.

Recommended sizes

There aren’t definite sizes to make images that will work in every scenario, but we can suggest the following as a good starting point.

Small images

Suitable for using as icons or thumbnails.

  • width – 200px
  • height – 200px

Medium images

Suitable for using as half-page photos and graphics.

  • width – 500px
  • height – 500px

Large images

Suitable for full page images such as infographics.

  • width – 900px
  • height – 900px

Further reading

A guide to creating basic information

Useful tools

Learning Technology recommends the following tools, however we do not support them.

Optimizilla

This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.

Pixlr

A free online image editor. Enables to fix, adjust, and filter images in a browser.
Print Friendly, PDF & Email