- icons and graphics
All images used must be within copyright and come from legitimate sources. See ‘Find Photos and Graphics’.
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.
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.
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.
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.
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
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.
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.
Suitable for using as icons or thumbnails.
- width – 200px
- height – 200px
Suitable for using as half-page photos and graphics.
- width – 500px
- height – 500px
Suitable for full page images such as infographics.
- width – 900px
- height – 900px
A guide to creating basic information
Learning Technology recommends the following tools, however we do not support them.