How to prepare images

Applies to: Zope, Plone, T4 Site Manager
Last updated: 21/10/2014
Summary: Sourcing and optimising for use on the web; making sure images are accessible to all users

Before you start

  • Use high quality images appropriate to the page content and to the main audience of the page.
  • Don’t use images you have ‘found’ on the web without ensuring you have the explicit permission to use them.

Sourcing images for your website

Before using an image on your website, you must ensure that you are not falling foul of copyright law. You should not use any image that you find on the web without first checking that you are permitted to do so.

It may be difficult to obtain permission to use an image by contacting the owner directly, but there are other ways you can obtain images for free or at relatively low cost:

  • Ask around you, your colleagues may have some suitable images that they have taken themselves. Make sure they are of a high compositional and technical quality
  • The Public Relations Office maintains an archive of images related to University life which you can use. Contact us to make an appointment
  • Use images that are covered by a Creative Commons licence.

Optimising images for the web

Before uploading images they must first be optimised for use on the web.

Optimising an image means reducing its file size and pixel dimensions to a suitable size for the web without loss of visual quality. This will ensure that your pages load faster and use less data, which is important for users with slow connections or those with mobile data limits.

When you resize an image you may also need to crop it to focus on the subject or to remove unnecessary content (eg distracting background objects).

  • To optimise images use a desktop image editor (eg Serif PhotoPlus, Adobe Photoshop), or an online tool like Pixlr Editor, PicResize or Web Resizer which are free, quick and easy to use.
  • As a rule of thumb, try to keep the size of images under 50 Kilobytes (kB) with a maximum width of 600 pixels for landscape images, 300 pixels for portrait images, but note specific image sizes in How to use images.
  • Always resize images to the required pixel dimensions before uploading them; do not resize them using the width and height attributes of the HTML <img> tag.

Image file names

When saving your optimised images, make sure you give the files a ‘web-safe’ file name: all lowercase, no capitals, no special characters except hyphens, no spaces, numbers are ok (eg web-safe-filename.jpg).

File names should be descriptive but not overlong, separate words using hyphens not underscores. Making them web-safe ensures they are compatible with all web browsers, and if they are sensibly named it can help search engines more easily find the page they are used on.

Ensuring images are accessible

Attractive and appropriate images can enhance the visual appeal of web pages. However they can be problematic for users who, for one reason or another, cannot see them.

Computers and assistive technology (eg screen-reading software) cannot analyse images and determine what they represent, so providing appropriate alternative text for images is essential:

  • It can be read by screen readers, making the content and function of images accessible to visually impaired users in particular
  • It is displayed in place of images in browsers when the user has chosen to turn them off or in the case of non-graphical browsers
  • It provides a semantic description that can be read by search engines (eg Google).

All images on your website must have appropriate alternative text. Alternative text is added using the alt image attribute: eg <img src="image.jpg" alt="image description" />. The choice of appropriate alternative text depends on purpose, context and function:

  • Where an image is purely decorative - and does not convey any additional, useful, information - add an empty alt attribute (alt="") - in T4 Site Manager this is added by default by the WYSIWYG editor.
  • Where an image is included in a link and there is no other link text to specify the target then the alt attribute should describe the target of the link. For example if you use an image of Professor X to link to her personal blog, the alternative text should be 'Professor X's personal blog'
  • Where an image adds useful information to the content of the page, then alt text should provide a succinct and accurate textual equivalent. If the image happens to contain text, then the alt text should repeat exactly the same text.
  • Do not use phrases like 'Image of...' or 'Link to...' as part of the alt text.
  • More complex images which carry a lot of information (eg graphs or charts) cannot be summarised using only the alt attribute and will require a longer description. Long descriptions can be provided using one of the methods outlined in WebAIM's article on Alternative Text.

T4 Site Manager - do not use the description field when adding images to the T4 Site Manager Media Library. Instead alt attributes should be added on a case-by-case basis using the ‘Edit Media Attributes’ option following the principles outlined above.