George Mason University
George Mason University Mason
George Mason University

Photo Sizes

It's important to take the time to size your photos. An image that has not been sized correctly and formatted for use on the web could cause a variety of problems.

An unsized image can be huge in terms of file size, and the larger the size, the longer the page-load time. Slow load times lead to impatient users, who could bounce off your site to a faster one. Large files also take up massive space on servers.

Sites built on the Mason Drupal Platform are responsive, which means pages and components adjust to appear correctly across all devices. If photos aren’t sized, they might not appear as they should on every device ... or browser; unsized photos on a site can stop Firefox from working on a device.

Screen resolution is measured in pixels, so we use pixels to size website images. Most image processors, such as PhotoShop, have an option to save for the web, which optimizes the resolution for multiple digital devices.

Home Front

Full‐Width Slider Image: 1600 by 660

Find examples on the CVPAHonors College, and Systems Engineering home fronts.

 

Large Two-Column Rotator: 540 by 350

See an example on Volgenau.

 

Hero/Schools Menu Thumbnail: 146 by 136

See an example on the Compliance, Diversity, and Ethics home front.

 

Hero/Schools Menu Full-­Width Expanded Image: 1280 by 450

Find an example on the CVPA home front.

 

Hero/Schools Menu Expanded Image: 460 by 330

Find an example on the Compliance, Diversity, and Ethics home front.

News Stories Background: 1600 by 800; Story Link Image: 350 by 218

The background image size is the photo that will appear behind the smaller news images that have text linking to stories.

 

Fast Facts/Carousel Background: 1600 by 300

Find an example on the Dance home front.

Featured Event: 330 by 210

Find an example on the Startup website.

 

Audience Menu: 375 by 230

Find an example on the Provost website.

 

Rotating Photo Gallery Without Captions: 756 by 520

Find an example on the Dance home front.

 

Footer: 1280 by 323

Select your footer image carefully, as there will be text in reverse white across the image.

 

Landing Pages/Unit Landing Pages

Large Photo Topper Accompanied by Carousel: 1600 by 1000

Find an example on SEOR.

 

Large Photo Topper Without Carousel: 1600 by 680

Find an example on WebInfo.

 

One-column image: 350 by (variable depth to meet needs of design)

Find examples on SCARHousing, and Dance.

 

Two-column image (on unit landing pages only): 708 by (variable depth to meet needs of design)

Find examples on CVPA.

 

Landing Page Image Rotators: 1100 by (variable depth to meet needs of design, but ALL photos MUST measure the same depth)

Find examples on SEOR and CVPA.

 

Content Page

Page Header Image: 1600 by 250.

This is optional. Your site will have a default image, which will automatically populate on all pages.

Full-Width Photos/Image Rotator Photos: 725 by (variable depth to meet needs of design, but ALL photos in a rotator MUST measure the same depth)

Half-Width Photos with Wrapping Text: 342 by (variable depth to meet needs of design)

Spotlights on Left Side of Page: 275 by 183

Find examples on CVPA.

Other Photo Components

Traditional Portraits for Shared Content: 200 by 280

Find examples in CVPAVolgenau, and SCAR.

Meet Our Staff Portraits (not in Shared Content): 200 by 275

Find examples on CDE and Startup.

Staff Portrait in Expandable Content: 150 by 225

Find an example in Housing.

News Page Promo Images: 280 by 188

Find an example in Volgenau.

Schools & Programs