...
Images should only be added to web pages if they support and add value to the content. If the image doesn’t add value, it causes confusion, frustration, adds IToo many images on a page confuse the users and slow down the page load time and overall file size. It also buries key content. 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.
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.
...
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
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 diversityAvoid 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.
...