Captivating multimedia draws users to your page and provides visuals to simplify or directly support text. However, it is 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 images become grainy if manually stretched to a larger size.
Higher contrast images are more easily viewed for those with low vision or accessibility needs.
Use:
Authentic imagery such as City staff in action, Toronto neighbourhoods, City events, etc.
High resolution images
City-owned photos; ensure copyright permissions
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.
Size must be 990px width by 330px height and minimum resolution of 72 dpi.
Use full-width photographic images that add value to the page content.
A YouTube video can also be used as a page banner. If both a image banner and a video are needed, the video should be added to the lower content area below the tiles.
Service topic page banners must be photos.
Use photographs and not illustrations, graphics or photo composites for menu templates.
Do not use poorly cropped images that are not suited to the horizontal banner ratio.
Campaign graphics are generally not used as page banners unless special permission is received from Digital Communications.
Approved Illustrative banners may be used on standard pages, but not on menu pages.
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 do not present important content, are used for layout or non-informative purposes, and do not appear within a link.
Decorative images do not require alt text.
Consider whether to include them at all.
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.
Copyright
Copyright rules apply to all web content, including photographs, videos, audio recordings, graphics and text. Only post content that the City owns or has permission to use.
Image Sources for the City
Image Library: The City’s image management system that includes many pre-approved, Toronto-centric images that can be freely used on webpages.
Request a City photographer: Digital photography and video services for major City events and initiatives.
Design Services: City design services.