Image Size & Quality Tips
Good images load quickly and stay readable on phones and desktops. Emma Wilson booking Strength Training should see a sharp banner, not a blurry crop.
Resolution
Use a source file large enough to stay clear in the frame Fitnez Studio shows after upload. Event and program modals let you zoom and reposition — starting too small may look soft after zoom.
Aspect Ratio and the Frame
The shape of the upload frame matters more than a fixed pixel size:
| Location | What the UI shows | Practical tip |
|---|---|---|
| Event banner | Wide rectangle with 3×3 grid | Use a landscape photo; keep the subject near the centre |
| Program image | Frame after upload (empty modal is a tall drop zone) | Prefer landscape or square sources; check preview after upload |
| Badge icon | Small square thumbnail | Simple artwork reads better at small size |
| Email logo | Compact logo slot in HEADER PREVIEW | Use a horizontal logo with clear contrast |
| Email banner | Wide strip under the coloured header | Wide gym or studio photo works well |
FITNEZ STUDIO does not display recommended ratios such as 16:9 or 1:1 on these screens. Fit the frame and HEADER PREVIEW, not a guessed pixel size.
File Size and Loading Speed
On Update Program Image, the limit is up to 5MB. Other upload areas do not state a limit.
Balance quality ↔ speed: very large files may slow email or website loading even when under any stated cap.
File Format
| Confirmed | Where |
|---|---|
| JPG, PNG, WEBP | Update Program Image empty modal |
| PNG (example) | Badge logo-black.png |
| Not listed | Event banner, email logo/banner |
Use JPG or WEBP for photos; PNG when you need sharp logos or icons with transparency — if the modal accepts them.
Cropping on Different Screens
Responsive layouts may crop edges differently on mobile and desktop. The event Update Event Banner grid shows what will be kept in the frame; dimmed areas sit outside the crop.
Keep faces, logos, and text away from edges where possible.
Mobile vs Desktop Checklist
- Select a high-quality source image.
- Check its general shape (landscape for banners, simple square for badges).
- Upload and use zoom/reposition if offered.
- Preview on the admin screen (HEADER PREVIEW, event LIVE PREVIEW, badge thumbnail).
- Open the public website or a test email when you need to verify member-facing layout.
- Adjust with Reset, Choose another, or Replace if the crop is wrong.
- Save.
Best Practices Checklist
Choose clear images
Avoid blurry or heavily compressed photos.
Use the right crop
Keep the main subject inside the grid or frame.
Keep the subject visible
For Daniel Murphy teaching a class, centre the trainer or activity in the crop.
Avoid text-heavy images
Text in photos may become unreadable when cropped on small screens.
Use consistent imagery
Match tone and style across programs, events, and emails where you control artwork.
Check mobile
Verify important banners on a phone layout when you can.
Optimise large files
Stay within stated limits (5MB on program upload) and avoid unnecessarily huge originals.
Accessibility (Alt Text)
No captured upload form includes an alt text or accessibility description field for program, event, badge, or email images. This help centre does not document an alt-text workflow until the UI shows one.
Example of good alt text if a field is added later:
Trainer demonstrating kettlebell exercises
Avoid useless labels such as Image1.jpg.