“What image size should I use for my form/landing page?”
This is a question we get a lot. After all, creators want to know how to make sure that their form and landing page images look good!
In general, we recommend the following image sizes:
For landscape-sized images: 1920 px width and 1080 px height
For portrait-sized images: 1080 px width and 1920 px height
For square-shaped images: 1000 px width and 1000 px height
NOTE: You can halve these widths and heights for smaller images, such as creating a square-shaped image that is 500 px in width and 500 px in height.
These image sizes will typically work for all device screens large and small. However, even if you follow these recommended image sizes, your images may not be displayed in full in your forms and landing pages.
This is because the available space for rectangular images may not have been designed for a 16:9 resolution (1920 divided by 1080 gives a 16:9 ratio).
And apart from that:
Form and landing page images will be resized to fit the available space
Kit forms and landing pages are responsive. In other words, they will automatically resize to fit in the available space on the viewer’s screen.
Here’s what we mean, using the Poplar inline form as an example. In the form, we’ve added an image of this plate of delicious hotdogs:
The above is what a viewer is likely to see if they are viewing the form from their desktop.
But watch what happens as we change the available space to something narrower, as if the viewer is looking at the form on their mobile phone:
You’ll see that as the width of the Poplar form narrows, this changes how the form image is displayed. That’s because in the “desktop” view of the form, only the plate of hotdogs in the image is visible.
But as the form gets narrower (such as if it’s being viewed on mobile), the condiments around the plate of hotdogs—that had previously been cropped out of the image—start to appear.
As a result, for any given image, its exact look in your forms and landing pages may vary depending on the size of the viewer’s screen.
Best practices for creating images for forms and landing pages
With the above in mind, we can’t prescribe image sizes that will help your image look exactly the same for all viewers, no matter their screen size.
However, we have some tips for making your images look good nevertheless:
1. Place the image subject in the center of the image
When your images are too big for the available space, they will be resized and/or cropped with the aim of keeping what’s in their very center as the focus.
For example, in the above hotdogs image, you’ll notice that the plate of hotdogs—which was in the center of the image—is always visible, no matter how the size of the form changes.
However, the condiments around the hotdogs tended to get cropped out.
Therefore, to ensure that your forms and landing pages display the essence of your image, try to have your image subject in the center of the image as much as possible.
2. Avoid using text in your images
If you use images with text in them, there is a high risk of the text getting partially or fully cropped as the form or landing page changes in size.
Like so:
To get around this, you can try to keep your text in the center of the image as described in tip #1 above. However, this doesn’t guarantee that your text will always appear in the frame.
The better way of adding text to your forms or landing pages is to directly type it into your form or landing page.
If a certain form or landing page template isn’t able to accommodate your preferred text placement, using a different template might help.
3. Test the look of your forms and landing pages
We can’t stress this enough!
Test how your forms and landing pages look like on as many screen sizes as possible, and at the very least from your own desktop and mobile phone.
This will help you pick up and fix obvious image issues before you roll out your forms and landing pages to the world.
Key takeaways
Images in forms and landing pages will be resized and cropped to fit the available space on the viewer’s screen.
Keep your image subject in the center of the image as far as possible, and avoid using text in your images.
Test how your images look on different screen sizes before making your forms and landing pages live.