Search

Image sizes and ratios

  • Updated

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).

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

  • Layout 1.svg Poster layout: 1600x400 pixels (4:1 ratio)
  • Layout 2.svg 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 →

Group cover picture

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

See Edit the general settings of a group →

Group logo

  • 1:1 ratio
  • 250x250 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 →

Group favicon

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

See Edit the general settings of a group →

Personal profile picture

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

Personal banner

  • 3:1 ratio
  • 980x326 pixels
Check out our blog for more L&D resources.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request