Images can elevate a form from “functional” to “beautiful.” But if they’re the wrong size? Suddenly things look stretched, cropped, or painfully slow to load.
Here’s a practical guide to help you choose the right dimensions — and keep everything looking sharp and professional.
Background Images (Submission Forms & Listings Pages)
When adding a background image to a submission form or Listings Page:
Recommended ratio: 2:1
Example size: 2000px × 1000px
Why?
This ratio fits well across standard desktop screens
It gives enough horizontal space without awkward cropping
It scales more predictably across different devices
When selecting the image there several options on how to display the image. Cover will cover the whole form whereas “Contain” will fix the image in place.
This ensures:
The image stays fixed to its defined size
The form scrolls as normal
The image doesn’t stretch or distort
It keeps things tidy and predictable — always a good thing.
Keep file sizes small
Large image files slow down load times — and slow load times reduce conversions. Aim to:
Compress your image before uploading
Keep file sizes as small as possible without losing visible quality
Use JPG for photos and PNG only when transparency is needed
Fast forms = happy applicants.
Images Embedded Inside Forms
If you're inserting an image directly into the form (for example, between fields or in an introduction section):
Recommended size:
640px × 360px (16:9 ratio)
This size:
Works cleanly within most form widths
Prevents oversized images from overwhelming the layout
Keeps mobile scaling manageable
🏷 Header Images (Top of Forms)
For the main header image that appears at the top of a form:
Recommended ratio: 3:1
Example size: 1800px × 600px
Why this works:
It creates a clean banner-style layout
It avoids taking up too much vertical space
It keeps your branding visible without overwhelming the page
🎨 Resizing Made Easy
If your image doesn’t match these dimensions, tools like Canva make resizing simple.
In Canva, you can:
Create a custom canvas with the exact pixel dimensions
Drag your image in and reposition as needed
Download a compressed version for web use
No design degree required.
⚠ Important: These Are Guidelines
Different:
Browsers
Screen sizes
Monitor resolutions
Mobile devices
…will all affect how images appear slightly. These dimensions are strong recommendations, not rigid rules. The golden rule? Always test your form after adding images.
Preview on:
Desktop
Tablet
Mobile
Make adjustments if needed.
Quick Reference
Image Type | Recommended Ratio | Example Size |
Background Image | 2:1 | 2000px × 1000px |
Embedded Image | 16:9 | 640px × 360px |
Header Image | 3:1 | 1800px × 600px |
Good imagery sets the tone. The right dimensions make sure it loads quickly, looks polished, and doesn’t distract from what really matters — getting submissions in.