Skip to main content

Best Practices: Image Dimensions and Sizing

Updated

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.

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

Related articles