We know images can be tough to work with sometimes given all the options available in terms of sizes, dimensions and layouts. That's why we've configured Drupal to be as flexible as possible to the point that in most cases you'll be able to upload any image size and it will be cropped and resized to the dimensions the website requires. Of course, some basic guidelines will help your images look their best.


In a Nutshell

The dimensions and ratios you see below are what we've identified work best in most situations however the platform is flexible enough to allow for other sizes not mentioned here. Please see the full detailed explanation if you need to display other sizes


ComponentUsageDimension (px)Ratio
50-50 ContainedImage Content1120 × 63016 : 9
50-50 Full WidthImage Background1440 × 7206 : 5
VariousBackground Images2000 × 8005 : 2
TextLandscape900 × 6003 : 2
TextPortrait *460 × 5754 : 5
TextSquare230 × 2301 : 1
TextExtra Wide / Banner *1260 × 630
1260 × 252
2 : 1
5 : 1
TextIcon or Badge48 × 481 : 1
TextLogo or Small Image *180 × 902 : 1


* These cases also allow for other sizes or ratios.



Images in Components

These images will be cropped to landscape and extra wide formats, therefore we strongly advise against the usage of square and portrait images. If you must, be sure to adjust the focal point.


50-50 Contained: Image Component

We recommend using an image with a 16:9 format of at least 1120 × 630px.



50-50 Full Width: Image Background

This image adapts to its container and how it is displayed will largely depend on the amount of content as well as the device (size of the screen) in which it's being viewed. We recommend using an image with a 6:5 format of at least 1440 × 1200px.



Various: Background Image

Nearly all components allow you to use a background image, how it is displayed will largely depend on the amount of content as well as the device (size of the screen) in which it's being viewed. We recommend using an image with an extra wide format of 5:2 format of at least 2000 × 800px




Inline with Text - Left or Right Aligned

The school website allows you to insert images with a decorating border behind the image, this comes particularly useful when adding a few images throughout your content to create harmony. Bordered images will only appear when adding Captions to your image and ONLY when aligned to the left or right.


Landscape

We recommend using an image with a 3:2 format of at least 900 × 600px. These images will be cropped to a maximum size of 900 × 560px regardless of the format, therefore we strongly advise against the usage of portrait images. If you must, be sure to adjust the focal point.


To configure it, add your image in the desired text box and edit it to have a left or right alignment as needed and a display of Full Size.




Portrait and Square

We recommend using an image with a minimum width of 230px and maximum of 460px. These images will NOT be cropped so be careful not to use images that are too tall or too small as these will likely be visually unappealing. Configure the image to:

  • Display: Rich Text Half Size and
  • Alignment: Left or Right, as needed



The school website allows you to insert images with a decorating border behind the image, this comes particularly useful when adding a few images throughout your content to create harmony. Bordered images will only appear when adding Captions to your image and ONLY when aligned left or right.



Inline with Text - Center Aligned

Centered Images can take up a lot of space and therefore we only recommend using landscape and extra wide images.


Landscape

We recommend using an image with a 3:2 format of at least 900 × 600px. These images will be cropped to a maximum size of 900 × 560px regardless of the format, therefore we strongly advise against the usage of portrait images. If you must, be sure to adjust the focal point.


To configure it, add your image in the desired text box and edit it to have a center alignment as needed and a display of Full Size.


Extra Wide

We recommend using an image with a 5:1 format of at least 1260 × 252px.


To configure it, add your image in the desired text box and edit it to have a center alignment and display Original.




Special Cases


Icons and Logos

For Icons, we recommend using an image with a 1:1 format with a maximum size of 48 × 48px.

For logos, we recommend using an image with a 2:1 format with a max height of 120px, e.g., size of 180 × 90px.


To configure it, add your image in the desired text box and edit it to have a none alignment and display Original.