Cropping a photo

Image Guidelines

Image Dimensions

Image Type Image Size (in pixels)
Homepage Banner 1200 x 600
Interior Page Banner 1200 x 480
Headshot 250 x 250
2 Column Image 500 x 360
Factoid/Icons 250 x 250
 Visual Navigation 550 x 360
Index Page Icons 500 x 350
Parallex Banner Background 1600 x 900
Full Width Banner Background 1800 x 455

Optimizing & Resizing Photos

Resizing and optimizing photos delivers high-quality images in the correct format and size, while maintaining the smallest file size possible. This process allows for a faster page load and helps improve the overall user experience.

Free online photo resizing/ tools:

Image Size Sets

Image size sets resize images to the correct default dimensions automatically, freeing up time for editors. Image size sets can be used for interior banners (1200 x 480px) and thumbnail images (500 x 350px) in the following folder within your site: "img > img_set"

Image File Formats & Compression

Below are three of the most common image file formats for the web:

  • JPEG: most common image format to support digital photography on the web. JPEG file formats compress photos, which allows for a faster load time but may have a slight loss in photo quality
  • PNG: used for images that require a transparent background. Due to the larger file sizes of PNG files, they should only be used on small images or as required
  • GIF: used for images that include a solid color. Since GIF files are smaller in file size, they are easier and quicker to load on the web

Responsive Banner Image

When selecting a featured banner image for the homepage, ensure that the photo has high enough resolution and fits within the guide below to be scaled correctly on various platform sizes.

Responsive banner image guide