Stylesheet for Photo Sizes

Photo Specs & Notes:

NOTE:

  • In order for photos to work well in large spaces and mobile spaces, this will require multiple versions of the same photo, cropped and saved differently.
  • All starting photos in this site are not meant to be actually used on a live site.

Hint: These are listed in order of largest to smallest (generally) to make preparing photos easier.

Note: Photos work best with lots of extra background and the subject matter to the right of frame. (See Visual Guides Below)

Large Wide Photo: 1920 px wide X 1080 px tall.
– Used for Full Photo BG w Callout Box both light and dark text versions.

Wide Short Photo for Page Top: 1450 px wide X 620 px tall.
– Used for Hero Wide w Shape Photo element.
– Used for Posts featured image.

Most Photos: 1000 px wide X 850 px tall.
– Hero area with thumb shaped photo mask.
– Images in shape on 50% of the row.
– Featured Images on Posts
– Works for most other photo elements.

Tall Narrow Photo Mobile: 630 px wide X 1080 px tall
– Used only on mobile version of full background photo with shape element to one side.

People Headshots: 1080 px wide X 1080 px tall

Logos for Sponsors: 1080 px wide X 1080 px tall

Visual Guides:

Guide 1: This guide below shows the overall size of the primary photo and relationship to the subject matter.

Guide 2: This guide below shows how the original image can be scaled and cropped for the other areas.

Search Ronald McDonald House Chapter Site