Image Guide

Image Sizes

  • Medium images—In most cases, you’ll want your images to be medium sized. These will allow text to flow easily around them. Medium sized images should be 345 pixels wide.
  • Large images—Use large images when you really want to feature a graphic. Large images should not be more than 500 pixels wide or tall.
  • Small images—Small images are good for thumbnails and previews and should be around 150 pixels wide.
  • Small squares—For thumbnail images and icons, we use a height and width of 70 pixels.

Format & Compression

Images are some of the heaviest page elements to be downloaded, so because of this, all images for the web should be compressed in Photoshop. In general

  • JPGs should be used for photographs
  • PNGs should be used for graphics and illustrations with a limited color palette.
  • When in doubt, use a JPG.
  • Never use GIFs.

JPGs

The best strategy for compressing a JPG image is to start at 0 quality and move up one by one just until the image looks acceptable. Shoot for somewhere between 30 or 50 quality.

PNGs

If you opt for the PNG format instead of a JPG, save it as a PNG-8 (as opposed to PNG-24). Similar to compressing a JPG, start with a lowest possible color value—in this case, 2—and slowly increase the number of colors until the image looks acceptable. Set the dithering setting to “no dithering”.

Resolution

Images on the web are resolution-independent, which is just a fancy way of saying you can ignore this value.