Captivating multimedia draws users to your page images draw-in users and provides visuals to simplify, add value to or directly support text. However, it is Images are meant to be supplementary to, not a replacement for, the actionable content.

• Images should only be added to web pages if they support and add value to the content.

• Too many images on a page confuse the users and slow down the page load time.

• When designing your page take into consideration that images added above the fold tend to push your key content down the page, especially when viewed on mobile.

• An image should be of adequate resolution, appropriate size and aspect ratio. Note that smaller Smaller images become grainy if manually stretched to a larger sizeconfiguration.

• Higher contrast images are more easily viewed for those with low vision or accessibility needs.Use:

Best Practice

• Authentic imagery such as City staff in action, Toronto neighbourhoods, City events, etc.

• High resolution images

• City-owned photos; ensure copyright permissions and digital consent forms are secured

• Images of people that reflect Toronto’s diversity

Avoid Using

• Images without a defined subject

• Cliché or overly posed stock images

• Amateur photography

• Montage images

• Multiple images as a grid

• Monochromatically coloured photographs except historical black and white photography

• Low resolution images or images that are stretched larger than their original size

• Avoid overlaying or embedding text on images for accessibility reasons. If unavoidable (such as marketing campaign images), ensure that there is high contrast between the text and the underlying image. Also use alternative text that adequately describes the image.

Banners

Banners appear at the top of the page.

...

Image Banner Good vs. Bad Example

...

Campaign Graphics & Secondary Graphic Identifiers

• Campaign graphics are generally not used as page banners unless approved by the SPEC Digital Team.

• City-approved campaign graphics can be used as non-banner, inline images on a page.

• All secondary graphic identifiers must be approved by by Strategic Public & Employee Communications (SPEC).

Decorative vs. Non-Decorative

Decorative images that do not present important content, are used for layout or non-informative purposes, and do not appear within a link should be avoided.   Decorative images do not require alt text

...

.

Alternative (Alt) Text

Alt text is used to describe images to visitors who are unable to see them such as blind, low-vision, and users with cognitive disabilities who are otherwise unable to visually identify an image. It provides a semantic meaning and description to images. Always add meaningful alt text to charts, maps, graphs and images.

...