New web

Web pattern library, style and technical reference

Images

Recommended Sizes

All images

All images must be 72 DPI Each image should be no more than 50KB. The lower the better. No more than 750-800KB (of images) per page. Use SmushIt to compress the images and then upload into Matrix - SmushIt ensures images are optimised for web, which reduces page load time. You can also use Photoshop and 'save for web' to reduce image sizes.

Achievers / Highlights

Achiever widgets = 278 x 203 pixels Achiever images (header) = 750 x 290 pixels Achiever images (text) = 400 x 266 pixels Achiever YouTube videos = 550 x 290 pixels

Banner images

Banner full image = 1142 x 151 pixels Banner half text image = 617 x 151 pixels

Feature widget

The recommended size for feature widget images is 1500px square, when the widget is displayed an autogenerated 600px 'Sidebar thumb' variety is used.

Orientation	Width	Height
Square	Minimum 600px, recommended 1500px	Minimum 600px, recommended 1500px

Refer to the details about the sidbear thumb varietyy for additional information on how the image varieties are configured.

Example feature widget image (scaled)

Gallery

Image galleries are controlled by paint layouts, these paint layouts make use of the Gallery Slide Variant and Gallery Thumb Variant, which are automatically generated for each uploaded image. For best results, images uploaded for galleries should follow these minimum requirements, larger images will be automatically resized.

Orientation	Width	Height
Portrait	No minimum, 600px recommended	Minimum 800px
Landscape	Minimum 800px	No minimum, 600px recommended

Refer to the details about the gallery slide and thumb varieties for additional information on how the image varieties are configured.

Example landscape gallery images (scaled)

Homepage carousel (background)

Recommended size = 1500 x 1125 pixels File size should be no more than 300KB

Homepage feature widget

Image size = 600 x 350 pixels

In-content images

Example size = 400 x 320 or 320 x 400 pixels (depending on image orientation). Note: this is only an example size for images in the main content section of pages. Each image is different and each page layout of content is different. You can resize images at your discretion; as long as the dimensions and image quality meet reasonable standards.