Images and photography

Guiding principle: Only include elements that have a purpose

On this page

• About this component
• Image sizes and ratios
• Image compression and file formats
• Photography
• Alt text and image accessibility
• SVG image accessibility

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

Do

• 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

Don’t

• 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.

Aspect ratio	Recommended # of grid columns	Dimensions for recommended # of grid columns (px)	Example in a 12 column grid
1:1	3	Image file dimensions: 512 ✕ 512 Displayed size on desktop: 256 ✕ 256
4:3	4	Image file dimensions: 704 ✕ 528 Displayed size on desktop: 352 ✕ 264
3:2	4	Image file dimensions: 704 ✕ 464 Displayed size on desktop: 352 ✕ 232
16:9	4	Image file dimensions: 704 ✕ 400 Displayed size on desktop: 352 ✕ 200
2:1	6	Image file dimensions: 1088 ✕ 544 Displayed size on desktop: 544 ✕ 272
3:1	6	Image file dimensions: 1088 ✕ 368 Displayed size on desktop: 544 ✕ 184
4:1	6	Image file dimensions: 1088 ✕ 272 Displayed size on desktop: 544 ✕ 136

Alternative image sizes

Aspect ratio	Alternative # of grid columns	Dimensions for alternative # of grid columns (px)	Example in a 12 column grid
1:1	2	Image file dimensions: 320 ✕ 320 Displayed size on desktop: 160 ✕ 160
4:3	3	Image file dimensions: 512 ✕ 384 Displayed size on desktop: 256 ✕ 192
3:2	3	Image file dimensions: 512 ✕ 336 Displayed size on desktop: 256 ✕ 168
16:9	6	Image file dimensions: 1088 ✕ 608 Displayed size on desktop: 544 ✕ 304
2:1	4	Image file dimensions: 512 ✕ 384 Displayed size on desktop: 256 ✕ 192
3:1	8	Image file dimensions: 512 ✕ 336 Displayed size on desktop: 256 ✕ 168
4:1	8	Image file dimensions: 1088 ✕ 608 Displayed size on desktop: 544 ✕ 304

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.

• PNG/JPEG resizing: https://resizeimage.net/
• PNG/JPEG compression: https://tinypng.com/
• SVG compression: https://vecta.io/nano

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.

Photography

Use photography to create a deeper connection with your audience.

Photography should:

• 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

Do:

• 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

Don’t:

• 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

Photography styles

Primary

People in context – Candid moments

People in person – all walks of life

Secondary

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:

Do:

• 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

Don’t:

• 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.

Informative images

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:

• set role="img" to ensure that screen readers announce “image” instead of the image path
• provide alternative text describing the image using either aria-label="[description]" or alt="[description]"

Decorative images

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 aria-hidden="true"
• set them to be not focusable using focusable="false"