Images

Images should be used to supplement text content on the website. This guide will help with sizing and inserting images.

Image Widths

Use the widths provided below with the appropriate templates and to convey the intended meaning.

Home Page Banner Image (Homepage Carousel)

When using the home page template, you should use banner images that are 1300 pixels wide and 670 pixels tall. Do not upload an image in a smaller width as that will lead to sub-optimal image quality.

A slide title, content, and link display on each of the images.

We recommend you do not use more than six banners on your home page at any time to prevent slow loading times.

Home Page Service Images

When using the home page template, you have the option of adding service item images. These images must have a width of 142 pixels and a height of 204 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Landing Slides/Feature Images

When using the home page, landing, and interior wide left templates, you have the option of adding landing slides or feature images that will display above the footer. The recommended size for these images is a width of 600 pixels and a height of 400 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Feature Callout

When using the landing and interior wide left templates, you have the option of adding a Feature Callout that will display near the bottom of the main content copy area. The recommended size for these images is a width of 600 pixels and a height of 400 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Secondary Page Banner Image

Banner images are dominant and demand attention. They usually appear before the content they are intended to represent. The recommended size for banner images on the landing and inner wide left templates is 1300 pixels wide and 400 pixels tall.

Primary Callout

When using the landing and interior wide left templates, you have the option of adding a Primary Callout that will display in the right column. The recommended size for these images is a width of 400 pixels and a height of 420 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Images in Content

Text will wrap around images that are smaller than the width of the content area. A good rule-of-thumb for floated images is that they should be no more than half the width of the main content area. In a two-column or landing page layout, 500 pixels wide is the recommended max width, but the height can be variable if the image is not square.

Images that are oriented to the right are preferred. In the WYSIWYG editor, you can apply the right class to images once you have inserted them into the content.

Before You Upload

Follow design and brand standards set forth for image creation. Contact Jessica King if you have any questions about creating or purchasing images for website use.

Upload images to the appropriate location in the media library.

The editor can be used for finding and inserting images into content. If you are unsure where an image should be uploaded, contact Jessica King for assistance.

  • Images should be sized correctly before they are uploaded. The CMS is not an image editor.
  • Use alt tags appropriately to label images.
  • Images should always be floated right unless they occupy the full width of their content area. Images should only be floated left when this position is crucial to the understanding of content.