Skip to main content

Web Imagery Best Practices

Image Size

For web use, images should be saved at 72 DPI with a quality setting that ensures file size is under 500 KB. In Northwestern's branded templates, the largest layout breakpoint is 1440px wide (desktop). In Cascade CMS, dimension guidelines are usually provided for each image chooser and should be followed.

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. 

Copyright

You must have permission from the copyright holder to use an image on any web page. If you wish to use copyrighted material, send a Copyright Request Form to the content owner to obtain the necessary permissions. Obtain personal releases before using materials that could violate the privacy of individuals.

Image Formats

WebP

  • Preferred modern image format supported by current major browsers.
  • Versatile: provides transparency, animation and both lossless and lossy compression.
  • Good to reduce file sizes for mobile users and to increase SEO.
  • Lossless images are 26% smaller than PNGs; lossy images are 25-34% smaller than JPEGs [source].
  • Photoshop can export to this format; for other editors, converters are available.

GIF

  • Supports transparency and animation.
  • Good for images with limited colors or with flat regions of color.
  • Best used with smaller sized images or animations.
  • 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 or photographs 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.