Skip to main content

Photography Guidelines and Best Practices

Be sure to follow guidelines and best practices for photography.

Print Resolution

For all printed materials, images should have an actual resolution of 300 PPI, and an effective resolution of at least 300 PPI, at a maximum of 100% scale. These values can be checked in the Link Info menu of the Links panel in Adobe InDesign.

Web Best Practices

Appropriate Size

The largest layout breakpoint is 1440px wide (desktop). For viewport-width images, ensure that the image is at least 1440px wide (preferably larger) to maintain crispness and readability. Higher-res images are encouraged for all image sizes, as Retina or other high-pixel density displays are becoming more ubiquitous.

Focal Point

Images work best if there is a main point of focus. With responsive layouts, image containers can vary in size from device to device, and having a focal point ensures that the image subject is conveyed correctly at all sizes.

Type Over Photos

Much of the Northwestern.edu design features viewport-width images with headlines overlaid. Even with a semi-transparent black overlay, photos that are too busy render the text unreadable. For these large feature images, avoid photos with too much contrast or too many details. 

GIF, PNG, JPG, and SVG are the most common formats for web graphics. 

GIF
  • Supports transparency and animation.
  • Good for images with limited colors or with flat regions of color.
  • Best used with smaller sized images.
  • Limited to 256 colors.
PNG-24
  • Smaller file size (5%-25% more compressed than GIF).
  • Best bitmap image format for transparency (such as logos and icons).
  • No jagged edges and no need for matte color matching.
  • Not suitable for large images due to large file size.
  • Cannot be animated
JPEG
  • 24-bit color, with up to 16 million colors.
  • Rich colors, great for photographs
  • Better for images with subtle variations of color (supports 16 million colors) such as large photos.
  • Higher compression tends to degrade quality: adjust compressions to avoid large file size and bad image quality.
  • Does not support transparency or animation.
SVG
  • XML-based graphics language for vector shapes, text and embedded raster graphics.
  • Strong mobile support due to scalable nature.
  • Supports transparency and animation.

Common Treatments

In some instances, when the University does not have control over the source images, it will be necessary to treat a collection of images in a common way to make sure they fit together as a family. In these instances, images should be treated in black and white, and should be adjusted individually to match contrast and value as closely as possible.

Orientation

When photographing, take both vertical and horizontal images of the subject to allow for more usage options.