Images and photography

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

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 x 512

Displayed size on desktop:
256 x 256
Recommneded columns to size to: 3
4:3 4 Image file dimensions:
704 x 528

Displayed size on desktop:
352 x 264
Recommended columns to size to: 4
3:2 4 Image file dimensions:
704 x 464

Displayed size on desktop:
352 x 232
Recommended columns to size to: 4
16:9 4 Image file dimensions:
704 x 400

Displayed size on desktop:
352 x 200
Recommended columns to size to: 4
2:1 6 Image file dimensions:
1088 x 544

Displayed size on desktop:
544 x 272
Recommended columns to size to: 6
3:1 6 Image file dimensions:
1088 x 368

Displayed size on desktop:
544 x 184
Recommended columns to size to: 6
4:1 6 Image file dimensions:
1088 x 272

Displayed size on desktop:
544 x 136
Recommended columns to size to: 6

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 x 320

Displayed size on desktop:
160 x 160
Alternate recommneded columns to size to: 3
4:3 3 Image file dimensions:
512 x 384

Displayed size on desktop:
256 x 192
Alternate recommneded columns to size to: 3
3:2 3 Image file dimensions:
512 x 336

Displayed size on desktop:
256 x 168
Alternate recommneded columns to size to: 3
16:9 6 Image file dimensions:
1088 x 608

Displayed size on desktop:
544 x 304
Alternate recommneded columns to size to: 3
2:1 4 Image file dimensions:
512 x 384

Displayed size on desktop:
256 x 192
Alternate recommneded columns to size to: 3
3:1 8 Image file dimensions:
512 x 336

Displayed size on desktop:
256 x 168
Alternate recommneded columns to size to: 3
4:1 8 Image file dimensions:
1088 x 608

Displayed size on desktop:
544 x 304
Alternate recommneded columns to size to: 3

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.


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

co-workers in a bright office
a business owner in a bicycle shop
colleagues in a manufacturing facility
a smiling apprentice on a jobsite.

Pride in Ontario – confidence with a sense of place

motorcycles on a rural highway
alpine skiers on a bright winter day
a man hiking in a provincial park
close up of boots walking through autumn leaves

Everyday people – optimism, collaboration

friends enjoying beers on a patio
a smiling farmer
a senior couple at home
a young couple and their infant

Focused on service – Reliable, caring, and personal

a nurse laughing with a patient
a proud team of mechanics
hydro poles in the sunset
a young mother works from home alongside her children

Photography styles

Primary

People in context – Candid moments
Photo of people in context: friends embracing
Photo of a person in context: a hiker walking through a forest
People in person – all walks of life
Portraits of people: casual portraits of diverse Ontarians isolated on coloured backgrounds
Portraits of people: casual portraits of diverse Ontarians isolated on coloured backgrounds

Secondary

Ontario, our home and place of opportunity
Landscape photo of Ontario: Georgian Bay
An aerial view of downtown Toronto
Close up of objects that draw us into the story
Close up of boots walking through autumn leaves
Hands preparing food in a domestic kitchen

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

Help improve this page

If you have other suggestions, advice or any questions on images and photography, the design system team would love to hear from you.