Images Formatting Your Images

Follow the suggestions below on how to format your images before uploading them to your website:

Important Terminology

• Aspect Ratio – An image’s aspect ratio is its width to height ratio expressed as a number, like 3:4. Maintaining a consistent aspect ratio prevents images from becoming distorted. For example, if you reduce the width of an image by half, you must also reduce the height by half.
• Image Size – In this guide, image sizes refer to the number of pixels along the image’s width and height. Your image may display larger or smaller on your site depending on its container size. Because of the responsive nature of the website, your images will always automatically span 100% of the container.

Image Requirements

File Types

Save images in .jpg, .gif, or .png format only. (.pdf, .psd, .tff, and .doc files are not web-compatible)

File Name

Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.

File Size

We recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 5 MB. When it comes to image size, bigger isn’t always better, as uploading larger images can affect site performance.

Resolution

We recommend using image files with a resolution of 300 pixels per inch (ppi) for best results.

Color Mode

Save images in RGB color mode. Print mode (CMYK) won’t render in most browsers.

Color Profile

Save images in the sRGB color profile. If images don’t look right on mobile devices, it’s probably because they don’t have an sRGB color profile.

Image Best Practices

Image Dimensions

The dimensions of the original image you upload to your site can have a big impact on how it displays.

For images that display in the featured area of your website, we recommend using images that are between 400 and 600 pixels wide.

For images that display in the Image Slideshow or Hero Banner of your website, make sure to use a landscape (horizontal) image rather than a portrait (vertical) image so it can fill the space properly.

• If you are using the Comprehensive theme, your image should be a minimum of 1200×460 pixels.
• If you are using the Focused theme, your image should be a minimum of 1440×500 pixels.
• If you are using the Regional theme, your image should be a minimum of 1800×500 pixels.

Anything smaller than the above dimensions will be pixelated and will not work well in the space provided.

Image Text

Whenever possible, we recommend adding text as a caption instead of including it within the image. This makes the text searchable and keeps it visible if the image crops on smaller devices.

If your image contains text, it’s best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its sharpness, especially if the image is displaying at its original size.

Orientation

Ensure that your image is in the correct orientation before uploading it. If your image is saved upside-down, rotate the image with image editing software before loading it to your site.

Third Party Image Editors

To edit images for your site you’ll need to use a third-party software. Here are a few applications you can use:

Software (Desktop Editors)

• Acorn (free & paid version) – Mac
• Adobe Illustrator (paid) – Mac and Windows
• Adobe Lightroom (paid) – Mac and Windows
• Adobe Photoshop (free & paid version) – Mac and Windows
• Corel PaintShop Photo Pro (paid) – Windows
• Gimp (free) – Mac and Windows
• PAINT.net (free) – Windows
• Pixelmator (paid) – Mac

Web (Online Editors)

• PicMonkey (paid and offers many options)
• Pixlr (free and supports some mobile editing options)

Stock Photography

Please note, if you plan to use any stock photography on your website (ie. Getty Images, Shutterstock, etc.) you will need to acquire a license for those images before uploading them.