Dapple submission forms render images in three places — background, embedded inline, and header. Each has a recommended ratio and size. Get them right and forms load fast and look crisp on every device. Get them wrong and images stretch, crop, or slow your form down.
What are the recommended dimensions?
Image type | Recommended ratio | Example size |
Background image (form / Listings page) | 2:1 | 2000px x 1000px |
Embedded image (inline in the form) | 16:9 | 640px x 360px |
Header image (banner at the top of the form) | 3:1 | 1800px x 600px |
Background images
Use 2:1 ratio for full-form or Listings page backgrounds. This fits standard desktop screens, gives enough horizontal space without awkward cropping, and scales predictably across devices. When uploading, choose how it should fill the space:
Cover — image fills the whole form area; edges may crop.
Contain — image stays at its fixed size; the form scrolls as normal over it.
Embedded images
Use 16:9 ratio (recommended 640x360px) for images inside the form — between fields, in an intro section, or alongside instructions. This size renders cleanly in most form widths and stays manageable on mobile.
Header images
Use 3:1 ratio (recommended 1800x600px) for banner-style headers at the top of the form. This keeps the header visible without dominating vertical space and scales well on every device. Full setup: How to Add a Header Image to a Submission Form
Keep file sizes small
Large image files slow down form load times, and slow load times reduce submission rates. Compress every image before uploading:
Compress with a tool like TinyPNG, Squoosh, or your image editor's export settings.
Aim for under 500 KB per image where you can, and under 1 MB max.
Use JPG for photos. Use PNG only when you need transparency (logos, icons).
Avoid uploading PDFs or oversized PNGs straight from a phone — they're usually 4–10x larger than needed.
How do I resize an image?
Tools like Canva, Figma, Photoshop, or any phone editor make resizing simple. In Canva:
Create a custom canvas at the exact pixel dimensions you need.
Drag your image in and reposition.
Download a compressed version for web use.
Why these dimensions are guidelines, not rules
Different browsers, screen sizes, monitor resolutions, and mobile devices all render images slightly differently. The dimensions above are strong recommendations, not rigid constraints. Always preview your form after adding images — desktop, tablet, and mobile — and adjust if needed.
Where to go next