Nothing is more annoying to readers than waiting for a 200k graphic to load when it should be only 20k instead. Graphic software can compress files so they take up less room on your disk, and therefore take less time to load into your visitors’ browsers.

What is Image Compression? Image compression is minimizing the size in bytes of a graphics file without degrading the quality of the image to an unacceptable level. The reduction in file size allows more images to be stored in a given amount of disk or memory space. It also reduces the time required for images to be sent over the Internet or downloaded from Web pages. (Source)

Compression Methods There are basically two types of compression methods: lossy and lossless. Lossy compression creates smaller files by discarding some information about the original image. It removes details and color changes it deems too small for the human eye to differentiate. Lossless compression, on the other hand, never discards any information about the original file.

Graphic File Formats The graphic file formats most browsers support are GIF, JPEG and, more recently, Progressive JPEG (p-jpeg). New formats are appearing as possible challengers, including PNG, FIF, and those based on wavelet compression (see below). PNG, being an open standard, promises to replace GIF. JPEG has no current non-proprietary competition, though there has been a lot of hype, claims and discussion about the various proprietary formats. The potential of improved compression ratios using one of the wavelet flavors is showing scientific promise but will depend on the open standards issue for widespread acceptance.

When and how to use the different web graphic formats:

JPEG:

  • Good:
    • Photographs
    • Movie stills
    • Desktop backgrounds
  • Bad:
    • Line art and text
    • Anywhere where fine lines or sharp color contrast is needed

PNG:

  • Good:
    • Text, line art, general web graphics
    • Windows application screenshots
    • When accurate reproduction (lossless) is required (24 bit PNG)
    • When alpha channel support is required
    • As a general replacement for anything that is a non-animated GIF
  • Bad:
    • Photos
    • Disappointing browser support for 32 bit PNGs from Microsoft and others

GIF:

  • Good:
    • Where animations are required
    • Widespread browser support
  • Bad:
    • Large file sizes compared to PNG for the same quality
    • Often limited to 256 colors (8 bit)

Many web designers do not understand the differences between graphic formats, which is why you see grainy, blurry, slow-to-load, distorted, or pixelated graphics on web sites. It is important to save and compress properly for quick load and best appearance. Contact TBH Creative today to hire a company who knows how to work with web graphics.