Guiding principle: Only include elements that have a purpose
On this page
About this component
Images and photography should be used sparingly, only when they add meaning to content or help people complete a task.
When to use images
- use images to illustrate concrete things (for example, animals, I.D. cards, plate stickers), not abstract concepts (for example, light, holistic, synergy)
- Use branding from the Ontario Visual Identity (approved logos and marketing campaign graphics) and approved Ontario brands (for example, ServiceOntario)
- use images to illustrate the hierarchy of content by using tall banners on entry pages (home pages, the landing page for a marketing campaign), narrow banners on top-level topic landing pages and no banners on sub-topic or article pages
- optimize images for the web to reduce the file size as much as possible while maintaining a reasonable quality
- use images of text except for logos where preservation of the font face is critical, or for maps and charts — images of text create barriers for mobile device users and people with low vision
- develop a new brand for a program or page - use the Ontario Visual Identity instead
- heavily-distort or edit images associated with the Ontario Visual Identity
- use images that are unrelated to the page’s subject matter
- use images that are too small to show important details, especially if viewed on mobile devices
- put text on images
Image sizes and ratios
The image file dimensions in the tables below will work for all screen resolutions at the given number of columns.
Alternative image sizes
Image compression and file formats
Compressing image files
Always compress a photo before uploading to the web. Image compression is an important usability consideration, because it allows for faster page loads on slow internet connections.
We recommend compressing JPEG files at an 84% quality level, at least.
Image file formats
For photographs and complex images, use the JPG or JPEG file formats.
For large illustrations that contain blocks of the same colour, PNG or SVG are the best image file formats.
For illustrations or photographs that include transparent sections, PNG or SVG are the best image file formats.
For icons and illustrative icons, we recommend using an SVG file format.
Use photography to create a deeper connection with your audience.
- always feel authentic, human, real, and not look like “stock” photos
- be able to express a diverse range of topics and services
- be inclusive and representative of all Ontarians
Where to find photography
- look through the Ontario photo library. The photo library can be used by OPS staff in government ministries, agencies, boards and commissions. Images are royalty-free and under Crown copyright.
- try to find images taken in Ontario, or images of Ontarians
- make sure any stock images used are paid for and licenced for use by the Government of Ontario
- get permission from the photographer if you are using a personal photo - you can add a photo credit in a caption
- use photography if you don’t know the source, owner, copyright, or origin
- use search engines to find images that aren’t explicitly available for licence or use
- use images that contain watermarks, nor alter images to remove watermarks
Themes to consider when searching for photography
Try using photography that fits one of the following themes:
People of Ontario hard at work – strong, engaged, positive momentum
Pride in Ontario – confidence with a sense of place
Everyday people – optimism, collaboration
Focused on service – Reliable, caring, and personal
People in context – Candid moments
People in person – all walks of life
Ontario, our home and place of opportunity
Close up of objects that draw us into the story
Alt text and image accessibility
Every image must have an alt attribute.
Avoid using images to present text content. Text content should be written in HTML.
When to add alt text:
Alt text provides a text alternative to images, photography and other non-text content.
If an image is decorative and provides no added information, the
<alt> attribute should be blank. One way to determine if an image is decorative is to write the alt text, and then see if the alt text adds any extra value for the user.
Examples of alt text:
- alt text that adds value: “the Minister of Health shakes hands with a conference attendee”
- alt text that adds no value: “blue square” (the image is decorative)
When writing alt text:
- be accurate when describing the image
- write what’s needed to cover the information and meaning that the image provides
- describe the function, content and context of the image
- include details that are important to the page’s narrative and subject matter
- keep it short and sweet - a short sentence is often enough, but if needed, keep it to a maximum of two sentences
- repeat information in the alt text if there’s content around the image that already offers the same information - this is redundant and adds informational “clutter” for assistive technology users
- use phrases like “image of …” or “graphic of …” - users will already know they are focused on an image element
SVG image accessibility
Alt text and image accessibility guidance applies to SVG images as well, but there are some additional considerations to keep in mind with SVGs.
An image is “informative” when it conveys information visually that is not provided in another way. An icon without a text label is an example of an informative image.
For informative SVG images:
role="img" to ensure that screen readers announce “image” instead of the image path
- provide alternative text describing the image using either
An image is “decorative” if it visually enhances text content on the page without providing any additional information. An icon paired with a text label is considered decorative because the text label makes the content accessible. Duplicating the text as part of the image would be repetitive for assistive technology users.
For decorative SVG images:
- hide them using
- set them to be not focusable using