Image Management

Good image composition, including subject positioning, is key when selecting an image.  Watch the video below for a full tutorial covering image selection, resizing, naming, and positioning.

Selection Criteria

Illustration of the safe areas of a photo. A photo of the Mason patriot mascot gesturing to a Welcome Back sign. There is a cover overlay describing the safe areas of the photo unlikely to be cropped by social media platforms
This photo of the patriot is cropped to a 1:1 ratio, i.e. square. The colored overlay approximates the "safe crop" area of various social media platforms with the Patriot Mascot's head, shoulders, and jersey visible in the safe zone. When choosing and cropping your photo, keep in these safe areas in mind.

Choose an image that renders well on all screen sizes.  In most instances, this means the main subject of the photo should appear at or slightly right-of-center and in the middle third. 

People in your photo? 

  • Position so the entire image shows subjects from the waist or shoulders up. The subjects' face(s) should be close to the middle third.

Do not use photos that are:

  • Blurry
     
  • Crooked
     
  • Upside-down, or otherwise weird

Optimal Image Dimensions

The maximum file size for all SiteMasonry images is 2MB

Thumbnail Image

Must be added to every page and news item.

  • 1:1 aspect ratio
  • shape - square
  • minimum dimensions - 300x300 pixels
  • maximum dimensions -  600x600 pixels

Cropping all thumbnails to square maintains a consistent visual appearance in news lists on the site. Including thumbnails on all pages of web content improves your content's search rank.

Social media preview looking blurry? Check your image size. While the system will allow smaller uploads, the minimum dimension for thumbnails on social media is 300 pixels by 300 pixels.

Header Image - Landing Page

May be added to a landing page.

  • 30:13 aspect ratio
  • shape - horizontal rectangle
  • minimum dimensions - 2600x1127 pixels
  • maximum dimensions - 3000x1300 pixels

Slide Image - Landing Page

May be added to a landing page.

  • 16:9 aspect ratio
  • shape - horizontal rectangle
  • minimum dimensions - 2600x1463 pixels
  • maximum dimensions - 3000x1688 pixels

Hero Image - Basic Page

May be added to a basic page.

  • 9:1 aspect ratio
  • shape - horizontal rectangle
  • optimal dimensions – 210x1890 pixels 
  • minimum dimensions –  210x1890 pixels 
  • maximum width – 3000 pixels 

Profile Image

May be added to a profile item. The profile 'headshot' displays as the image preview when shared to social media.

  • 1:1 aspect ratio
  • shape - square
  • minimum dimensions - 300x300 pixels
  • maximum dimensions - 600x600 pixels

Thumbnail guidance applies to profile images.

Embedded Image

May be added to any text block.

  • use a source image with a minimum width of 400 pixels, maximum width of 800 pixels
  • after uploading an image, select a pre-formatted size from the dialog box

Featured Image

May be added to a basic or landing page.

  • A Featured Image block expands to the width of the section it is placed within
  • For optimal results, use images with a standard aspect ratio - 4:5, 16: 9 or 1:1 

 

In the video below, Digital Strategist Kristin Heydt teaches you image selection, resizing, naming, and positioning.