When you add images to your school website — to a page, a news story, the homepage, or a staff profile — using the right size makes your site look professional, load quickly, and stay accessible. This guide explains where images appear, what the platform caps them at, and how to get a clean result.
💡 Quick rule of thumb: upload images that are at least 1200 pixels wide. The platform automatically resizes and optimizes images for different placements, so larger source images give the system more to work with. Optimal exact dimensions depend on your specific theme and design — these are general guidelines.
Image placements and platform display caps
Hero images (homepage and page banners)
Upload size: at least 1200 pixels wide
Common aspect ratio: roughly 3:1 banner style (e.g. 1200 × 400) — exact display depends on your theme
Use for: page hero zones, Shuffle slides, homepage hero
Note: Use high-resolution photos in all hero image sections
See: Create visually stunning and accessible pages for full hero-image guidance
Page body images (inside Content and Photo blocks)
Upload size: 800–1200 pixels wide for inline content; 1200+ for full-width
Aspect ratio: flexible — depends on the content; common choices are 16:9 (e.g. 1200 × 675) or 4:3 (e.g. 1200 × 900)
Use for: images inside a page's content (Photos block, inline images in a Content block)
News story thumbnails (homepage news block)
Display cap: news image thumbnails on the homepage are rendered at up to 800 pixels wide (no height cap). Larger uploads are downscaled for display.
Upload size: at least 800 pixels wide; 1200 is fine and won't hurt anything
Aspect ratio: consistent ratios across your news set produce a uniform look on the homepage news block. Mixed ratios will display at different heights.
Tip: if your news images look inconsistent in size on the homepage news block, it's usually because the source images have different aspect ratios. Crop them to the same ratio before upload for a uniform look.
Event images (calendar / event detail)
Display cap: event images are capped to ~150 pixels wide in most placements.
Where it appears: event images display primarily on the event detail page itself (accessed through the Calendars feature). They are not prominently shown elsewhere at this time.
Upload size: 300–600 pixels wide is plenty; very large images will just be downscaled.
Staff portraits
Dimensions: at least 200 × 200 pixels (400 × 400 or larger preferred for crisp display)
Aspect ratio: 1:1 (square)
Tip: keep lighting and background consistent across all staff photos for a clean, professional look
Homepage Quicklinks (Button, Form overlays)
Quick Link backgrounds and hover images: 1200 pixels wide minimum
If you have Quick Link images on your homepage, they may be editable in your Shuffle Feature- see: Navigate to Shuffles. If it does not appear in a shuffles topic, you'll need to open a support ticket and provide our team with the image you'd like uploaded for your Quick Links, hover photos, etc.
Supported file formats
JPG / JPEG — best for photographs
PNG — best for graphics with transparency, logos, screenshots
GIF — supported but rarely needed; use sparingly
WebP — supported; modern format with better compression
My images look wrong — troubleshooting
"My image is way larger than the others"
When images in a row or block look mismatched, it's almost always because the source files have different aspect ratios. The platform displays each image based on its native ratio, so a 4:3 photo next to a 16:9 photo will look noticeably different.
Fix: before uploading, crop all images in a set to the same aspect ratio (1:1 for staff, 16:9 for news, 3:1 for banners).
"My image looks blurry or pixelated"
This means the source image is smaller than the display size. The browser is stretching it.
Fix: re-upload at a larger size. For hero images, aim for at least 1200 pixels wide. For staff photos, 400 × 400 pixels or larger.
"My page loads slowly after adding images"
Very large source files (5+ megabytes) can slow down page load on slower connections. The platform compresses images automatically, but starting with a reasonably sized file helps.
Fix: resize images to no more than 2500 pixels wide and save them as JPG (for photos) with quality 80–85% before upload. Free tools like Preview on Mac, Paint on Windows, or Squoosh.app in any browser can do this.
Accessibility reminder: alt text
Every image on your site should have descriptive alt text — a short caption that screen readers announce to visitors who can't see the image. Alt text is required for ADA compliance and helps SEO.
For full guidance on writing good alt text, see Accessibility Do's and Don'ts.