The main image on your fundraising page is key to capturing your donors' attention - typically, it is usually the first thing they notice. A striking image can elevate your page, but it can be tricky if the photo does not display as you expected.
In this article, we have some useful tips to help your photo shine and leave a lasting impression on your visitors!
Step 1: Determine the image resolution and aspect ratio you need
First, check the recommended image resolution for your page layout. Fundraising pages automatically resize any uploaded image, so if you choose a photo that is "too small" or does not have the right width-to-height ratio, it could appear blurry, grainy, or pixelated.
Below, you will find a list of recommended image sizes and aspect ratios for each type of fundraising page. You may use larger images than suggested, but be sure to stick to the recommended aspect ratio for the best results!
Everyday Giving pages - Donation Form-Focused Template:
1600 x 1000 pixels | 8:5 aspect ratio
Everyday Giving pages - High-Impact Story Template:
1600 x 600 pixels | 8:3 aspect ratio
Peer-to-Peer, Events, or Everyday Giving pages - Enhanced Classic Template:
1200 x 600 pixels | 2:1 aspect ratio
Step 2: Ensure your image meets the specified criteria
If you are unsure about your image size (in pixels), you can open it on a desktop or laptop, right-click on it, and select 'File Info' or 'Properties.' There you will find details about the image’s dimensions, including height and width in pixels.
While they do not need to be an exact match, the more you stray from the recommended specifications, the more likely it is your image will appear distorted.
Step 3: If necessary, resize the image to meet the criteria
If your image is "too small" and appears distorted, you can either select a different image or embed one within a larger, properly sized image.
Example: A humane society wants to use profile photos of their animals as their primary image - but, the images are too small on their own.
The organization can take those photos and add them to a background image or collage that is closer to the correct size, as shown in the example photo below.
Using this option has allowed the organization to include the desired images they wanted without compromising the resolution or quality of the original images.
Step 4: Test the image's quality across multiple devices or screens
You may notice that the "preview" thumbnail image does not exactly match how it appears on your public-facing page when viewed on a desktop or tablet.
This is because the background image automatically adjusts to whatever screen settings the visitor is using. The image scales in proportion to the browser, centering at the top and filling either the full width or height. It cannot be both.
To ensure the image appears as intended, it is best to preview your page on various devices such as desktops, tablets, and mobile phones.
What else would you like to do?
Not quite what you're looking for?
Go back to the Feature Overview.