In the layout of forms and onboardings, you can display an image next to or above the content, for example on the left, right, or at the top. In this article, you will learn which dimensions work best and what to keep in mind.
How images are displayed
The image automatically fills the available space of the panel. How much space that is depends on the user's screen: the layout looks different on a wide monitor than on a laptop or tablet. To fill the space completely, the image is cropped where needed. There is therefore no single size that gives exactly the same result on every screen.
Recommended dimensions
As a guideline, we recommend:
Image at the top (horizontal): 1920 × 1080 pixels
Image on the left or right (vertical): 1080 × 1920 pixels
Use a resolution of at least this size, so the image stays sharp on large screens as well.
No text inside the image
Because the image adapts to the screen and may be cropped, we cannot guarantee that all parts of the image will always be visible. Therefore, do not place text or other important information inside the image itself. Use the text fields of the form or onboarding for this instead.
Tips for the best result
Choose an image with the subject in the center, so cropping at the edges is not a problem
Use atmospheric or full-bleed photos rather than images with details near the edges
Check the display on different screen sizes after setting it up
Frequently asked question
Why is my image being cropped?
The image automatically fills the entire space of the panel. Depending on the user's screen size, the image is cropped accordingly. This is normal behavior and cannot be adjusted.