Best Practices: Image Dimensions and Sizing

Images are an important part of telling a compelling story on GiveCampus and we want to make sure they look as good as possible!

The various images that you upload on GiveCampus each have unique recommended dimensions and aspect ratios that will allow them to appear with the most clarity on high resolution devices. The dimensions outlined below represent the dimensions each of these images will be resized to after they are uploaded. To ensure every image appears as clearly as possible, each image’s dimensions should be as large or larger than the recommendations listed below.  The aspect ratios indicate the recommended width:height proportions for each image and we have also shared some more general best practices.

Important note: we do not downscale the quality of an image at all when uploading. We simply resize it proportionally.  Please make sure you are uploading an image that is not optimized for the web and is at 100% quality. The higher resolution the better as we will automatically resize the image upon upload, and the better the resolution, the better the image will look when resized. Most settings appear in the 'Images & Display' tab in the campaign settings. 

Image File Size

As a rule of thumb, all image files must be smaller than 8MB. This is because the larger the image file, the longer it takes for this image to load and may create a poor experience for your donors. If possible, we recommend that every image you upload to GiveCampus is less than 1MB in size.

Cropping

When your image is resized to fit the GiveCampus page, the edges may be cropped. Because of this, we recommend that you do not include text along the edges of your images. If it is essential that the edges of your image appear when uploaded, we recommend including a 30 pixel white border so that the entirety of your image is shown.

GiveCampus Recommended Image Dimensions

• Background Hero Image
  • Dimension: 1920 x 1200 pixels, Aspect Ratio: 8:5
  • Note: You'll have one of these on the Tier 1 (Main Campaign Page) and each of the Tier 2 Pages (Each Reunion Class Year).
  • That image could be the same across the board, of unique for each page (if, for example, you wanted it to be distinct for each Class)
  • Example: Pink bricks and Megaphone image
• Video Thumbnail (Optional -- we can also pull this right from the video itself)
  • Dimension: 636 x 357 pixels, Aspect Ratio: 212:119
    Note: You'll have one of these on the Tier 1 (Main Campaign Page) and each of the Tier 2 Pages (Each Reunion Class Year). 
  • That image could be the same across the board, of unique for each page (if, for example, you wanted it to be distinct for each Class)
  • Example: Blue, Back Together, Give Together image over the video.
• Still Image Instead of Video
  • The still image appears instead of a video if you do not use a video (of course best practice is to use video!)
  • Dimensions:  630 x 350 pixels (or similar ratio) to prevent cropping; Aspect Ratio: 16:9 
• Tier 2 'Tile' Images
  • Dimension: 600 x 400 pixels, Aspect ratio: 3:2
  • This is the image that displays on the Tier 1 page, showing the progress and allowing donors to navigate to each Tier 2 (Reunion Class) page. You'll need one for each Tier 2 page (each reunion class)
  • Example: 2019, 2014, 2009, 2004 tile images
  • Recommendation: As you'll notice in this example, the bottom part of the image will be covered with the text of the Tier 2 landing page 'Title.' Because of this, we recommend either having no text on these graphics or keeping the text focused in the upper half (as seen in this example)
• Content Section 'Breakers' (Optional)
  • These images are totally optional, but can be nice to include to add some additional branding, dimension, and depth to the page. 
  • Dimension: At least 1200 pixels wide. We recommend ~150 pixels high for an Section 'Header' image
  • Example: About section, Volunteer Info Session, and Save the Date
  • Recommendation: Think through what different content blocks you might want on the campaign! These can be unique to the Tier 1 and Each Tier 2 page if you think (totally optional) you might have distinct content to share for each class. I'd recommend having the designer create at least breakers for 'Reunion 2024,' 'FAQs,' 'Save the Date,' 'Get Involved,' and 'Register' sections -- you may have more, but starting with those will give us a lot to play with out of the gate! 
• Giving Form Background Image: 
  • Dimension: 1200 x 1200 pixels or larger Aspect ratio: 1:1
  • Example: Click 'Give Now' from campaign page. See left hand image. 
  • Recommendation: You do have the option to customize the Giving Form image for each of the Tier 2, reunion pages -- so, when they click to donate from each Tier 2 page the imagery can be distinct to that class. Many schools choose to just use the same image on the Giving Form across the board, but customization per Tier 2 is an option! 
