If you use high-quality assets, you will make sites that better grab the attention of your viewers, look more professional, and convey beautiful messages.

The quality of these assets can be optimized by using the right proportions and dimensions based on the following parameters:

1. Target device screen resolution

2. Section width (full bleed, and non-full bleed)

3. Number of columns (for grid sections)

Compression also impacts the render of the images on your site. Depending on the quality of the image, you might need to turn compression on or off. This feature is available within the site editor for you!

To improve the fit and/or clarity of your content into a section or tile, you would want to know the resolution of the screen where the content is being rendered on. It is especially useful when rendering content in full-bleed sections or without having to scroll vertically and/or horizontally across the screen!

1. Top desktop screen resolution is 1366p x 768p at 23%, followed by 1920p x 1080p at 20%, market shares, respectively;

2. 78.17% of the desktop screen width is between 1280px and 1920px;

3. 67.56% of the desktop screen width is between 1360px and 1920px;

4. Around 75% of the desktop screen height is less than 1000px;

5. Top mobile screen resolution is 360p x 640p at 24%, followed by 375p x 667p at 8%, market shares, respectively

More details about the screen resolution in the current worldwide market are found in this article.

These screen resolution values can be used to compute the optimal dimensions of your content so they will perfectly fit and be clear in full-width sections or in full-height of the target screens.

Some content compromises its clarity just so it will fit or be framed/cropped better in a tile or section, and sometimes it's the other way around. Knowing your target screen resolution can prevent your renders from experiencing those kinds of compromises.

Sections can be rendered full-width, as described in this article.

Standard, non-full bleed section has a maximum section width of 1200px, while full-bleed sections inherit the screen width of the device, where the content is being viewed on. The maximum non-full-bleed section width, along with those statistics shown previously, can be directly used to identify the minimum pixel dimensions of the content. More details about that can be found in the next section.

Thus, if you have a background image or video for your hero grid section with a width of 1280px, apparently, you can expect degraded display quality if this content is rendered full-width on a screen with 1920p x 1080p resolution. The content may look a bit stretched, toned down clarity, and some of its upper or lower sections might be cut off from the section, as well!

Now that we have a better idea about the dimensions for full-bleed and non-full bleed sections, we can easily identify the side or length of the tiles in a grid section depending on the number of columns in it!

Thus, for a non-full bleed grid section with 3 columns, the tile length and side by side are

While, for full bleed grid section with 3 column, for target screen resolution of 1366p x 768p, the tile length and side by side are

Knowing that the tiles have padding and margins to retain aspect ratios for images, we can get the actual size of the content without these padding and margins by using the formula below

Notice we multiply the margin factor and padding factor by 2 in order to account for both the left and right sides.

Thus, the minimum side by side dimension of an image rendered in a tile of a 3 - column grid section, non - full bleed, is 370.4p x 370.4p, as derived from,

While, the minimum side by side dimension of an image rendered in a tile of a 3 - column grid section, full bleed in 1366p x 768p display, is 421.6p x 421.6p, as derived from,

For your convenience, we have published this article with the table of tile dimensions based on the number of columns, section width, and the target screen resolution for full - bleed grid sections.

By default, images are compressed to quickly render in the site. For low bandwidth connectivity, the feature is very useful. Unfortunately, this might cause the image to look a bit grainy and/or less sharp.

To give more user control here, image compression can be enabled/disabled in the site editor. To do so, just select the image and tick/untick the option Use uncompressed image below the image selector section, as shown.

Note: If you are using a transparent PNG image, you must Use uncompressed image in order to preserve the transparency.