Why optimization matters

Page load speed. Large image files are the most common reason web pages load slowly. A page with five unoptimized images can take five times longer to load than a page with five optimized images. Slow pages drive visitors away and hurt search ranking.

Mobile experience. Most rowan.edu traffic is mobile. Mobile visitors often have limited data and slower connections. Unoptimized images consume their data and slow their experience.

Accessibility. Some accessibility tools and slower assistive tech struggle with very large images. Optimized images keep the experience smooth for everyone.

SiteImprove flags. Oversized images are flagged in SiteImprove's quality reports. Optimization keeps your reports clean.

Use Squoosh to optimize images

We recommend Squoosh App for image optimization. It runs in the browser, doesn't require an account, and doesn't store your images.

Basic Squoosh workflow:

• Go to squoosh.app in your browser.
• Drag your image into the Squoosh window.
• The right panel lets you change the format and quality.
• Choose MozJPEG for photos.
• Adjust the quality slider. 75 to 85 is a good range for most photos. The preview shows the file size on the right.
• Click Save in the bottom-right corner to download the optimized image.
• Upload the optimized image to Cascade.

Quality 75 to 85 is usually visually identical to the original but produces a file 50 to 80 percent smaller.

Aspect ratios

The aspect ratio is the proportional relationship between the width and the height of an image. A 1600 × 900 image has the same aspect ratio as 800 × 450 (both are 16:9). Aspect ratios matter because Cascade modules expect images at specific ratios.

If you upload an image that doesn't match the expected aspect ratio, the template will crop or stretch it to fit. Cropping may remove the most important part of the image. Stretching distorts faces and shapes.

To match a required aspect ratio, crop the image before uploading using any image editor (Photoshop, Pixelmator, Photos on Mac, the Photos app on Windows, or even Squoosh App's Resize tool).

Standard aspect ratios at Rowan

These aspect ratios appear most often across templates and modules. Specific dimensions vary by template — see the Banner Images guide and the Feature Images guide for template-by-template specs.

Example use cases

• Banner image (Rowan Core)
  Aspect Ration: 430:187 (≈ 2.3:1)Wide, cinematic; works at full container width
• Feature card image
  TBD per template; Squarer ratios for grid layouts
• Image/Text Combo
  flexible, but consistentPair images with similar ratios for balanced rows
• Image Gallery
  flexible, but consistentMixed ratios in one gallery look unintentional
• Bio page portrait
  typically 1:1 (square) or 4:5Headshots crop best square or slightly portrait

Common dimension targets

When in doubt, optimize for these widths. The template will handle scaling down for smaller screens and mobile.

• Banner images: 1600 px wide max for full-width hero banners
• Feature images: 800 to 1200 px wide
• Inline body images: 800 px wide max
• Bio portraits: 600 to 800 px on the long edge
• Background images: 1920 px wide max

For all of these, file size after optimization should be under 200 KB for most images, and under 500 KB for large hero banners.

Choosing the right format

JPG (or MozJPEG): best for photos. Use this for almost all photographic content.

PNG: best for graphics with sharp edges, logos, and images that need transparency. Larger file sizes than JPG for the same image.

SVG: best for icons, simple graphics, and logos. Scales to any size without losing quality. Don't use for photos.

WEBP: This image format is not currently supported. Cascade will not allow you to use the webp format.

GIF: Useful for simple animations, please generally avoid using GIFs.

What not to upload

Images straight from a phone or DSLR. These are typically 4000+ pixels wide and 5+ MB. Always resize and optimize first.

PowerPoint or Word screenshots as content images. Recreate the content as proper HTML on the page, or as an image with descriptive alt text.

Images with embedded text. Text inside images can't be selected, can't be searched, and isn't accessible to screen readers. Use real HTML text on the page.

Images with copyright restrictions. Use Marketing's approved photo library or licensed stock.

Images of identifiable individuals without permission. Especially students, K-12 children.

Tips for working with images

Optimize before you upload, every time. It's faster to do it right at upload than to find a slow page later and re-optimize. Add "_web" to the filename to identify what photo has been optimized.

Crop to the aspect ratio you need. Don't rely on Cascade or the template to crop for you; the result image may differ than what you wanted.

Keep originals. Save the original high-resolution image somewhere outside Cascade (a department OneDrive or Google Drive). If you ever need to re-crop or re-export, you'll want the original to work from.

Add alt text every time. Every image needs alt text. The optimization workflow is also the right time to think about what the image conveys and write the alt text. See the Alt Text announcer.