We recommend a consistent image ratio across the website to ensure photographs are displayed properly regardless of actual pixel dimension or screen size. Using a consistent 3:2 ratio common to most digital SLR cameras makes updating content easy. Images at different ratios can also be used; the height will vary while the width will match the container selected in the content management system (CMS).
To ensure a high quality representation at multiple sizes, use an image of at least 868px wide. The image will size proportionately based on the container. Do not include image dimensions in mark-up, the CMS will automatically handle image sizing.
Full-width hero images require a minimum width of 1920px and special editorial consideration and planning. Choosing images that have the greatest visual impact and clearly relate to page content. Test hero images to ensure critical parts of the picture are not obstructed by overlapping text boxes.
Large images are used on program pages to introduce the program with visual impact, but can also be used throughout the website for featured stories.
Medium and small images used inline or as thumbnails will size proportionately depending on their placement within a template.