×

Media Card Images

Media cards and images

When images are used with media cards, each image should be independently and equally engaging. If careful attention is given to the composition, energy, and color within each image, no one card will rise above the others and the group will remain uniform. However, there are always exceptions to this guideline. Resources and subject often determine the available imagery.

Media card image formats

All images within a media card group must be formatted the same size. For example, 1000 pixels wide and 560 pixels high.

DO NOT: Load images that are not optimized. Once optimized, no image should be larger than 2M.

LEARN MORE ABOUT OPTIMIZING IMAGES

DO NOT: Use images with a lot of text. Assistive content devices cannot read image content and images are often reduced on mobile devices to the point that they are a challenge to read. An image with one word or a very short phrase can work if necessary. The word or phrase in the image can be added to the alt tag which describes the image and will be read by assistive content devices.

Cropping a portrait

Using the image editing software of your choice, when you crop a portrait in the 1000 pixel x 560 pixel format, start by centering the subject and then capture just above the top of the head and at or slightly below the shoulder line. You can apply this to the 1000 pixel x 1000 pixel format as well. The crop will simply be lower on the person's torso.

TIP: When the subject is turned left or right add just a little extra space to that side, the image will look more centered than if you crop with the subject exactly in the center.

A blue box indicates how best to crop a typical media card portrait image. There is a woman with shoulder length brown hair that is the subject.

Portrait: Option 1

  • SIZE: 1000 pixels x 560 pixels
  • RESOLUTION: 72ppi
  • TARGET WEIGHT: Under or close to 200k
A smiling young asian man with with dark hair and wearing a dark blazer with a red tie is the subject in the image. He is shown head and shoulders.
Label here

Lorem ipsum title here

Readout lorem ipsum dolor sit amet consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Read more

Portrait: Option 2

  • SIZE: 1000 pixels x 1000 pixels
  • RESOLUTION: 72ppi
  • TARGET WEIGHT: Under or close to 200k
A smiling woman with dark brown curly hhair is the subject of the image. She is wearing a dark gray blazer over a white button down shirt.
Label here

Lorem ipsum title here

Readout lorem ipsum dolor sit amet consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Read more

Cropping a group image

Using the image editing software of your choice, when you crop an image of several people in the 1000 pixel x 560 pixel format, start by centering the subject of focus. You can apply this to the 1000 pixel x 1000 pixel format as well.

TIP: Watch cropping at the edges. Be careful not to leave a hand or a very small portion of a person's face at the edge of the image.

When choosing an image, or creating one...

Follow these guidelines for the best option.

An example of an image that works as an image for a media card. The subject is in focus and centered, the lighting is complimentary.
Media Card Images

The selfie

If you have to use a subject's selfie, guide them with these tips. The subject is in focus and centered, the lighting is complimentary, and the background is blurred, keeping it from competing with the subject. Even the color of the shirt is well chosen - not too bright and simple.

A smiling young woman dressed in a maroon shirt and wearing a cap, is walking on campus. She is positioned in the center of the image.
Media Card Images

Look for simple compositions

This casual and well composed image works well because the position, color, and blurred background, all enhance the central subject as a strong focal point.

This image includes a smiling gray haired professor dressed in a dark sport coat. He's standing at the Millennium Park outdoor concert space.
Media Card Images

A complimentary setting

The context of this image adds context and interest to the image without overwhelming the subject.

This image is a scene that includes a professor and students on a bicycle tour in Chicago after midnight.
Media Card Images

Details make a difference

Even if the image is busy, when it includes a strong focal point in the composition — the professor guiding the tour is in the front, wearing a light sweatshirt — it simplifies the image.