Submit a ticket My Tickets

Imagery & Recommended Dimensions

This section outlines the use of imagery in the context of a full-width responsive layout and provides recommendations around image size and quality.

Image Size

Image size can refer to two things and it is important to understand the difference and the correlation. It can also be the cause of much confusion.

Dimensions: This is the width and height of the image.  E.g. 1000px wide x 600px tall.

File Size: This is the size of the file. E.g. 400kb.

Image Formats

  • Use JPGs for photos
  • Use PNGs for graphics or other images that require transparency, such as logos


Block Background Images

This image fills the width of the browser and appears in the background of the block (optional). The height of this image is dependent on the height set in the block, but is also responsive to the size of the screen.

A block background image can be set on the search, quick links and carousel blocks.

Recommended size

Min Dimensions: 1920 x 720px

Max File Size: 200kb

While the above are general recommended sizes, there is an additional recommendation of creating the image with the same height set as the block height, plus 100px on the top and the bottom so that the content is centred. blocks will mostly likely show all the image on smaller screens, where as on larger screens/monitors, this will zoom in because the image is trying to fill the extra space.

Background images can also be set on rich text blocks, but you can't determine the height and therefore what is shown is based on the amount/size of content in the block itself.

Masthead Background Image

This image fills the width of the browser and appears in the background of the masthead (optional as most clients have a solid background colour). This can be set on the homepage only, and/or site wide.

Recommended size

Min Dimensions: 1920 x 1200px

Max File Size: 400kb

In the homepage example below the image is taller than the masthead itself as the search block below has its background colour set to transparent. This allows for the background image of the masthead to extend into the search block, therefore the image should be abstract enough for the crop to make sense. See the example of homepage vs DAM page below




Quick Link Background Image

This is the image for the individual quick links (optional). The image size will depend on how the quick link is configured, so ideally if it's taking up the whole background, it'll need to have the same dimensions as the quick link row settings via the options tab. 

Below are some example of different quick link configurations and the recommended image size.

Full Image Quick Link
Recommended size
Dimensions: 300 x 400px
Max File Size: 50kb

Half Image Quick Link
Recommended size
Dimensions: 300 x 200px
Max File Size: 50kb

Square Quick Link
Recommended size
Dimensions: 200 x 200px
Max File Size: 50kb

Homepage Example (all blocks)
Below is an example of a Brandworkz homepage with a full-width responsive layout containing the following three components:

  • Masthead - Includes a logo, user menu and featured navigation
  • Search block - Includes a search bar with some supporting body content
  • Carousel block - Includes three slides, with the current one being “Our Brand”
  • Quick Links block - Includes one row with three quick links

Example Sizes

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.