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 Video 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:

Images inserted into rich-text content

Images added via the rich-text editor (such as in the About section, custom content sections, or the main campaign description) behave differently from the dedicated image upload slots described above. Here are some best practices:

• Resize handle in the editor: Clicking an embedded image displays a drag handle on its right edge. You can drag this handle to adjust the image’s displayed size without affecting the actual file.

• No file re-compression: Resizing an image in the editor only changes its display size. It does not reduce the file size or pixel dimensions. To decrease file size or dimensions, resize your image using an external tool (such as your operating system's image editor or an online service), then remove the old image and reinsert the new one.

• Recommended embedded width: Aim for images that are roughly 600–800 pixels wide for standard content. For smaller inline thumbnails, target a width of 300–400 pixels before uploading.

• Full-width behavior: The image displays at the width you set in the editor or when pre-sized. An oversized file may look large on the page, while a very small file may appear narrow. Adjust the size to match your intended layout.

• Distinct from dedicated slots: Unlike images uploaded to dedicated slots (hero, video thumbnail, sidebar, etc.), images embedded in rich text are not resized server-side. Use the dedicated upload controls for structural elements that require fixed dimensions.

• If an image appears too large after publishing: Use the drag handle to reduce its displayed size, or resize the file externally and reinsert it.

• File size guidance: Keep images under 8MB—and ideally under 1MB—to ensure fast page loading. When exporting, choose a quality setting that balances clarity and file size (e.g., a reasonable JPEG quality for photos or a compressed PNG for graphics).

• Cropping and safe zones: Because different devices and layout containers may crop images, avoid placing critical text or details near the image edges.

Example workflows

Replace an oversized About-section image:

1. Open the About content editor and remove the current image.
2. Resize the original file to around 700px wide using your preferred tool and export it with web-optimized quality.
3. Insert the resized image into the content block and save your changes.

Reduce display size without re-exporting:

1. Select the image in the editor.
2. Drag the handle on its right edge to make it narrower.
3. Save your changes.

Create an inline thumbnail for a team photo:

1. Crop and export a version that is 300–400px wide.
2. Insert it inline where a smaller image is needed.

When to use a dedicated upload slot instead

If the image is a key structural element (such as a hero image, video thumbnail, tile image, or sidebar background), use the dedicated Images & Display upload control described earlier so GiveCampus can process it to the correct target size for all devices.

Summary: Images embedded in rich text can be resized for display using the editor’s drag handle, but this does not reduce the file size. To lower file size or dimensions, resize the image externally and reinsert it. A good default width is 600–800px for standard content.

• 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

FAQ — Why does my school logo look tiny in GC Video’s Branding and Content section?

• Short answer: The Logo field in GC Video’s Branding and Content section is designed for a 200×50 pixel image at full quality. Uploading a smaller or web-optimized file will make the logo appear too small.

• Finding the logo field: In the admin, navigate to Video > Video. Select your video landing page and scroll down to the Branding and Content section to locate the Logo upload field.

• Why a smaller file appears tiny: GiveCampus resizes images proportionally and does not upscale files. If the uploaded image is smaller than 200×50 px, it will render at that smaller size.

• Upload at full quality: Always use a logo file at 100% quality to ensure it looks sharp when resized.

• Using embedded images vs. the dedicated Logo field: If you add the logo as an embedded image in rich text, adjusting its size in the editor only changes its display within that block. To control the logo on the video page, use the dedicated Logo upload field and ensure the file is correctly sized.

• Quick fix checklist:

  1. Go to Video > Video in the admin and select your landing page.
  2. In the Branding and Content section, replace the existing logo with a properly sized 200×50 px file at 100% quality.
  3. Save your changes and preview the video landing page.
  4. Remove or replace any embedded logo in rich text that might conflict with the dedicated field.

• If the issue persists: Double-check that you uploaded the file to the correct Logo field and that the source file meets the 200×50 px recommendation.