This article will guide you through the specifications and best practices for utilising image assets on our Event Listing and Checkout layouts.
Background Image
This image fills the page's background. Background images should have a low contrast so the overlaying text is readable. Busy photos, portraits, and pictures with text or logos are not acceptable as background images.
- Poster Layout – Covers the background underneath the boxed-in content
- Banner Layout – Applied to the banner area, underneath the event details and the Get Tickets button
- Banner Layout (in Fullscreen Mode) – Covers the entire background of the page.
|
Hero (Fullscreen) |
Banner (Fullscreen) | Banner | Poster | |
|---|---|---|---|---|
| Image Format |
JPG, PNG |
JPG, PNG | JPG, PNG | JPG, PNG |
| Underneath Text | No | Yes, text content will appear on top of this image. | Yes, text content will appear on top of this image. | No |
| Dimensions | Dimensions can be any size since it will cover the hero area of the page. Landscape oriented images work best. It’s recommended to keep these images between 1024px and 2048px on either side. |
Dimensions can be any size since it will cover the page. Landscape oriented images work best. It’s recommended to keep these images between 1024px and 2048px on either side. |
Dimensions can be any size since it will cover the banner area. Landscape oriented images work best. It’s recommended to keep these images between 1024px and 2048px on either side. |
Dimensions can be any size since it will cover the page. Landscape oriented images work best. It’s recommended to keep these images between 1024px and 2048px on either side. |
| Display Size | Covers width and height |
Covers width and height | Covers width and height | Covers width and height |
| Dimmable | Yes | Yes | Yes | Yes |
Logo / Header Image
The Logo / Header Image is a multi-use image that sits above the event details.
- Hero Layout – Fills the header area above the event details.
- Poster Layout – Fills the header area above the event details.
- Banner Layout – Sits on top of the event details.
| Hero | Banner / Fullscreen | Poster | |
| Image Format | JPG, PNG |
JPG, PNG | JPG, PNG |
| Underneath Text | No | No | No |
| Dimensions | Up to 2256px x 960px |
Up to 2200px wide |
Up to 1260px wide |
| Display Size | Image resizes to a maximum display width of 1128px and a maximum height of 480px, and will size down proportionally on smaller screens. |
Image resizes to a maximum display width of 1110px wide and will size down proportionally on smaller screens. |
Image resizes to a maximum display width of 630px wide and will size down proportionally on smaller screens. |
| Dimmable | No | No | No |
| Notes | Displayed as content |
Displayed as content | Displayed as content |
Checkout Header Image
Applies to All Layout Types & Embedded Listings
The Checkout Header Image appears as a header in the checkout process. Provide this image to further personalise the checkout process to the event beyond the basic set of colours. This image is especially useful for branding an embedded checkout process.
| All Layouts | |
| Image Format | JPG, PNG |
| Underneath Text | No |
| Dimensions | 1280px x 550px |
| Display Size | Image covers area with maximum height of 275px, and will size down proportionally on smaller screens. |
| Dimmable | No |
| Notes | While there is no set dimension for height, it is best practice to keep this image small in height since it is a lead-in to fields in the checkout process. |
Pixel Dimensions vs Resolution
All image dimensions supplied are measured in CSS pixels (px), not device pixels. So, an image set to 1024px on a device @2x would ideally have a dimension of 2048px to display at its optimum quality. If in doubt about the dimensions of an image, double, or even triple the dimensions for the best quality.
Image Creation Best Practices
- For photographic images with minimum to excessive colour detail, always use JPG
- For images with flat colours use PNG
- For images with transparency use PNG
- For larger background images, use higher compression for smaller file size
- Larger, more detailed images may be slower to load for some customers