School website service training and support

Image dimensions and file sizes

Use this guide to make sure you upload the best images to your website.    

Adobe Experience Manager will automatically create ‘renditions’ or smaller versions of your images. However, if your original image isn’t the right size, those automatic versions might not look their best.

We’ve put together some guidelines to help you make sure you’re using the best possible image in each case on your website.

Do

  • Use the correct dimensions for each image type. This will stop your images from appearing stretched or distorted.

  • Keep your images under a recommended maximum file size of 1MB. If the file size is bigger it will take photos longer to upload. We recommend the maximum width of 1600 pixels. 

  • Use meaningful keywords in your title.

  • Save your file as a JPG or PNG.
  • Read more on taking photos and images.

Dimensions and file size

The dimensions and file size requirements are different for each type of image. 

Go to Edit images to know where to find dimensions in Assets.

Adobe Photoshop

If you have access to Adobe Photoshop - use the 'save for web' function in Photoshop, which you can do in large batches to make your life easier.


Banner – theme 1

The dimensions for banner – theme 1 are 1280x355 pixels or 33x9 cms.

The maximum file size is 200KB.

Banner – theme 2

The dimensions for banner – theme 2 are 895x400 pixels or 23x10 cms.

The maximum file size is 200KB.

Banner – theme 3

The dimensions for banner – theme 3 are 1280x355 pixels or 33x9 cms.

The maximum file size is 200KB.

Banner – theme 4

The dimensions for banner – theme 4 are 1280x355 pixels or 33x9 cms.

The maximum file size is 200KB.

Banner – theme 5

The dimensions for banner – theme 5 are 950x635 pixels or 25x16 cms.

The maximum file size is 200KB.

Only use this theme with dark primary colours. If your theme 5 has black in it, switch to theme 1 or 2.

Hero banner images

For the hero banner we recommend using 3:2 aspect ratio images (landscape format). The following is a guide to sizes listed in pixels. These cover the most common image sizes:

  • 3000x2000 or larger - this size is too large, the image should be resized down
  • 1600x1066 - this is an appropriate size, a good balance between detail and reasonable file size
  • 1280x853 - this size is marginal and will look slightly blurry
  • 1000x667 or smaller - the image is too small and will look blurry on large screens

School logo

The dimensions for the school logo are:

  • 130x150 pixels
  • 260x300 pixels (double size), or
  • 3x4cms.

The maximum file size is 50KB.

This image will appear in the header and footer of your website.

You can also use SVG format for your logo which will scale up to larger sizes with high quality. For SVG logos, you will need to have the original vector graphic version of your logo.

Newsletter thumbnail

The dimensions for the newsletter thumbnail are 100x140 pixels or 2x3 cms.

The maximum file size is 50KB.

Card component

The card component takes the following image sizes:

  • Normal card components accept 3:2 format images (standard landscape arrangement)
  • If the 50% card component with image is inside 2 columns, it will display an image in vertical (portrait) orientation with the left and right edges cropped out.

See the card component how to guide for examples of how images are displayed.

Divider component

The divider component has various image dimensions depending on the divider layout chosen.

  • Divider with image: Use a standard 3:2 landscape image with this divider layout. The image shouldn't be more than 1280 pixels in width.
  • Divider with image background: Use an ultra wide image for this layout. The image should be at least 1280x460 pixels. If you use a taller image, the top and bottom will be cropped out.
  • Divider with image box: Use a 21:9 wide image for this layout., at least 1280x550 pixels.

See the divider component how to guide for examples of how images are displayed.

News and event detail images

The dimensions for the news and event detail images are 770x370 pixels or 20x9 cms.

The maximum file size is 100KB.

Include alt text for news images unless the image is purely decorative. Alt text for event images will be added for you.

Image gallery album cover 

Use landscape photos for your album covers as they look best. 

The maximum file size is 100KB.

Include alt text for all images in your gallery. 

Content images

The maximum file size for other images is 100KB.

Include alt text and a caption unless the image is purely decorative.


*Decorative, meaning:

  • they serve no purpose other than to add visual interest to a page

  • someone reading your content won’t miss out if they can’t see the image.