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
vs 
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
