Using graphics in web content

When, where and why to use graphics on B.C. government websites.

On this page

• Appropriate use
• Before using graphics in web content
• Accessibility guidelines for graphics
• File type and size
• What to avoid

Appropriate use

When used appropriately, graphics can increase the chances your audience will understand the content. 

To achieve this, use graphics only when there is a clear need or benefit to the audience. If a graphic adds no value and serves no obvious purpose, it should not be used. 

Make sure:

• The correct graphic file type has been used for the type of image
• Files have been saved for web and not for printing, in a graphics program
• Graphics have correct dimensions for their placement
• The file size is under 250KB

Before using graphics in web content

Consider the following questions:

• What benefit does it have for the audience?
• Are these benefits worth the extra bandwidth?
• Is the content just as effective without an image?
• Would white space be a better option?
• Has consent been obtained for any images (photos) of people?
• Do you have copyright permission to use the image?
• Is the image accessible?

Accessibility guidelines for graphics

Graphics are inherently less accessible than text because not all users can see them. When using them in your content you must follow the guidelines for using graphics and alternative text.

File type and size

Graphics with file sizes larger than 250KB slow load time for users and use more disk space, which increases costs. 

Web graphics are image files such as photos, pictures, infographics and charts. They include GIF, JPG, PNG and PDF. 

Graphics Interchange Format (GIF)

Use GIF for graphics or logos with solid colour areas or background transparencies, but not for photographs. 

Joint Photographic Experts Group (JPG)

Use JPG for digital photographs or images that don't have transparency. 

Portable Network Graphics (PNG)

Use PNG for digital images that have a transparent area, for example, a logo or photo with a transparent or gradient background.

Scalable Vector Graphics (SVG)

Use SVG for images that may change over time, or need to scale without losing quality, such as logos and graphs. 

What to avoid

When using graphics do not:

• Embed text in it unless the text is also written on the page
• Use low quality, blurry or inappropriate images
• Never use screen captures unless they've been professionally created
• Only use images that have been optimized for the web
• Use images larger than 250KB
• Use custom images for navigation elements in CMS Lite, such as buttons or other custom bullets