Images

11 May 2018

  • 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
  • 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.
  • To insert an image into a page or post click the ‘Add Media’ button at the top left of the editing panel.
  • 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 usually found at the bottom right of the editing page.
  • 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’
  • When the image is in the page you can click on it it to reveal some editing options which appear at the top, this allows you to make some basic edits to the image e.g. left, centre or right align the image:
  • Clicking the pencil icon will bring up some more editing options such as resizing the image.
  • There is a drop down list of built in image sizes under ‘size’ – often when you first insert an image into a post it is too small, so it is a good idea to check this and make sure it is set to the appropriate size for the page.
  • Linking images – Always link to ‘Media File’. This means when an image is clicked it will show a larger version of itself in a responsive modal window.
  • 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. 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. There is a field in the media library called ‘Alt text’ – you will see this on the right hand side when an image is selected. Enter your description of the image here. Search engines will mark the site down if the alt text field is left blank.
  • You can also edit the alt text by clicking on the pencil symbol.
  • Image copyright – add to the copyright field when uploading images.
  • Image borders – Images will have a white border added to them so do not add images which already have one as part of the picture.

Related

Stay informed with our newsletter

Follow us