Editing Media

Add and Manage Images and Videos

Enhance your Cascade CMS pages with engaging images and videos. This guide covers the technical steps for inserting media and, most importantly, the best practices to ensure your content is effective, professional, and accessible to all users.

On This Page:

• Interactive Walkthrough
• Instructions
  • Insert an Image
  • Insert a Video
• Best Practices
  • Write Image Descriptions
  • How to write Effective Image Descriptions
  • Optimize Images for Web Performance
• Additional Resources

Interactive Walkthrough

Instructions

1. Insert an Image

1. In the editor toolbar, click "Insert/edit image".
2. Click "Choose File".
3. Browse or search for the image you want to add, select it, and click "Choose".
4. Add an image description (see Best Practices below).
5. Click "Ok".

For Decorative Images Only

If an image serves no informational purpose and is purely decorative, you may check the box labeled  "This is a decorative image, no description needed."

⚠️Important: This option should be used sparingly and only for images that truly add no meaning to the page (e.g., a stylistic border or spacer graphic). Most images on a university website are informative and require a description.

2. Insert a Video

Before inserting a video, you must obtain its embed code. This is different from the video’s URL. Here’s how to get it from YouTube:

(1) Retrieve the Embed Code (from YouTube)

1. Navigate to the video you want to embed.
2. Click the "Share" button, then click the "Embed" icon (usually represented by  </>).
3. (Optional) Check "Start at" and enter a time if you want the video to begin playback at a specific point.
4. (Recommended) Enable "Privacy-enhanced mode" under Embed Options to prevent YouTube from tracking visitors on your page.
5. Click "Copy" to copy the embed code to your clipboard.

(2) Insert the Video in Cascade

1. In the editor toolbar, click "Insert/edit media".
2. Click the "Embed" tab.
3. Paste your embed code into the provided field.
4. Click "Ok".

Best Practices: Image Descriptions & Web Performance

1. Write Effective Image Descriptions (Alt Text)

Images on the web serve different purposes. Your text alternative must match the image's role on the page.

⚠️Important: for all information on a website to be accessible to everyone, informative images  must have a text alternative. This text is read aloud by screen readers and displayed if the image fails to load.

2. How to Write Great Alt Text

For all informative images, follow these guidelines to ensure clarity and accessibility:

• ✅  Be concise and specific. Aim for a brief phrase or sentence that conveys the core meaning.
• ✅ Communicate the content and function. Describe the image's purpose or the information it presents.
  • Example: Instead of "Photo of a building," use "Sheridan Hall, home of the College of Arts and Sciences."
• ✅ Describe function for linked images. If an image is a link, describe the destination.
  • Example: Instead of "Blue arrow button," use "Apply for admission."
• ❌  Do not repeat text that is already a caption or written nearby.
• ❌ Do not start with "Image of..." or "Picture of..."—screen readers announce this automatically.

For more detailed guidance, see: Section 508: Authoring Meaningful Alternative Text.

3. Optimize Images for Web Performance

Large image files slow down your site and frustrate visitors.  Before uploading to Cascade, check your image's file size. If it is larger than  1 MB, convert it to a web-friendly format like WebP or JPEG to ensure fast loading times.

For step-by-step instructions on resizing and compressing images, see our guide:  How to Optimize Images

Additional Resources

• WAI: Informative Images
• WAI: Decorative Images