Example page - images

Before you add an image to your page, consider what it ADDS to the content.  

Images must be

  • accessible
  • responsive
  • quick to load

Accessible images

image flyerText in an image

  • Not selectable,
  • Not searchable,
  • Not zoomable and 
  • Not accessible.
 

Alt-text - Web Aim

  • Read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • Displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • Provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
Color contrast - WebAIM
  • Some users may override your page colors to a high contrast color combination they require.
  • Someone who is blind will not be able to see colors at all. 
  • Test your web pages to ensure that none of the meaning is lost when you remove the colors, even within images. You can do this by printing out the page on a black and white printer, making sure that your printing preferences are set to print background colors. 
color map black and white map
 

Responsive images

Add code on the appearance tab for ALL images.

Non-responsive image

Photojournalism student
 

Responsive image

Photojournalism student Lexy Groves

 

Quick to load images

  • Resize your photos - maximum width 1000px
    Contact card image - 200x200px
  • Optimize or compress your image
    If using Photoshop, always choose File --> Export as
  • Free option - http://resizeimage.net/

Never use

  • Never use stock photography. 
  • Never use an image you found on the internet without crediting the original source.