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

High-quality photos make a HUGE difference in the overall effectiveness of your website. 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. 

General Guidelines

Images found on audubon.org have been specifically licensed for use on our website and are not to be “lifted” to use anywhere else. However, often permission has been granted for use across the wider Audubon network. If you see a photo that you’re interested in using, please send an email to our photography team and they can confirm if the image can be used for your Communications needs: photography@audubon.org.

Where to find photos for your websites

The Audubon DAM

For instructions on how to access the Digital Asset Management System (Audubon's online photo library), see: How to find photos in the digital asset management system (DAM) 

Wikipedia

For Wikimedia photos, please be aware that some images are loaded into Wikimedia via bots, so always check the fine print to make sure that the photo is indeed in the public domain or under a creative commons license. commons.wikimedia.org/wiki/Main_Page 

Flickr

Search for photos under the creative commons license.
www.flickr.com

US Fish & Wildlife photo library

digitalmedia.fws.gov

Birds of America

Don’t forget that all of the John James Audubon ‘Birds of America’ prints are in the public domain and available in high-res for free on the Audubon website. Find all the prints here: audubon.org/birds-of-america

Ethics Guidelines for taking photographs

• Please follow our ethics in wildlife photography guidelines: audubon.org/news/the-ethical-bird-photographer.
• The North American Nature Photography Association’s Ethical Field Practices guide offers additional practical tips: https://www.nanpa.org/docs/NANPA-Ethical-Practices.pdf

IMPORTANT

Big images mean potentially slow loading times, though. If you have access to Adobe Photoshop, I strongly recommend using its "Save For Web" option to optimize your photos. Use the "JPEG High 60" quality setting to ensure a good balance between image quality and file size. 

Online photo editors

If you don't have access to Photoshop or any similar desktop photo editing software, there are several free web-based services you can use for very basic cropping and resizing. Try these:

For very simple resizing: http://picresize.com/

A more full-featured editor that resembles Photoshop: https://pixlr.com/editor/

And finally, Photoshop itself has a simplified tool that's free to use online: http://www.photoshop.com/tools

Image sizes on your site

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


 



  • No labels