Here are some things to keep in mind when generating Academy Banner images:
Academy banners across the site have been uniformly optimized to display at 1200x300 pixels (or equivalent aspect ratio).
The images are set to resize and crop automatically within that space from the center. This ensures that the images are never distorted when displayed on a variety of displays and devices and will always take up the 'full' space of the banner.
The uploaded images may crop either vertically, horizontally, or both, depending on their original size versus the 1200x300 equivalent amount of space they're displayed in. See diagram illustrating this behavior.
Because of this, any important content such as people's faces or text baked into the image must be placed within the center 50-75% of the image to minimize the possibility of them getting cropped. See 2 examples of 'what not to do' and 'what to do'.
For the large banner on the landing page, we recommend a 16:9 aspect ratio.
For the Academy icon and logo, we recommend a square image, regardless of actual size, with some amount of free space on all sides around the logo since the system will automatically display the icon as a circle.
Please note that if an image with a transparent background is uploaded, the background will be made white.
For the Academy logo, we recommend a 30 px tall image, but images that are larger will automatically resize.
For the card images on Collections, Courses and Events, we recommend a 16:9 aspect ratio.