Image Properties
After you have properly sized, optimized, named and uploaded your image to the DAM, the next step is to add the image properties.
Image properties play a vital role in the performance of the page, accessibility for all users, and search engine rankings. Combined with strong content, images help search engines to identify how prominent a page is based on the title, alternative text and description.
Instructions
1. Add the Image Title, this will auto-populate with the Image Name but can be changed to be more descriptive.
2. Add Alternative Text. Alternate text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank our website. It also appears when you hover your mouse over the image.
Best practices for alternative text
- Be descriptive and concise.
- Use 125 characters or less.
- Do not use special characters, like,"! @ # $ % ^ & *."
- Add context that relates to the topic of the page.
You'll see an AI button in the alt text field – clicking this will generate a starting point for your alt text. In most cases, you will need to adjust the AI output to provide more descriptive detail for screen readers.
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone without mentioning that there is an image present. Whatever you say to describe the content of the image is typically a good start for writing the alternative text.
Alternative text for professional headshots or images for people profiles needs to describe the person in the image. For example, "Professional headshot of _____________ in dark attire against a gray background" or "______________ wears a blazer and button up shirt while looking at the camera."
3. Make sure the image is placed in the correct Image Library.
4. Enter the image's Author Information.
5. Add the image's description. An image description gives more details than alt text and allows someone to learn more about what is in an image. Alt text gives the user the most important information while image descriptions provide further detail.
Example:
- Alternate text: Two CMU students reading near Anspach Hall.
- Description: Two anthropology majors studying outside of Anspach Hall, home of The College of Liberal Arts and Social Sciences. (CLASS)
6. You must select a category for your image.
Note: Images do not need tags. There is no tag for images.
7. If the image properties are complete, send for approval. If more work is needed, save as draft.
