The purpose of this guide is to provide image dimensions that will be ideal across multiple pages on our site when being viewed on devices of differing sizes. The images you end up using are not required to match the ideal sizing listed below, but if you would like them to appear high quality and up to standards that most users expect, then these are the dimensions we recommend.
It is important to note a couple of hard and fast rules regarding these recommendations before beginning:
1. It is strongly recommended that images conform to the recommended aspect ratio. If they do not, they may appear distorted, or cropped, as the image is stretched to meet the demands of the aspect ratio.
2. Images can always be larger than the recommended size, as long as the aspect ratio is maintained. For example, a recommended image of 100x100 could be substituted with a 300x300 with no loss in quality. However, a 50x50 image will be stretched to compensate and the result will appear to be a very poor quality image.
Learn some tips and tricks to resize images for the web here.
User Profile Avatar:
Ideal size: 200x200
Aspect Ratio: 1:1
Supported File Type(s): jpg, jpeg, png, svg, gif
Community Media:
Community Banner
Ideal size: 2048x1152
Aspect Ratio: 16:9
Supported File Type(s): jpg, jpeg, png, svg, gif
The 'content safe' area highlighted below will render well on all mobile devices --- the outer areas will fill the banner area when viewed on desktop and laptop devices.
Click here to download a template for the community banner.
Community Logo
Ideal size: 160x160
Aspect Ratio: 1:1
Supported File Type(s): jpg, jpeg, png, svg, gif
Announcements
Image Gallery
You can select the aspect ratio on the image gallery (top right).
4:3 2070x1552
3:2 2070x1380
16:9 2070x1164
2:1 2070x1035
Supported File Type(s): jpg, jpeg, png, svg, gif
Standalone Image
2070 width remains the same, but height is variable based on aspect ratio of the image you are adding. See below for recommendations at common aspect ratios:
4:3 2070x1552
3:2 2070x1380
16:9 2070x1164
2:1 2070x1035
Supported File Type(s): jpg, jpeg, png, svg, gif
Courses/Pages/Collections/Discussions
Primary Image (Page, Course, Collection, Discussion Card)
Ideal size: 400x400
Aspect Ratio: 1:1
Supported File Type(s): jpg, jpeg, png, svg, gif
The primary image of a course is the same image that will appear for the course preview when it is added to a bundle. Please see the Bundle Course Image section below for more information.
Image Gallery (Page, Course)
You can select the aspect ratio on the image gallery (top right).
4:3 1554x1164
3:2 1554x1036
16:9 1554x874
2:1 1554x776
Standalone Image (Page, Course)
1554 width remains the same, but height is variable based on aspect ratio of the image you are adding. See below for recommendations at common aspect ratios:
4:3 1554x1164
3:2 1554x1036
16:9 1554x874
2:1 1554x776
Tips
Different screen sizes might affect text wrapping. If text wrapping is a concern, choose the centered image option. For either of the centered options the image will display in its native/natural width, with the largest width 777px wide (height will be adjusted accordingly). The full-width option will always display the image at the max width (again, 777px). If the image is naturally narrower it will be enlarged, and if it’s smaller it will be shrunk.
Course Bundle (Individual Course Cards)
Bundle Course Image
Ideal size: 400X300
Aspect Ratio: 4:3
Supported File Type(s): jpg, jpeg, png, svg, gif
The primary course image is the same that will be used for the bundle course image. If you have already added a primary course image, then there is no further action required here. Otherwise, you'll have to go back and add one there for it to populate in the bundle view of the course!
Be advised, Course Cards on the Courses Tab display a 1:1 image. The preview cards inside a bundle display a 4:3. This can make it difficult to create an image that looks good in both places.
Product Landing/Enrollment Page
Primary Image
This space will accommodate a decent variety of different image sizes/aspect ratios. If you have trouble getting it to look exactly the way you’d like, please contact us.
Supported File Type(s): jpg, jpeg, png, svg, gif
Credential
Ideal size: 250x250
Aspect Ratio: 1:1
Must be png or svg