Using images effectively

From full-width heroes to inline illustrations, images are central to how HarvardSites communicates. This guide helps you understand where images appear in the platform, what you can control as an editor, and how to ensure they look great and remain accessible.

Explore the related technique guides for practical steps to solve common problems and elevate your use of imagery.

Make your images clear, consistent, and accessible

Images bring stories to life and help visitors connect with your content. But without the right care, they can slow pages, confuse users, or even exclude audiences.

HarvardSites gives you the tools to make images look great across devices while staying accessible and on brand. The following techniques show how to handle cropping, captions, credits, and layouts so your visuals always support—not distract from—your message.

Add Image Captions and Credits the Right Way

Use captions for context and apply consistent patterns for credits.

Choose the right image size and format

Keep pages fast and sharp by exporting images at the right size and file type for each component.

Fix Cropping Issues in Cards and Lists

Prevent awkward crops or black bars in 50/50 Cards, Vertical Cards, and Publications.

Keep Hero Images Readable

Make sure hero images are cropped and composed so that the most important parts remain visible across screen sizes.

Replace and Edit Inline Images in the Text Editor

Work around editor limits by swapping images through the media library and avoiding broken links.

Use the Images Component for Galleries

Use the Images component for groups of photos instead of embedding images in text.

Need help?

Get support creating effective images

Not sure how to crop, caption, or choose the right component for your images? We can help. Contact the HarvardSites team for support, or explore real examples to see how others are making images more effective and accessible.