(Queue the drumroll for this million dollar question) – there is no “perfect size” for images when uploading them as the background of blocks!
We strongly recommend that images are no larger than 2,000 pixels wide with no more than 72 dots per inch (dpi). This keeps your Splash page loading quickly!
We also recommend that file sizes generally stay under 10MB.
Here are some tips for uploading and editing images in Splash:
- Stick to 72dpi - 300 dpi high-res images and large file sizes may slow down the page and sometimes create a blurry image - the opposite of the desired result.
- Avoid background images with text or logos in the design - With Designer Pro, you can layer dynamic elements on top of your image. This will give you more flexibility to style your blocks to be mobile responsive. Static images will look different across all screen sizes, so this helps provide a cohesive experience across devices.
- Got a flyer? If you're using a stunning flyer image with text and logos, we normally recommend using Trimble, Poster Reset, Clip Reset or any of our other flyer-style themes.
Browser Window Size and Screen Size Differences
Your event page is built to be dynamic and mobile responsive to prevent you from having to design custom images for every screen size out there. Besides, it's nearly impossible to anticipate the exact screen size someone is viewing your event page on.
Splash provides image positioning and other mobile responsive tools to help you knock this out of the park!
Background Imagery: Fill vs. Contain
A background image is not an actual element, meaning it will adhere to the sizing and proportions of the block, container, or element it is being housed inside of.
There are 2 main size options available in the Background tab when deciding how the image should display in the background:
1. Fill: images will scale larger and smaller based on the content of the container and the size of the browser window.
2. Contain: images remain true to size and will be fully displayed without being cropped in any way no matter the size of the browser window.
For imagery being used for repeatable elements, along with any other area, it's still safe to upload an image that is as large as the recommended size. Images will scale down proportionally with whatever width is set on the given element within the Width/Height tab.
The no "perfect image" rule also applies to mobile device styling – we don't have a true dimension requirement for a mobile or tablet screen since all device sizes are different! That said, do know that you can replace imagery on mobile to be different than what you are showing on desktop.
If you find that your cover block background image looks great on desktop, but crops weirdly on mobile, feel free to change it out with a more mobile friendly image!
Want to dive in for more?
Our FAQ: The 3 Types of Imagery In Splash gives you the full rundown of the ways imagery can be displayed on your event page.
Also, be sure to check out our FAQ: Why is my background image getting cut off? for a rundown on using static images and accompanying page design in Splash