Photographs & Images

When used appropriately, photos and images can make your page more visually appealing to your visitor. Use photos or images when they are relevant and add value to the page.

When dealing with photos / images, keep the following tips and guidelines in mind:

  • Photos / images should be relevant to, complement and enhance the information on the same page.
  • Only use images that are relevant and add value. Ensure the content does not offend or alienate.
  • Avoid using any unnecessary images.
  • Save images with larger, solid blocks of colour and that otherwise make limited use of gradient in .gif or .png format.
  • Photographic-quality images should be rendered as .jpg. Be sure to compress/optimize them to offer the smallest file size without significant loss in acceptable image quality.
  • Save images at double density to be compatible with retina displays (ie. save a 200px x 600px image as a 400px x 1200 px image so that high resolution (retina) displays show your image in a clear manner).

Accessibility Issues

  • Provide 'alt text' for all images unless they serve no purpose other than decoration on a page (if this is the case, use an empty alt tag).
  • Maximum recommended length for an 'alt tag'’s text should be 100 characters. Place longer text in a 'long-desc' tag instead.
  • When you use an image with text, you must also include that information in the accompanying text, or use an alternative method of getting the information across to the user.
  • Refrain from using images to create layout (ie. spacer gifs) – rely on CSS instead.

How to Implement:

Images  on sites using the York 2014 theme will automatically resize based on the screen-size of the visitor. To add an image to your page:

  1. Log into WordPress
  2. Select the page you’d like to add an Image to
  3. Place your cursor where you'd like your Image to be placed
  4. Click on the 'Add Media' button above your WYSIWYG tools (below your page's title field)
  5. Upload your image and click on the 'Insert into Page' button (bottom right corner)
  6. Once image appears on your screen, click on it and you will see two icons appear: a mountain and a red circle with a bar through it. The circle will delete the image; the mountain will allow you to edit it: click on the mountain.
  7. In the field marked 'Alternative Text', add an image description -- this will become your alt tag and should be less than 100 characters long

If you would like to have your image not display on small (mobile) screens, a class of 'mobile-hide' can be added to the element (in 'text' view). It has been added to this image:

Example image of students
Resize this screen to see this effect in action.

Here is what this image's code reads as:

<img class="mobile-hide" alt="Example image of students" src="http://webtoolbox.info.yorku.ca/files/2014/03/31.jpg" width="998" height="310" />

To make your images look crisp on Retina displays, save your image at double the resolution and resize using CSS. Use SVGs when possible (for vector source files).