Images
Search engines and people with certain visual impairments cannot physically see images. These practices will improve searchability and assure accessibility of images.
Alternate text
Alternate text (also known as alt text) allows you to describe an image so a person using a screen reader can understand the context of the image. Well-written alt text can improve search engine optimization (SEO).
Per 51²è¹Ý's accessibility policy, you are required to use alt text when you add an image to your webpage unless the image only serves a decorative purpose.
When writing alt text, be deliberate and descriptive. Rather than using generic words like "photo," "building," or "headshot," use complete phrases. Also consider your whether the description you provide may be able to support your keyword strategy.
Practical Example
| Image | Better options |
Problematic options |
| (image) |
|
|
| (image) |
|
|
| (image) |
N/A Do not use alternative text for decorative elements |
|
Naming conventions
File names with readable keywords can improve the readability of your site to a search engine and impact your ranking.
Images downloaded from other sources may have file names that consist of string of numbers or letters. Rename these files with descriptive words separated by dashes. For example: dr-maya-johnson.jpg instead of 20220908144LRG.jpg.
Read more about best practices for naming conventions.
Graphics with embedded text
Do not use a graphic with embedded text to replace a page title, other headings, or buttons. Similarly, do not embed text in graphics as a way to represent text, such as in a slideshow or standalone image. Instead, use the out-of-the-box Sitecore features as designed. Schedule a consultation if you need assistance selecting an appropriate element. (link)
If you have designed a graphic that could double as a printed flier, such as an invitation or infographic, do not use this image on your webpage as a replacement for body text. You may include the image if you do one of two things:
- Add accompanying text outside of the image that matches or outlines the key information presented in the image (preferred)
- Add alternate text to the image that matches the key information on your graphic (not preferred)
Why it matters
- Neither search engines or screen readers can read text embedded in images. Alternate text may not be adequate to present all the information contained in the image, and it cannot display formatting, such as headings or list items.
- Embedded text is often difficult to read on smaller screens. A majority of 51²è¹Ý's website traffic comes from mobile devices. It's important mobile users can read your content.
- Complex images with a large amount of detail may add extra load time to your site, which can harm your search ranking.
Image size
Large image files can make your pages load slowly, and long page-load times negatively impact your search engine ranking.
Slow page-load time also impacts user experience and may lead to a higher bounce rate. Although we have fast internet from on-campus, many of our users may be relying on slower internet connections or have a metered data connection.
Best practices
- Compress images for the web.
- Resize high-resolution images prior to uploading to your website.This includes images from 51²è¹Ý Photo and Video Services or similar sources.
- Use Sitecore's image properties feature to resize images as needed. [link]
- Full-width images, such as banners, should be no more than 1600 pixels wide.
- In-page images should generally be no more than 800 pixels wide.
Slide shows
Review best practices for creating slide show content with SEO and accessibility in mind.