Images
Before you start
This article covers images in Studio campaigns. Check out our other article on using images in legacy campaign types.
You can add images to several parts of your campaign through built-in features or image blocks.
Acceptable file types: JPG, PNG, GIF, or WebP. The file size limit is 2MB, but to improve page load speeds, we recommend images that are less than 500KB.
We recommend the following dimensions for most images: 1500 - 2500px wide. These dimensions ensure images won’t appear blurry on larger screens. However, we cannot offer exact dimensions since the images will dynamically resize to fit different screens.
Tip: Before publishing, we recommend previewing the campaign for different device types to make sure your page looks best for donors on mobile devices.
Logos
You can add a header logo when creating a Studio page or select the Header directly in your page designer and select the Configure tab to adjust it.
To upload a logo to your page’s footer, select the Footer directly in the page designer and select the Configure tab.
We recommend that logo images be 180px high and that they be PNG or WebP files since both file types support transparent backgrounds.
Background or hero images
You can add background or hero images to a section or an entire layout that spans the width of the page. Simply select the section you want to edit to open its options.
To add an image that covers all sections in a layout, select the space in the left margin to open the layout's image options.
For backgrounds, we recommend landscapes, mood colors, or images with people not directly engaging with the camera. You can overlay text, elements, or widgets on these images without losing the image’s appeal.
Hero images should be compelling and help convey the purpose of your campaign. You don't have to use your images. If you need inspiration, we recommend free repositories of stock images like Unsplash, Pexels, or Pixaby.
Tip: Use JPG or WebP images since these tend to be smaller files than PNG images. We also recommend that the aspect ratio is 16:9 for the best resolution.
Editing options
After adding a background image to a section or layout, select the image to crop or reposition the image. You can also set a focal point for mobile view, so you can control exactly what supporters see on every screen size. After setting the mobile focus, select the desktop icon at the top of the page to preview your changes on a mobile device.
Image elements
You can click and drag image elements onto any section of your Studio page. After you upload an image, select Edit to crop, reposition, or add alternative text.
Image elements are great for emotionally powerful, informational images or images with people directly engaging with the camera. These types should not have anything overlaid on top, or they’ll lose their appeal. You can also add alt text to image elements to improve their accessibility.
Select Stretch to fit to fill the entire section containing the image.
Impact tiles
To add images to impact tiles:
- Select the impact tile in the page designer
- Select the Configure tab
- Toggle on Apply image
- Upload your image
Frequently asked questions
Do you have any other design tips?
It helps to recognize that your page has two planes: a foreground and a background. The foreground contains important information like the Headline Image and donation buttons. Foreground elements always re-center no matter the screen size so supporters can view them.
The background contains your Hero Image and does not re-center (it zooms in and out to adjust). The background is meant to enhance or draw attention to your foreground elements. That said, the Headline Image should not cover the focal point of your Hero Image.
In short, it’s all about balance.