To create sites that grab your visitors’ attention, look more professional, and convey relevant messages, it is critical to optimize your high quality images.
Optimization relies on two main factors, each of which is affected by additional factors:
tile and section width (standard vs full-bleed)
target screen resolution
Visit our Asset Sizing Guidelines site for further explanation.
Tile and section width
To begin, you must decide on the tile and section width. Whether you choose a standard section width or full-bleed width will determine how to calculate the optimal image resolution. Once you have decided the section width, you must determine the number of columns your section uses, as well as the number of columns your tile covers.
For example, in a section with 20 columns, you will use 20 as your column number in the calculation for image resolution, explained in the section below.
Target screen resolution
Next, you must consider the target screen resolution. While there are many possible screen resolutions that will display your site, in the interests of simplicity, we recommend assuming 1920px x 1080px. In general, your site can scale down seamlessly, while scaling up in size can create visual issues such as grainy/blurry images, increased white space on the sides of the screen, or elongated elements.
More details about the screen resolutions in the current worldwide market are found in this article.
Finally, you must consider the image resolution. If the resolution is too low, the image could appear grainy or blurry. If the resolution is too high, you will affect the load speed.
A general rule of thumb, to find the optimum resolution, divide the target screen width by the number of columns in your grid, then multiply that answer by the number of columns used, with a cushion of 100 - 200 pixels, if necessary. Your tile height is determined by the aspect ratio. More details on aspect ratio are found in this article.
The optimal image width calculation and specific examples are listed below:
Screen width/section columns = base width x columns used = optimal width
For a standard section (maximum width of 1200px) and 3 columns:
For a tile that covers 1 column - 1200px/3 = 400px x 1 = 400px.
In this case, you could use 400px to 600px for the image width
For a tile that covers 2 columns - 1200px/3 = 400px x 2 = 800px.
In this case, you could use 800px to 1000px for image width
For a full bleed grid section, assuming a screen size of 1920px x 1080px (most popular size) and 3 columns:
For a tile that covers 1 column - 1920px/3 = 640px x 1 = 640px.
In this case, you could use 640px to 840px for the image width
For a tile that covers 2 columns - 1920px/3 = 640px x 2 = 1280px.
In this case, you could use 1280px to 1480px for the image width
For a full bleed section background image, such as a hero, 1920px x 1080px is generally the best resolution
For exact tile dimensions based on various screen dimensions, visit this article.
Images with a larger resolution than necessary have a very sharp appearance, but could load slowly based on the internet speed of your site visitors.
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 or blurry.
Using an uncompressed image gives a sharper appearance, but can sacrifice load speed. It is generally best practice to use the optimal image size calculations explained above to balance visual appeal and fast load times.
In those instances where uncompressed images are desired, 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.