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 essential for accessibility, as it is read aloud by screen readers to describe images to visually impaired users. Every image must have alt text.

Good alt text is:

• concise and descriptive. 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 a bit 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.
• Describes the action and/or the emotion of the image. If an image expresses an emotion, then it’s probably contributing to the overall page experience. Therefore, its alt text should convey the same emotion so that a user who can't see the image can have the same experience as someone who can.

Important notes to mention:

• 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 attribute. Although it may be useful to sighted users to see the title popup over an image, the title attribute 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 AT. So you’ll need to 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

Good example:

---

Bad example:

---

Avoid embedded text in images

Text embedded in images is inaccessible to the visually impaired and will not be read by a screen reader. If embedded text is unavoidable, be sure to include the information as the alt text.

Good example:

---

Bad example:

---

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.