- 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.
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.
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”.