• Images should ideally be no less than 2000px on the shortest side. It’s best not to go below this size so that the image remains at good quality for high retina screens. Images for the web must be in .jpeg, .png or .gif format
  • Please check the size of your images before uploading. If they are too large they will take up unnecessary space on the site server. Anything over 2mb for an image should ideally be reduced. We recommend using a programme such as ImageOptim which is easy to use and reduces the file size of images without losing quality.
  • Avoid using ‘rogue’ characters in file names. When saving any image or document for use on the web you should not include any characters other than those from the alphabet (lowercase) and underscores (_) – this includes spaces. If you do include characters such as spaces or & or , in file names this may cause problems displaying them.
  • The ‘featured image’ is usually the image that will be the main ’chosen’ image to represent the page and will appear in any listing pages. (e.g. if it is on an event this is the image that will appear in the listing of all the events).
  • Featured Image is found on the right hand side panel – if you can’t see the panel click the settings (cog) icon next to Publish/Update
  • When selecting ‘Add Media’ or ‘Set featured image’ you will see a library of all the media (images, sound files, video files) you (and everyone else) have uploaded so far.
  • You can either select an image from the library or upload a new one from your computer.
  • Although the media library isn’t ordered you can search for images using the search box. The search will look for any text associated with that image, so filling in the title and alt text field is really useful for this.
  • Click ‘insert into page’ or ‘set featured image’
  • To insert an image into a page, click the plus sign and choose the image block 
  • When you have inserted the image into the page you can resize it by clicking on it once. Two blue dots will appear – on the right and at the bottom, which you can drag to change the size (you can also use pre-determined sizes in the options panel on the right hand side) :
  • You can also add a caption to the image here.
  • When you click once on the image you will also see some options appear at the top, here you can change the alignment (so the text wraps around the image), move the image up and down or crop it :
  • On the right hand side panel you will see more options for the image, note that you must add the alt text here:
  • Image alt text is used by screen readers to describe an image to people with visual impairments when having a website read out aloud to them. Add captions and descriptive alt text to all photos, images and maps used throughout the site.

    WHY: Adding information and alt text to every image makes visual content more accessible to partially sighted magnifier users and blind screen reader users as well as compatible with other assistive technologies. A short text description of an image can unlock the information within a picture and enrich the experience and understanding of a story for users. Without alt text the screen reader just reads the word ‘image’ when reading the webpage. As you can imagine this can be very frustrating for the user.
Graphic of an ear, eye, brain and hand in different coloured hexagons
Always make sure your content is as accessible as possible, this way everyone benefits.
  • Search engines will mark the site down if the alt text field is left blank. 
  • Images help to liven up the content, ensure that images used are simple and with high contrast if possible.