Rich Media & Imagery

Overview

This section includes guidelines for when using images, videos, and sounds (voice recordings or music).

  • Always strive for the highest quality
    • no low-resolution, pixelated and stretched images
    • no noisy and indiscernible audio
  • Ensure that there is relevance to the content that it supports
    • Opt for pictures of actual persons, rather than stock photo models
    • Consider cultural restrictions when picking out the media to use
  • Ensure that you the media you use have been legally obtained (e.g. no copyright issues)

 

Useful links

  • Percolate has an extensive library of relevant media for SMU
  • Browse Bigstock.com for stock photos and illustrations, get the link to your desired image, and send a request to nextweb@smu.edu.sg
  • For videos, check mediacast.smu.edu.sg

Guidelines

Avoid auto-play for video and audio embeds

Auto-playing media embeds on a page robs the user of the control, and is bad accessibility. Unless the user is well-aware before reaching the page that has the media embed, that the media will auto-play, it is not user-friendly to playback automatically.

Exceptions: video backgrounds without sounds

Avoid substituting images for texts

The information in your page should still be understood even without the help of images. Render text in graphics programmatically (e.g. with HTML).

Exceptions: Logos, charts, and graphs can have text set as part of the image as long as alternative text is authored to provide equivalent access.

Ensure that text placed on top of images are legible

Select an appropriate technique and test by taking a screenshot of the page, turning it into grayscale, and checking if the text can still be read at this state.

techniques for overlaying text on image

Optimise your images (aim for 200kb or less)

Use the correct file formats for the image that you have and use online image optimization tools to get small file sizes without compromising on visual quality:

Provide descriptive ALT text and proper file names for your images

ALT text are text alternative attributes that will show up when a browser cannot render them. Add the alt attribute in your <img> tags like so: <img src=”filepath/img.jpeg” alt=”insert descriptive text here”>

Use clear and relevant imagery

  • Avoid depending solely on imagery to communicate and present information
  • Know the best use for images, illustrations, and data visualizations

imagery types such as photographs, illustrations, and data visualizations

This section includes guidelines for when using images, videos, and sounds (voice recordings or music).

  • Always strive for the highest quality
    • no low-resolution, pixelated and stretched images
    • no noisy and indiscernible audio
  • Ensure that there is relevance to the content that it supports
    • Opt for pictures of actual persons, rather than stock photo models
    • Consider cultural restrictions when picking out the media to use
  • Ensure that you the media you use have been legally obtained (e.g. no copyright issues)

 

Useful links

  • Percolate has an extensive library of relevant media for SMU
  • Browse Bigstock.com for stock photos and illustrations, get the link to your desired image, and send a request to nextweb@smu.edu.sg
  • For videos, check mediacast.smu.edu.sg