Overview
This section is the current source of truth for preparing and uploading website imagery. The recommendations below are taken from the approved working guideline and should be followed unless a later revision explicitly replaces them.
Important: image dimensions are recommendations, not upload restrictions.
The image sizes listed in this guide are recommended targets to create a consistent visual standard across the website and help images render as clearly as possible. The website does not require every image to meet these exact pixel dimensions.
If a collaborator, artist, brand or external partner can only provide a lower-resolution image, it can still be uploaded and used as long as the crop and aspect ratio are appropriate for that field. A lower-resolution image may appear softer on larger screens, but the CMS will still accept it.
Where possible, use the specified upload dimensions. When that is not possible, prioritise the correct aspect ratio and the best-quality source image available.
Default upload rule: Upload one high-resolution, web-optimised master image in the Small Screens field. Use Medium Screens or Large Screens only when a different crop or composition is required.
Core image-preparation rules
| Preferred format | JPEG for most website imagery |
| Use PNG when | Transparency is required, such as for logos |
| Resolution | Use the specifications provided for each image or component in this guideline. |
| Flexible image blocks | Around 2K resolution is recommended where possible. Use standard aspect ratios and the best-quality source image available. |
| Maximum file size | 20 MB per file |
| Optimisation | Export for web without visible loss of quality |
Do not upscale low-resolution source material solely to meet a recommended size. Upscaling does not restore detail and can make pixelation more visible.
The 20 MB limit is only the server maximum, not a recommended working file size. Keep website imagery below 1–2 MB wherever possible; files in KB are ideal if quality remains clear at the required dimensions.
Suggested export workflow
- Open the original high-resolution image in an image editor.
- Crop and resize it to the recommended upload dimensions.
- Export it as a web-optimised JPEG or PNG, as specified.
- Check the crop, sharpness and file size before upload.
File naming
- Keep filenames short.
- Use letters, numbers, hyphens or underscores.
- Do not use special characters such as
#$^&@. - Avoid long filenames; website security controls may block or flag them.
- Add a number where several images belong to the same section.
- Examples:
home-hero-01.jpg,about-img-02.jpg,speaker-03.png.
Adaptive Image Uploads
The same Small Screens, Medium Screens and Large Screens fields appear across image entries in Strapi. The website follows a mobile-first content structure, so Small Screens acts as the default upload field.
Standard upload
- Upload the highest-resolution, web-optimised master image under Small Screens.
- Follow the dimensions specified for the relevant component.
- Leave Medium Screens and Large Screens empty when the default crop works.
- Do not upload the same image to all three fields.
When to use an override
Use a Medium Screens or Large Screens override only when a different crop or aspect ratio is needed - for example, when a face, logo, text element or focal point is lost in the automatic crop.
| Archives carousel | Desktop uses a wide landscape image; mobile uses a square image. Upload a separate crop when the automatic square crop is unsatisfactory. |
| Session page banner image | Small screens may use a different crop from medium and large screens. Supply separately composed versions when needed. |
Before publishing: Preview the image at the relevant breakpoints. Add an override only if the default crop does not preserve the intended composition.