Image Guidelines

Best Practices when using images in Final Site

The following best practices are recommended when preparing images to achieve the best balance of visual impact, visitor engagement, and loading speed:

Images

• Resize your images to match the pixel dimensions outlined in each section of these instructions to achieve the best balance of visual quality and loading speed.

• Keep the focal point of each image in the center. This safeguards against any automatic cropping of the image that may occur on custom features at certain screen widths to fit within the responsive layout.

• Save all images at 72ppi (pixels per inch) with an RGB color profile.

• Upload photos and detailed illustrations in the .jpeg file format.

• Upload simple logos and vector graphics as .svg, .png, .gif or .jpeg files.

• Add descriptive alt text to images to make them accessibility compliant.

• Only display a small number of images within slideshows. Please note that slideshows on the homepage have an automatic limit of 20 images.

Images Sizes for Front Page Elements (Tier 2)

When uploading new images to your website, we recommend preparing them to the following pixel sizes to achieve the best balance of visual quality and loading speed.

All images uploaded to Composer’s Resources Manager are automatically optimized when displayed on the page. With this in mind, we recommend following these size dimensions and saving photos as JPEGs, there is normally no requirement to save out the images at a lower quality setting.

Tips for Using Photos on the site:

• Select images carefully for the space where they will be used.

• Place the focal point of the image toward the center so that important information does not get cut off when the browser window is resized.