Image assets
Your site uses images in two ways: branding that represents your whole site or an event (your logo, banners, and site icon), and images on individual records such as booking types, add-ons, merch products, and calendar entries. This page explains where each appears, what format to use, and how to size it. You upload and manage the files themselves in Files.
Before you upload
Section titled “Before you upload”Two rules apply to every image:
- Optimise it first. EventDrake serves your image exactly as you upload it; it does not shrink or compress it for you. A large photo straight from a design tool is sent at full size to every visitor, which slows your pages. Export at a sensible web size and run it through an image optimiser before uploading.
- Upload the right format. EventDrake does not convert between formats. If a spot needs a standard image and you upload an SVG, it will silently fail to show in the places that cannot read SVG. See below for which format each use needs.
Choosing a format
Section titled “Choosing a format”- SVG is best wherever the image is only ever shown in a web browser, such as your logo, vector banners, and icons. It stays sharp on every screen and is usually smaller.
- PNG or JPG are needed wherever the image is shown outside a normal web page. Use PNG for logos and graphics with flat colour or transparency, and JPG for photos.
Three uses always need PNG or JPG, never SVG:
| Use | Why |
|---|---|
| Email banner | Email apps, Gmail in particular, do not reliably show SVG. |
| Site icon (favicon) | The browser tab icon expects a standard image. |
| Social and link previews | The preview image shown when your site is shared on social media does not support SVG. |
Site and event branding
Section titled “Site and event branding”These images represent your site as a whole. You set them in Settings, where each can be set once for your whole site and overridden for an individual eventA single ticketed offering that people register for: one camp, one party, one conference, or one run of a show. Your site usually runs many events, and each is normally used once and then archived rather than reused (an annual festival creates a new event each year). Each event has its own page on your site, for example example.com/summercamp. When your site has only one active event, EventDrake automatically presents it as the site's main page and keeps the multi-event navigation out of the way..
| Image | Format | Suggested size | Where it appears |
|---|---|---|---|
| Site icon (favicon) | PNG | 64 by 64, square | The small icon in the browser tab. |
| Logo | SVG preferred (PNG fine) | Any shape; enough detail for about 100 to 200 pixels tall | Your site header, and the sign-in and account panels. |
| Horizontal banner | PNG or JPG | About 1600 by 600 (roughly 2.7 to 1) | The header of every email you send, and a wide strip on the sign-in panel. |
| Vertical banner | SVG, or PNG/JPG | Tall; shown about 240 pixels wide | The side panel on the sign-in screen on larger displays. |
| Preview thumbnail | PNG or JPG | About 1200 by 630 | The preview when your site is shared on social media, and event card artwork. |
- There is one logo for both light and dark backgrounds. If yours needs to read on both, give it its own background or padding.
- The suggested sizes are well-chosen targets, not hard limits. Staying close to them gives the best result.
Images on records
Section titled “Images on records”Booking types, add-ons, merch products, and calendar entries each carry their own image, uploaded on that record.
Booking types, add-ons, and merch
Section titled “Booking types, add-ons, and merch”For these, you do not crop the image yourself. How each image is framed, its shape (proportions) and fit (how it fills that shape), is set once for the event so every card looks consistent. Merch goes a step further: an individual merch group can use its own shape and fit.
Shape sets the proportions of the image box:
| Shape | Proportions |
|---|---|
| Square | 1 to 1 |
| Landscape | 16 to 9 |
| Portrait | 3 to 4 |
| Strip | 3 to 1 |
Fit sets how the image fills that shape:
| Fit | What it does |
|---|---|
| Cover | Fills the box and centre-crops the overflow. This is the default. |
| Contain | Shows the whole image, leaving empty space around it. |
| Fill | Stretches the image to fill, which distorts it. Avoid unless you mean to. |
| None | Shows the image at its own size, with no scaling. |
| Scale down | Shows the image at its own size, or smaller if needed to fit. |
Because the default fit centre-crops, prepare images with the subject near the centre and a little space at the edges. Upload at roughly twice the size the image is shown at, so cards stay sharp on high-resolution screens, then optimise. Rough source sizes:
| Shape | Target size |
|---|---|
| Square | 1200 by 1200 |
| Landscape | 1600 by 900 |
| Portrait | 1200 by 1600 |
| Strip | 1800 by 600 |
Calendar entries
Section titled “Calendar entries”A calendar entry can carry its own thumbnail and a horizontal or vertical banner, all optional. Size them like the matching site banners above.
Pre-upload checklist
Section titled “Pre-upload checklist”- Optimised for the web, not a multi-megabyte export.
- The right format for the use: SVG for browser-only branding; PNG or JPG for the email banner, site icon, and social preview.
- The subject near the centre, so centre-cropping does not clip anything important.
- Sized at roughly twice the display size.
- For record images, the event’s shape in mind (or a crop-tolerant image if you are not sure).
- Decided whether it is a site-wide default or an event override.