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

When using the home page template, you should use banner images that are 1920 pixels wide. Do not upload an image in a smaller width as that will lead to sub-optimal image quality. While anything over 450 pixels is an acceptable height for the banner images, all banner images must be the same height.

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

Home Page Featured Content

When using the home page template, you have the option of adding featured content with images. The recommended width of these images is 370 pixels. The height can vary, but it is recommended that all images have the same height. The images will automatically scale to display at the correct size, but do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Landing Page Banner Image

When using the landing page template, you have the option of adding a landing banner image that will display prominently at the top of the page and span the page width. These images must be 1900 pixels wide and have a recommended height of 500 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 Page Features

When using the landing page template, you have the option of adding Features that will display near the bottom of the main content copy area. The recommended size for the images in these features is a width of 370 pixels. The height may vary, but it is recommended that all of these images on a page have the same height. 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.

Inner 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 three column template is 545 pixels tall. The recommended size for banner images on the two column, wide-right and two column, wide left templates is 825 pixels wide. The recommended size for banner images on the one column template is 1100 pixels wide. The height may vary, but 300-500 pixels is a good range, but it is also recommended that all images on one template are the same height.

In-Line/Content Callout

You have the option of adding in-line/content callouts to the Content Copy and Content Copy One fields on any template. These callouts will display within integrated within the content on the page. The recommended size for the images within these callouts is a width of half the width of the main content column on the page. For the landing page, two column, wide-right and two column, wide-left templates, the recommended width is 400px. In a three column template, the recommended width is 250 pixels.  The recommended width on the one column template is 500 pixels.

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. The recommended size for the images within these callouts is a width of half the width of the main content column on the page. For the landing page, two column, wide-right and two column, wide-left templates, the recommended width is 400px. In a three column template, the recommended width is 250 pixels.  The recommended width on the one column template is 500 pixels. 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 Anthony Sanchez 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 Anthony Sanchez 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.