Background Image Aspect Ratio and Dimensions

When editing the Public or Private Tab of a Department Template there is a setting under Advanced Options called Background Image. Uploading an image file sets it behind other items on the Department Template. The suggested file dimensions [1920 x 860 px] are not an absolute requirement while the maximum file size [1MB] is. This article discusses the relationship between aspect ratio, file dimensions and the outcome for Background Image.

Prior to showcasing different outcomes with different types of image, the following definitions explain which elements of an image we will be interacting with:

• Aspect Ratio: The aspect ratio of an image or a screen is the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in `width:height`. For example, an image that is 1920 pixels wide and 1080 pixels high has an aspect ratio of `16:9`. The aspect ratio only tells us the shape of the image or screen, not its actual size.
• File Dimensions: Unlike aspect ratios, file dimensions (also known as image size) determine an image’s actual width and height in pixels. For example, an image that is 1920 pixels wide and 1080 pixels high has file dimensions of `1920x1080`. These dimensions tell us the actual size of the image.

While aspect ratio refers to the relationship between the width and height of an image or screen, file dimensions refer to the actual size of an image in terms of its width and height. Both are important for understanding the size and layout of an image or screen, but they provide different types of information.

Testing Dashboard Background Images

When preparing a file as a Background Image it is important to recall that the suggested file dimensions aren't a strict requirement. The maximum file size of 1MB is a strict requirement, images over this file size will encounter an error instead of uploading correctly.

On the SkillSync side there is also the Maximum Screen Width setting that changes how tiles are presented over-top of the Background Image.

In this example, a 1920x860 image has been uploaded as the background image. This is the image:

Once the image has been uploaded with the Fill/Responsive setting for Maximum Screen Width on the Private Dashboard we observe how the image now appears:

Without changing the image, only the Maximum Screen Width to Standard (1280px) the result changes like this:

The text of the image remains cut-off however. To address this concern you can change the Background Image Alignment. Initially the alignment of the image was from the top:

Intending to keep all the text visible, I align the image from the right:

The end result is:

As a test, I recreated the same image but with smaller file dimensions. The new 1280x720 px image is:

When this image is uploaded as the Background Image and aligned to the right, it looks like this:

The the new image is smaller as it relates to file dimensions and accordingly more of the image can be displayed in a smaller area. It is important to consider that the image will scale, based on alignment. As an example of this:

If you change the size of the browser window, the Background Image will change as well. This is true if the browser window becomes smaller or larger.

Testing Welcome Tile Background Images

When creating a Welcome Tile for a Department Template one of the options is to select a Background Image. This setting recommends file dimensions of 768 x 360 px and a max file size of 300 KB.

As before, it is possible to upload files of different dimensions while the file size (300KB) is an absolute maximum. As an example to showcase the difference between images of different dimensions, we will upload two different images with different dimensions to capture the difference. First, we will upload this 768 x 360 px image:

When uploading an image for the Welcome Tile Background you will be able to select from three options underneath Display. Each changes how the image will be showcased to the User. To start, we will use the Fill option.

When uploading as the Background Image for the Welcome Tile on a 1920x1080 monitor, the image displays as follows:

If we change the Display option to be Scale instead of Fill, the image appears like this:

Depending on your image, and how you want it to display, you may want to modify the file dimensions accordingly. Here is the same image with a new file dimension of 1920 x 360 px.

With the Display option set to Scale the newly uploaded image looks like this:

This test illustrates how customizable the Welcome Tile Background Image may be so long as the maximum file size is respected. It is possible to change the file dimensions to achieve different outcomes or highlights different elements of a image.

Best Practices

When dealing with images, there are a variety of factors to consider so as to confirm the intended outcome for you and your organization. This section of the article discusses configurations or considerations that contribute to an ideal outcome:

Consider Your Audience

There are so many ways to create images that it can quickly become overwhelming to determine what is the best method. To feel a degree of certainty in your choice, consider the Users who will be interacting with your system. Are they going to be accessing via a computer with a standard monitor? Will they largely be accessing via a tablet, or phone? Do you have a high volume of super-wide monitor Users?

Consider that as of April 2024 the most popular monitor size for desktop computers is still 1920x1080.

As a rule of thumb, if you're expecting Users across a wide variety of displays it may be challenging to make sure that text is always correctly displayed. Accordingly, it may be worthwhile to create designs with repeating elements, simple background or pleasant illustrations that don't convey specific sets of information. This way while the image will scale differently across different displays the effective experience is similar for everyone.

Test and Re-Test

Regardless of if you are adding an image to an SkillSync LMS Portal or an unrelated website. Often getting images to look right, and continue to look right for different Users across different displays and setups is an involved process. Testing may involve:

• Changing the image dimensions of your file.
• Changing the Alignment or Display configuration.
• Changing the type of image you're using. If you don't like how a JPEG looks, try a PNG.
• Change browser, or device. Sometimes seeing your image on a different screen lets you get a sense of whether or not the current configuration will work.