Search

Image sizes and ratios

  • Updated

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

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
  • JPEG, PNG, or GIF

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
  • JPEG, PNG, or GIF

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 →

Cover images in the mobile app

The mobile app crops course and path cover images to fill each view, keeping the center. Most views are narrower than 16:9: keep the main subject in the middle 75% of the image width.

View Shape Text over the image
Catalog and My Work carousels 3:2 Author and title, over the lower part
Lists (My Work, search results, path steps) 4:3 Badges, and option labels on path steps
Newsfeed 4:3 None
Course homepage 16:9 on iOS, fixed height on Android None
Path homepage Full width, height set by the text Author, title, and session, over a dark gradient

On iOS, a portrait or square course cover appears in full on the course homepage, over a blurred copy of itself.

  • Layout 1.svg Poster layout: 1600x400 pixels (4:1 ratio)
  • Layout 2.svg Postcard layout: 800x400 pixels (2:1 ratio)
  • JPEG, PNG, or GIF

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 →

  • 8:3 ratio (2.7)
  • 800 x 300 pixels
  • JPEG, PNG, or GIF

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
  • JPEG, PNG, or GIF

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
  • JPEG, PNG, or GIF

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
  • JPEG, PNG, or GIF

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)
  • JPEG, PNG, GIF, or ICO

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)
  • JPEG, PNG, or GIF

Personal banner

  • 3:1 ratio
  • 980x326 pixels
  • JPEG, PNG, or GIF

Reactions

  • 1:1 ratio (square)
  • At least 64x64 pixels
  • SVG, PNG, or GIF

A non-square image is distorted on the web and cropped in the mobile app.

Animated GIFs play unchanged and loop according to the file’s own settings. The platform sets no limit on dimensions, number of frames, or duration.

See Customize reaction visuals →

Check out our blog for more L&D resources.

Was this article helpful?

6 out of 10 found this helpful


Have more questions? Submit a request