• Sharing Image for Facebook and X:
  • Dimensions: 600 x 315 pixels (small), 1200 x 630 pixels (large)
  • Aspect ratio: 1.91:1
  • Where to Update: ‘Basics’ tab of the campaign dashboard
  • Example: From the campaign page, click the ‘Facebook Share,’ ‘X Post’  or ‘‘LinkedIN Share’ buttons to see an example of a shareable image.
• Call-to-Action Image:
  • The image that appears behind the call-to-action message and prompts on your GiveCampus landing page.
  • Where to Update: ‘School Level Settings’ tab of the Administrator Dashboard > Branding
  • Dimensions: 1920 x 1080 pixels; Aspect ratio: 16:9
  • Example: Click on the school page to see the background image behind the text blocks. 
• Header Logo:
  • The logo that appears in the top right hand corner of your campaign page and your GiveCampus homepage.
  • Dimensions: 400 x 60 pixels; Aspect ratio: 20:3
  • Where to Update: ‘School Level Settings’ tab of the Administrator Dashboard > Branding
  • Example: Click on the school page and note the GiveCampus logo (or a school logo) at the top left-hand corner. 
• Favicon Logo:
  • The Logo that appears in a users browser tab
  • Where to Update: ‘School Level Settings’ tab of the Administrator Dashboard > Branding
  • Dimensions: 16x16 pixels; Aspect Ratio: 1:1
• Footer Logo
  • The logo that'll appear in the footer when a donor visits a campaign page or school landing page.
  • Where to Update: ‘School Level Settings’ tab of the Administrator Dashboard > Branding
  • Dimensions: 150x150 pixels; Aspect Ratio: 1:1
  •  

How to setup custom video thumbnails

You can set custom thumbnails for videos on both pre-launch and live campaign pages:

Live Campaign

1. Go to Campaign Settings → Basics → Images and Display

2. Scroll to the "Video Thumbnail" section

3. Upload your custom thumbnail image

4. Save your changes

PreLaunch page:

1. Go to Campaign Settings → Basics → Pre-Launch Page

2. Scroll to the "Video Thumbnail" section

3. Upload your custom thumbnail image

4. Save your changes

Troubleshooting video thumbnail issues

Issue: Thumbnail not updating on live campaign Solution: Click 'Sync Thumbnail' in settings where you uploaded the thumbnail Issue: Thumbnail looks different than expected Solution: Check image aspect ratio and ensure it matches the 212:119 ratio Issue: Can't find thumbnail setting Solution: Look in Campaign Settings → Basics → Images and Display tab, not in the video upload section

Understanding Dynamic Giving/Campaing Form Sidebar Images

How the Form Sidebar Images Display

Form sidebar images use dynamic display that automatically adjusts to different viewing conditions:

• Screen size: Desktop, tablet, and mobile devices
• Window dimensions: Browser width and height
• Zoom level: User's browser zoom setting (100%, 125%, 150%, etc.)
• Device orientation: Portrait vs landscape mode

Why Images May Appear "Cropped"

This is normal behavior, not a display error. The system automatically crops and scales your image to fill the sidebar space optimally. Different portions of your image may be visible depending on:

• The viewer's device and screen resolution
• Their browser zoom level
• The window size of their browser

Unlike fixed images that display the same way for everyone, dynamic sidebar images prioritize fitting the available space while maintaining image quality.

Best Practices for Sidebar Images

1. Choose images with centered focal points - Important elements should be in the center of the image

2. Avoid text near edges - Text or important details near image borders may be cropped

3. Test on multiple devices - Preview your form on desktop, tablet, and mobile

4. Use high-resolution images - This ensures clarity at all zoom levels and device types

5. Consider the sidebar aspect ratio - Design your image knowing it will be displayed in a vertical sidebar format

Troubleshooting Image Display Issues

If your sidebar image doesn't look as expected:

1. Verify image dimensions meet the recommended specifications

2. Test at different zoom levels (try 100%, 125%, 150% in your browser)

3. Check on multiple devices - what looks good on desktop may differ on mobile

4. Ensure focal point is centered - move important elements away from image edges

5. Consider uploading a new version optimized for vertical display