Page tree
Skip to end of metadata
Go to start of metadata

On This Page


The new platform has many large photo placements built-in to showcase our beautiful photography, but there's nothing worse than putting low-resolution photos into high-resolution areas. Follow these guidelines to make sure the images you use are the right size and shape for where you're using them.

Main Website

Your homepage, articles, and other of your main website, such as sc.audubon.org or strawberry.audubon.org/

Hero images

Found on landing pages, the homepage, static pages, and article pages.


The ideal size for any hero image is 2400px wide by 1000px high. This ensures that the whole image (and its page title/subtitle overlay) is fully visible even on smaller screen. 

Minimum image size for hero images is 1200px wide by 500px tall. At 1200px your image might start to degrade for people who browse the web with their browser maximized, and may not look so great on iPads or other high-res tablets. But it should still be usable.

Any images between 2400 or 1200px wide should be cropped to a similar ratio of 2400 x 1000 (2.4:1). Think: more rectangular than a widescreen television. 

Static Pages

Width Mode “Full”

Width Mode “Half Right”

This should be used sparingly on static pages—really only when you have an extremely vertical image, as in the example here. Otherwise, a “Full” image will have a larger, more ideal display for square, horizontal, or even slightly vertical images.


Shape/crop: Vertical Only. And only then if it’s very vertical.


Size (ideal): 750px width

Size (minimum): 375px width. It will fill the box, but will look pixelated on an iPhone.

These images actually display larger on mobile screens than they do on desktop, so their minimum size is set from their mobile view.




Articles

Articles have a few additional options for images.


Inline Hero

This is one of the Layout options for Articles. It places an image above the body content but it’s not as big as a standard hero shot.


Shape/Crop: Horizontal (3:2 to 16:9 aspect ratio)

Size (ideal): 1600px wide

Size (minimum): 800px wide

Online Forms

This is for donation forms, advocacy forms, ticketed event forms — these will be on the domain act.audubon.org. You make them using EveryAction.

'Online Actions' Web Form Header Images

Also referred to as a "Custom Banner Image", you'll use one of these on any donation, event, advocacy, volunteer, petition, or signup form.

Shape: Square
Ideal Dimensions: 800px wide, 800px tall

Email Templates

The email templates or "message types" in The Email Machine require particular sizes for various images.

Email Story and Lead Images, Full Width

Any image that always stretches across the entire width of an email. Currently, this includes the topmost or 'lead' image in an email, as well as many images for individual stories in a newsletter.

Shape: Landscape Rectangle
Ideal Dimensions: 1176px wide, 600px tall

Email Sidebar and 'Action Zone' Images

Appearing to the right of text most of the time, with the text wrapping around below it. Featured in action alerts, appeals, and a variant of the event message type.

Shape: Square
Ideal Dimensions: 800px wide, 800px tall

Signatures

In order to fit signatures next to portrait thumbnails, they must be somewhat squat (sorry, long-named people). For this reason, if you must use more than one signature, make sure you stack them.

Shape: Landscape Rectangle
Ideal Dimensions: 280px wide, 120px tall

Portrait Thumbnails

Puts a face to the name in signature blocks, and appears just to the left of them, if used.

Shape: Portrait Rectangle
Ideal Dimensions: 200px wide, 250px tall


  • No labels