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.
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: firstname.lastname@example.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)
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
Search for photos under the creative commons license.
US Fish & Wildlife photo library
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
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
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.
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 have a few additional options for images.
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