Images & Graphics
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.
Alt Text Best Practices:
- Be clear and concise in describing the content and function of the image.
-
Avoid phrases like "An image of..." or "A graphic of..." since screen readers already announce the presence of an image.
Good example:
Alt text: "Goucher College President Kent Devereaux"
Read by screen reader as: "Image, Goucher College President Kent Devereaux"
Bad example:
Alt text: "An image of a Goucher College staff member"
Read by screen reader as: "Image, an image of a Goucher College staff member"
The alt text in this example is redundant and gives no indication of who is being shown in the image.
Avoid embedding important information 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:
Alt text: "Goucher College is named a most innovative college by U.S. News and World Report"
Read by screen reader as: "Image, Goucher College is named a most innovative college by U.S. News and World Report"
Bad example:
Alt text: "Goucher College accolade"
Read by screen reader as: "Image, Goucher College accolade"
This example does not communicate the specific recognition received.
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.