Image Guidelines

Prepare images before uploading them so they stay clear and load efficiently. Start with the card and social share recommendations below; banners, icons and other image uses can need different sizes.

For the site's page cards, our suggested starting point is 1380 × 900 pixels, using an optimised JPEG for photographs or PNG where transparency is needed. Aim for roughly 100–250 KB where practical, while keeping the image clear.

Recommended social share image dimensions, with width listed first. Choose one size for each upload:

Dimensions	Suggested use
1380 × 900 pixels	Suggested starting point.
690 × 450 pixels	Smaller version with the same proportions.
460 × 300 pixels	Smaller version with the same proportions; check that it remains clear at the displayed size.

All three sizes have the same 23:15 landscape proportions. Keep important text, logos and faces near the centre with space around the edges, as card frames and social previews can crop the image. Place square artwork on a landscape canvas with padding if the full artwork needs to remain visible.

Prepare and upload

Crop the image to the recommended proportions.
Resize it to the chosen pixel dimensions and save an optimised JPEG, or a PNG when transparency is needed.
Compress it and check its file size and clarity. Keep the image clear and use the 100–250 KB range as a practical target.
Open the page represented by the card and upload the prepared file under Settings > Social media.
Save and preview the card on desktop and mobile.

Uploading an image to the social share field does not automatically make it smaller. Resizing and compressing it beforehand is what delivers the performance benefit. Changing the field alone does not replace that preparation.

Most cards use only the page's own Social media image and show no thumbnail if it is missing. Group posts and group-linked events use that image first, then fall back to the first image attachment. See Card for the exact rules and editing steps.

🧩 Image Formats

Different image types are suited for different purposes.

Format	Best For	Pros	Cons
JPEG (.jpg)	Photos, banners, background images	Small file size, good quality	No transparency, lossy compression
PNG (.png)	Logos, icons, transparency needed	High quality, supports transparency	Larger file sizes
WebP	All modern web images	Small file size, high quality	Not supported in very old browsers
SVG	Icons, logos, simple illustrations	Infinite scaling, sharp on all devices	Best for flat graphics only

For the card/social share workflow above, start with an optimised JPEG for photographs or PNG when transparency is needed. Existing WebP images can also be used where appropriate.

📏 Image Resolution

What is Resolution?

Image resolution refers to the number of pixels an image contains (e.g. 1200×800). It directly impacts how large and clear the image appears on screen.

For image uses other than the card/social share images above, use these general guidelines.

Recommendations

Use Case	Recommended Width
Full-width banners	1600–2500 px
Inline content images	800–1200 px
Icons and UI graphics	24–100 px

✅ Avoid uploading large images if they’ll be displayed small—resize them first.

🔲 Aspect Ratios

Aspect ratio is the proportional relationship between width and height (e.g. 16:9 or 4:3).

Why It Matters:

Consistency: Keeps layouts clean and predictable
Responsiveness: Helps images look good on all screen sizes
Cropping: Prevents important content from being accidentally cut off

Common Ratios

23:15 – The site's recommended card and social share images
16:9 – Widescreen banners and videos
4:3 – Traditional photos
1:1 – Square thumbnails or icons

Use consistent proportions for related images. For news, Reading Room and other shared page cards, follow the 23:15 landscape recommendations above.

🗜️ File Size & Compression

Why File Size Matters

Large images = slow-loading pages
Slow pages = poor user experience and lower search rankings

Target File Sizes

Image Type	File-size Guide
Card / social share image	Roughly 100–250 KB where practical, while keeping it clear
Hero/Banner	< 500 KB (ideal < 300 KB)
Content Images	< 200 KB
Icons	< 50 KB

Compression Tools

🧠 Always compress images before uploading — without sacrificing visible quality.

🚀 Why This All Matters

1. Faster Page Load

Lightweight images reduce load time, especially on mobile
Faster websites keep visitors engaged

2. Better User Experience

Optimized images load quickly and look sharp
Responsive and consistent visuals build trust

3. Improved SEO

Google ranks faster-loading pages higher
Proper image tagging and sizing supports accessibility and discoverability

✅ Image Upload Checklist

[ ] Saved in a suitable format: optimised JPEG for card photographs, or PNG when transparency is needed
[ ] Cropped to the correct aspect ratio
[ ] Resized to the chosen upload dimensions
[ ] Compressed to reduce file size
[ ] For card images, selected on the represented page under Settings > Social media
[ ] Named descriptively (e.g. team-photo-2025.jpg)

👥 Need Help?

If you’re unsure about the right size, format, or setup for your website images, don’t hesitate to ask! Keeping your site optimized is a collaborative process—we’re here to help ensure it looks great and performs even better.