Image sizes and ratios

This article recaps the recommended image ratios and sizes for all the elements in the platform.

All images should be in JPEG, PNG, or GIF format (except the group favicon, which can also be ICO). Avoid SVG: because SVG images have no fixed dimensions, they may appear small or render incorrectly in views that display images at their native size, such as image popups and the mobile app.

When you upload an image, the platform uses the media name as the alt-text read by screen readers. Use a descriptive name that conveys the image content (for example, "Sales onboarding checklist" rather than "image001.jpg"). You can set the name at upload time or update it later via the media editor inside the course editor.

All image containers apply the following CSS rules for displaying images:

• background-size: cover
• background-position: center

Course cover image

• 16:9 ratio (1.7)
• At least 980x250 pixels
• No text

The course homepage displays the cover image in full-width responsive. All other places (at the top of dashboards, newsfeeds, dashboard tables, search results page, course selection modal, and path steps) display a miniature with a 16:9 ratio.

In the course homepage, the cover image is darkened with a dark gradient, with the following CSS characteristics:

background: linear-gradient(180deg, rgba(24,25,29, 0.3) 0%, rgba(24,25,29, 0.9) 100%);

See Edit a course →

Path cover image

• 16:9 ratio (1.7)
• At least 980x550 pixels
• No text

The path homepage displays the cover image in a 2.6 ratio. All other places (at the top of dashboards, newsfeeds, dashboard tables, search results page, path selection modal, and path steps) display a miniature with a 16:9 ratio.

See Edit a path →

Carousel

• Poster layout: 1600x400 pixels (4:1 ratio)
• Postcard layout: 800x400 pixels (2:1 ratio)

Smaller images may appear blurry or pixelated. Bigger images may be cropped.

No matter which image size you use, try to keep the main focus of the image near the center, with ample space above, below, and to the sides of that focus, whenever possible.

We recommend using an image that does not contain any text to avoid an overlap between your visuals and the slide description.

In the poster layout, the image is darkened with a dark gradient with the following CSS characteristics:

linear-gradient(rgba(255, 255, 255, 0), rgb(24, 25, 29))

See Create a carousel →

Gallery

• 8:3 ratio (2.7)
• 800 x 300 pixels

Smaller images may appear blurry or pixelated. Bigger images may be cropped.

No matter which image size you use, try to keep the main focus of the image near the center, with ample space above, below, and to the sides of that focus, whenever possible.

See Create a gallery →

Certificates

• 10:7 ratio (1.4)
• 1500x1050 pixels
• No text

See Add a certificate to a path →

Cover picture (platform or group)

• 3:1 ratio
• 1440x480 pixels
• Should support ratios 3.0 and 3.6 (centered)
• No text

See Edit the general settings of a group → or Edit the platform’s general settings →

Logo (platform or group)

• 1:1 ratio (square)
• 80x80 pixels
• Suggest left and right margins of 22 pixels, to avoid having it trimmed by the curve of the vertices

See Edit the general settings of a group → or Edit the platform’s general settings →

Favicon (platform or group)

• 1:1 ratio (square)
• 32x32 pixels (but we accept any size between 16x16 and 500x500 pixels)

See Edit the general settings of a group → or Edit the platform’s general settings →

Personal profile picture

• 1:1 ratio (square)
• 80x80 pixels (circle)

Personal banner

• 3:1 ratio
• 980x326 pixels