Images

Rarely do you find images that are in the exact style, size or format you need. Editing images correctly can help make your website look professional and support your brand identity.

Best Practices for Editing Images

  • Always work on a copy of the original
  • Use JPEG for photos; GIF for flat color
  • 72 pixels per inch
  • Assume that most users have millions of colors and let the quality degrade for users without (they’re likely used to it by now)
  • The quality of your images impacts the overall perception of your site’s quality
  • Image quality should be carefully balanced with size and download speed
  • No photo is better than a poor quality photo

Image Formats for the Web

  • JPEG (Joint Photographic Experts Group)
  • GIF (Graphic Interchange Format)
  • PNG (Portable Network Graphic)
  • SVG (Scalable Vector Graphic)

Choosing the Correct Format

  • Use JPEG if the image is…
    • photographic
    • gradated color
  • Use GIF if the image is…
    • mostly flat color
    • against a color background and needs transparency
    • contains predominantly type
  • PNG and SVG both have spotty support and aren’t recommended for most uses (though PNG may be suitable for Intranet use)
    • PNG is lossless, and has variable transparency control
    • SVG has very high quality

Resolution

  • All web graphics should be prepared at 72 dpi
  • Image pixels map to monitor pixels, so graphics will appear smaller on high-resolution screens
  • Beware of overly wide graphics that break the layout

JPEG Tips

  • Don’t save a JPEG multiple times. Because JPEG is “lossy” the quality degrades each time it’s saved
  • Use the “Unsharp Mask” after sizing to the final size
  • Always size to the final size rather than letting the browser resize
  • When making large sizing changes, size in smaller increments
  • Avoid sizing up
  • Always save a copy of the original
  • Avoid “progressive” or interlaced JPEG’s for most normal use
  • Compress only as far as need to balance quality/size

GIF Tips

  • GIF was formulated when most users had only 256 colors
  • Dithering combines two colors to approximate an intermediate color but results in larger file sizes
  • The “Selective” color palette is generally the best choice. It favors large areas of flat color and the (limited) web palette
  • In general you can use minimal compression as the advantages in file size are quickly outweighed by the loss of quality
  • If a GIF will require a transparent background create it with a canvas that matches the color it will overlay (the “matte” color).

0 Comments

Submit a Comment