Skip to main content
All CollectionsHelp ArticlesFundraising PagesEveryday Giving Page
How do I add an appropriately sized image for the layout of my fundraising page?
How do I add an appropriately sized image for the layout of my fundraising page?
Updated this week

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.

Did this answer your question?