How to compress your image files like a graphic artist

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. (Source)

When and how to use the different web graphic formats. (Source)

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

About the author | Tatum Hindman

Tatum is the president of TBH Creative and is responsible for building long-term client relationships. She enjoys the strategy behind web design and sitting down with clients to define online marketing goals. She likes to blog about questions or topics that clients ask about as well as sharing new tricks.

View more posts by Tatum

Receive articles in your inbox