Image Guidelines / Sizes

Some general guidelines:

  • Remove over add: Use cropping to fill your entire image with the photo. Avoid filling or adding elements; crop out black bars from SD videos.
  • Don’t be afraid to crop in, tightly if need be, to change the aspect ratio of an image.
  • Whenever possible, use the full retina-ready size. If you cannot get an image that size, use the minimum (half-size).
  • For videos, feel free to use a still from the video if you can get a clean shot.
  • For articles, keep in mind that you are not required to include an image. However, to have this flow through the homepage, you would need to add an alternate thumbnail in the alternate feature image field (see below).

Articles

Flow of best case scenario to worst:
  1. Retina-Ready: Landscape, 1600 x 1050px.
  2. Half-Size: Landscape, 800 x 525px.
  3. No image. This article will flow through channels, but not the homepage unless you add an alternate feature image for the homepage thumbnail (see below). Images of any size can be added to the article body.

If you can’t get an image at the half-size, but are close:

  1. Use an alternate aspect ratio. Your image should be 525px tall, but can be between 400-800px wide; it’ll be centered in the available space.

Video

Flow of best case scenario to worst:
  1. Retina-Ready: Landscape, 1170 x 660px.
  2. Half-Size: Landscape, 585×330. (We imagine you should be able to get screenshots/stills from almost all videos at this size. Use the large YouTube player if you need bigger screenshots).

For screenshots/stills from videos, you can treat them in a few different ways:

  1. Screenshot cropped to 585×330, as is (crop any black bars from SD out).
  2. If the quality or color isn’t great, turn it black and white. You may need to adjust the levels or contrast here.
  3. Use the multiplied, purple to gold color overlay over a black and white screenshot (see example below)

If you can’t get an image at the half-size, but are close:

  1. Use an alternate aspect ratio. Your image should be 330px tall, but can be between 300-585px wide; it’ll be centered in the available space.

People: Recipients, Trustees, Advisors

Flow of best case scenario to worst:

  1. Retina-Ready: Square, 360×360
  2. Half-size: Square, 180×180
  3. No image

Recipients: 2 side-by-side headshots:

  1. Retina-Ready: Landscape image, 360px wide, between 180-360px tall
  2. Half-size: Landscape image, 180px wide, between 90-180px tall


Alternate Images/Thumbnails for Homepage

In some cases, you may want to use an alternate thumbnail for the homepage (such as for articles that do not have a primary image). In that case, you can add an alternate image to the Alternate Feature Image field.

  1. Retina-Ready: 1070x700px
  2. Half-Size: 535x350px

Homepage: Large Features

Use the same dimensions as the article images for the large Homepage features (in the case of featuring an article, you could use existing assets). Keep in mind that the bottom 25% of the image will have text overlaid.

  1. Retina-ready: 1600x1050px
  2. Half-size: 800x525px;

Global Program Spotlights

Program spotlight images are a visual backdrop for text and a link, so should be images that are general or can recede into the background.  These images are square, since they’ll be cropped differently depending on where they appear on the site.

  1. Retina-ready: 950x950px
  2. Half-size: 475x475px

Program/About Mosaics

Mosaic Images should show off the best of each program (and the range of activities). Refrain from putting anything important close to the edge; the images get cropped slightly differently at various browser sizes.

Position 1 (Top Left)

  1. Retina-Ready: 1520x880px
  2. Half-Size: 760x440px

Position 2 (Top Right)

  1. Retina-Ready: 960x880px
  2. Half-Size: 480x440px

Position 3 (Bottom Left)

(Quote, no image required)

Position 4 (Bottom Middle)

  1. Retina-Ready: 960x880px
  2. Half-Size: 480x440px

Position 5 (Bottom Right)

  1. Retina-Ready: 720x880px
  2. Half-Size: 360x440px

« Return to American Theatre Wing Docs Index