How long the audience stays on your site might depend on your hero sections. Thus, the content strategy around it must not only consider things like relevance or load speed but also content quality!
Illustrations used as section backgrounds must meet the dimension of the section wrapper, at a bare minimum, to prevent the resolution from being washed out or pixelated and to ensure that the preferred areas of the content are captured within the frame or section.
To optimize the quality of your background image/video, consider the following points for the dimensions below:
Width
The width of a section may be affected by the following:
Browser window size
When the browser window is maximized, the section width inherits that of the display panel or monitor width; in other words, when the browser window size is changed or is less than maximum, the section width follows that of the browser.
Display panel or monitor
Since the width of the browser window, just like the section width, is confined within the size of the display panel or monitor that renders the page, site designers or creators may want to consider the prevailing desktop resolution on the market. The top screen resolution width is 1366px, followed by 1920 px.
We recommend that your hero image or video have a width between 2400px and 2560px.
Height
Since most websites stack sections vertically, page viewers scroll up and down to browse. While some sections in the platform allow site designers/creators to set specific heights like HTML package, PDF, or Presentation, other section types derive their height based on the type of content they carry.
Grid section height is affected by the number of rows in the grid and tile height, while text section height is affected by the number of lines or paragraphs.
The height of the hero illustrations should be based on the actual section wrapper height.
Using web inspector to identify the correct dimensions for hero illustrations:
These variations in browser window size and display monitor resolution on the market may present a challenge in identifying the dimensions of your hero illustration that will best fit the section.
Fortunately, you can use the web inspection tool found in most browsers today to get the aspect ratio of the section wrapper. Aspect ratio is the relationship between the width and height of an element in your site.
You can use the aspect ratio determined by the web inspector to the given or preferred content width, which is recommended to be between 2400 px and 2560 px.
Simply multiply the width of the illustration by the length from the aspect ratio, then divide the product by the width from the aspect ratio to get the illustration height.
For example, if the illustration width is set at 2560 px, and the aspect ratio of the section wrapper is 664 by 425, then you multiply 2560 px by 425 and divide the product by 664. The height of the illustration is 1638.6 px.
These dimensions from the example above are the same values you can use when producing the asset for your section background. You can set them as values while exporting your hero video or set them as canvass or cropping values for hero images.
However, when exporting your asset from a third-party application, you can set the quality between 65% and 75%, and not 100%, to reduce the file size. An asset with a huge file size will take longer to load on your page.