/Marketing and Communications
CMS Web Support
CMS Web Support

Optimizing Images for the SBU Website

Well-optimized images help pages load quickly, improve search and AI discoverability, support accessibility, and keep the site looking polished across devices. Use this guide when preparing images for upload.


Tip: You can edit and optimize images right in Modern Campus CMS. See our help article here for details.

Choose the Right Image Format

Pick the format based on the content.

JPEG (.jpg)

  • Best for photos and complex gradients
  • Small file sizes with good quality
  • Use for most news photos, portraits, event images

PNG (.png)

  • Best for graphics that need transparency
  • Higher quality, larger file sizes
  • Use only when transparency is required

WebP (.webp)

  • Modern format with excellent compression
  • Small file sizes with strong detail
  • Use when available; ideal for large hero images

SVG (.svg)

  • For logos, icons, line graphics
  • Infinite scalability with tiny file sizes
  • Do NOT use for photos

 

Ideal Dimensions and Cropping

Keep images appropriately sized for their placement.

  • Aim for display-sized images, not oversized originals.
  • Avoid uploading anything larger than 2600px on the long edge unless specifically instructed.
  • For thumbnails or smaller components, 1200px wide is usually more than enough.

Cropping tips:

  • Keep subjects centered or aligned with where components place text.
  • Avoid unnecessary background space.

 

Target File Size

Keep images as light as possible without noticeable quality loss.


Recommended:

  • Under 300 KB for most images
  • Under 150 KB for thumbnails or multiple images on a page
  • 40-600 KB max for full-width hero images (only when needed)

Large file sizes slow page loads, especially on mobile.

 

When Using Photographer-Provided Images

Professional photos or hi-res stock images often arrive very large (5–25 MB). Always:

  • Downscale dimensions
  • Export in JPEG or WebP
  • Compress before upload
  • Store the original offline for archival use, not on the CMS

 

Alt Text Standards

Alt text improves accessibility and helps people and search engines understand images. Alt text should:

  • Describe the essential content of the image
  • Keep it concise (8–15 words is typical)
  • Focus on what the image means in context, not just what it shows
  • Do not include “picture of” or “image of”


Examples

  • Poor: “Student with laptop”
  • Better: “SBU student studying outside the library on a sunny fall day”


When to use empty alt text

  • Decorative images that add no meaning
  • Use alt="" so screen readers skip them

See our complete article on alt text here.

 

How to Reduce File Size

Use compression tools to shrink images while keeping them crisp.

 

Recommended compression tools

  • Modern Campus Image Editor
  • Photoshop Export for Web (control over quality settings and formats)
  • Canva (control over quality settings when downloading)
  • TinyPNG / TinyJPG (excellent compression with minimal quality loss)
  • Squoosh.app (lets you preview and adjust compression levels)
  • ImageOptim (Mac) (batch optimization, metadata removal)

 

Workflow

  • Resize to appropriate dimensions
  • Export in the right format (JPEG/WebP for photos)
  • Compress with one of the tools above
  • Aim for recommended file size ranges
  • Add appropriate alt text before publishing

 

Quality Checks Before Uploading

Do a quick review:

  • Does it load fast on mobile?
  • Is the subject clear and in focus?
  • Is the file format correct for its use?
  • Is the image properly sized–not too large or too small?
  • Is the alt text meaningful and accurate?