When adding images to your webpages, follow these guidelines to ensure they are high quality, accessible, and optimized for the best user experience.

Choose high-quality, optimized images

Use high-quality images that are properly optimized and cropped for the web.

• Keep image file sizes under 200Kb to ensure fast page load times, especially for users on slow or mobile connections.
• Limit image dimensions to a maximum of 1200px in width or height.
• For staff photos, use a 600x600px square format to maintain a consistent appearance across the website.
• The CMS includes options to resize and crop images, but for sharper images and optimal compression, we recommend using Adobe Photoshop or another image-editing program before uploading.

Need assistance with image optimization? Submit a project request, and the web team will be happy to help.

Include meaningful alternative descriptions (alt-text)

Alternative text (alt-text) is a textual substitute for images on the web. It provides meaning and represents the content, function, and emotion of an image.

Good alt-text is:

• concise. Alt-text should be as short as possible, but as long as it needs to be.
• ended with a period. This will make a screen reader pause after the last word, creating a better UX.
• context dependant. Think about why you are using a particular image in the context you are using it.
• used to describe the action and emotion of an image. Alt-text should convey the same amount of information to someone who can’t see the image as someone who can. If an image is important enough to be included on a web page, information about the subject, what they are doing and where, and any emotion of the subject needs to be included in the alt-text. 
  
  

Important notes about alt-text

Keep the following in mind when crafting alt-text:

• Avoid"An image of..." (or "A graphic of..."). Screen readers know that this is an image and will announce the element as such. Starting your alt-text with “image of” is therefore redundant.
• Avoid using the title field. Although it may be useful to sighted users to see the title popup over an image, the title field does not work well in all assistive technologies. It should be avoided all together.
• Be mindful of charts and graphs. The data in the chart or graph will not be conveyed to assistive technology. Ensure that the content is transcribed if it’s not already on the page in another form.
• Avoid using chatGPT. Although it may be convenient, AI cannot yet provide meaningful text descriptions like humans can.

If ever in doubt email the web team! We'll be happy to help you craft the perfect alt text! 

Alt-text examples

---

---

 

Avoid embedded text in images

Text embedded in images is inaccessible to assistive technologies. If embedded text is unavoidable, the extire text must be transcribed into the alt-text.

---

---

 

Adding images to webpages

Once your image is optimized, you can add it to a webpage using the picture icon in the Edit toolbar. This opens a dialog box where you can select or upload images.

Please Note:

• Web editors cannot change the masthead images in the header of webpages. If you would like to request a specific masthead image, please submit a project request.
• Images can also be placed in staff listings, media sliders, and other prebuilt web modules. Visit the Web Modules page for available options, or contact the web team if you need assistance adding a module to a webpage.
  
  

Related video tutorials

Need additional help? Find more tutorials on the CMS Tutorials page or contact the web team.