Pioneer Spirit

Seam­less pat­terns are a great way to add interest and detail to a web design back­ground. In this post we’ve rounded up over one hun­dred seam­less patterns.

By Cameron Chapman

Proper use of image com­pres­sion can make a huge dif­fer­ence in the appear­ance and size of your web­site image files. But com­pres­sion is an often-misunderstood topic, partly because there’s a real lack of under­standing on what the dif­ferent types of com­pres­sion are good for. If you don’t under­stand which type of com­pres­sion to use for dif­ferent types of images, you’ll likely end up with one of two res­ults: either images that don’t look as good as they could, or image file sizes that are way larger than they need to be.

Below is everything you need to know about image com­pres­sion in rela­tion to web design. We’ve covered the dif­fer­ences between lossless and “lossy” com­pres­sion, the dif­ferent file types and the com­pres­sion tech­niques they use, and guidelines for which file formats work best for dif­ferent kinds of images.

1. “Lossless” vs. “Lossy” Compression

Many people feel that they should only use image formats that use lossless com­pres­sion. While lossless com­pres­sion is superior for many kinds of images, it’s not neces­sary for many others. Basic­ally, lossless image com­pres­sion means all the data from the ori­ginal file is pre­served. Lossy com­pres­sion, on the other hand, removes some data from the ori­ginal file and saves the image with a reduced file size. It’s up to you, as the designer, to tell it how much data to dis­regard by set­ting the image com­pres­sion rate.

Lossless Com­pres­sion

There are a few dif­ferent methods for lossless com­pres­sion. There’s run-length encoding (used for BMP files), which takes runs of data (con­sec­utive data ele­ments with identical values) and stores them in a single data value and count. It’s best suited for simple graphics files, where there are long runs of identical data elements.

DEFLATE is another lossless data com­pres­sion method used for PNG images. It uses a com­bin­a­tion of the LZ77 algorithm and Huffman coding. In addi­tion to being used for PNG images, it’s also used in ZIP and gzip compression.

Lempel-Ziv-Welch (LZW) com­pres­sion is a lossless com­pres­sion algorithm that per­forms a lim­ited ana­lysis of data. It’s used in GIF and some TIFF file formats.

Lossy Com­pres­sion

There are a number of lossy com­pres­sion methods, some of which can be com­bined with lossless methods to create even smaller file sizes. One method is redu­cing the image’s color space to the most common colors within the image. This is often used in GIF and some­times in PNG images to result in smaller file sizes. When used on the right types of images and com­bined with dithering, it can result in images nearly identical to the originals.

Trans­form encoding is the type of encoding used for JPEG images. In images, trans­form coding aver­ages out the color in small blocks of the image using a dis­crete cosine trans­form (DCT) to create an image that has far fewer colors than the original.

Chroma sub­sampling is another type of lossy com­pres­sion that takes into account that the human eye per­ceives changes in bright­ness more sharply than changes of color, and takes advantage of it by drop­ping or aver­aging some chroma (color) inform­a­tion while main­taining luma (bright­ness) inform­a­tion. It’s com­monly used in video encoding schemes and in JPEG images.

2. Dif­ferent File Types

For the pur­poses of this art­icle, we’re only going to focus on three file types, those most com­monly found in web design: PNG, JPEG, and GIF. While there are other image formats out there that take advantage of com­pres­sion (TIFF, PCX, TGA, etc.), you’re unlikely to run across them in any kind of digital design work.

GIF

GIF stands for Graphics Inter­change Format, and is a bitmap image format intro­duced in 1987 by Com­puServe. It sup­ports up to 8 bits per pixel, meaning that an image can have up to 256 dis­tinct RGB colors. One of the biggest advant­ages to the GIF format is that it allows for anim­ated images, some­thing neither of the other formats men­tioned here allow.

JPEG

JPEG (Joint Pho­to­graphic Experts Group) is an image format that uses lossy com­pres­sion to create smaller file sizes. One of JPEG’s big advant­ages is that it allows the designer to fine-tune the amount of com­pres­sion used. This res­ults in better image quality when used cor­rectly while also res­ulting in the smal­lest reas­on­able file size. Because JPEG uses lossy com­pres­sion, images saved in this format are prone to “arti­facting,” where you can see pixel­iz­a­tion and strange halos around cer­tain sec­tions of an image. These are most common in areas of an image where there’s a sharp con­trast between colors. Gen­er­ally, the more con­trast in an image, the higher quality the image needs to be saved at to result in a decent-looking final image.

PNG

PNG (Port­able Net­work Graphics) is another bit­mapped image format that uses lossless data com­pres­sion and was cre­ated to replace the GIF image format. The PNG format was largely unsup­ported by Internet Explorer for a long time, making it less com­monly used than GIF and JPEG formats, though it’s now sup­ported prop­erly by every major browser. PNG files sup­port palette-based color (either 24-bit RGB or 32-bit RGBA), grey­scale, RGBA and RGB color spaces. One of PNG’s biggest advant­ages is that it sup­ports a number of trans­par­ency options, including alpha channel transparency.

3. Choosing a File Format

Each of the file formats spe­cified above are appro­priate for dif­ferent types of images. Choosing the proper format res­ults in higher quality images and smaller file sizes. Choosing the wrong format means your images won’t be as high-quality as they could be and that their file sizes will likely be larger than necessary.

For simple graphics like logos or line draw­ings, GIF formats often work best. Because of GIF’s lim­ited color palette, graphics with gradi­ents or subtle color shifts often end up pos­ter­ized. While this can be over­come to some extent by using dithering, it’s often better to use a dif­ferent file format.

For photos or images with gradi­ents where GIF is inap­pro­priate, the JPEG format may be best suited. JPEG works great for photos with subtle shifts in color and without any sharp con­trasts. In areas with a sharp con­trast, it’s more likely there will be arti­facts (a multi-colored halo around the area). Adjusting the com­pres­sion level of your JPEGs before saving them can often result in a much higher quality image while main­taining a smaller file size.

For images with high con­trast, espe­cially photos, or illus­tra­tions with lots of gradi­ents or con­trast, the PNG format is often best. It’s also the best option for trans­parent images, espe­cially those that need par­tial trans­par­ency. PNG files are often larger than JPEGs, though it depends on the exact image. PNG files are also lossless, meaning all the ori­ginal quality of the image remains in tact.

Here’s an over­view of which file types work best for each type of image:

GIF

• If anim­a­tion is required.
• Line draw­ings and simple graphics.

JPEG

• Photos, espe­cially without high contrast.
• Screen­shots, espe­cially of movies, games, or sim­ilar content.

PNG

• Line art, illustrations.
• Photos with high contrast.
• Trans­par­ency, espe­cially alpha channel transparency.
• Applic­a­tion screen­shots or other detailed diagrams.

And here’s an over­view of which formats to avoid for each type of image:

GIF

• Images with gradients.
• Photos.

JPEG

• Images with high contrast.
• Detailed images, espe­cially diagrams.
• Simple graphics (the file sizes are larger).

PNG

• Photos with low con­trast (file sizes are larger).

4. Image Com­pres­sion in Print Design

While the bulk of this art­icle has focused on image com­pres­sion in web design, it’s worth men­tioning the effect com­pres­sion can have in print design. For the most part, lossy image com­pres­sion should be com­pletely avoided in print design. Print graphics are much less for­giving of arti­facting and low image quality than are on-screen graphics. Where a JPEG saved at medium quality might look just fine on your mon­itor, when printed out, even on an inkjet printer, the loss in quality is notice­able (as is the artifacting).

For print design, using file types with lossless com­pres­sion is prefer­able. TIFF (Tagged Image File Format) is often the pre­ferred file format if com­pres­sion is neces­sary, as it gives options for a number of lossless com­pres­sion methods (including LZW men­tioned above). Then again, depending on the image and where it will be printed, it’s often better to use a file type with no com­pres­sion (such as an ori­ginal applic­a­tion file). Talk to your printer about which they prefer.

Fur­ther Resources

• When and How to Use Internet Image Formats
  A great over­view of file formats with examples.
• Image com­pres­sion
  Wikipedia’s take on image compression.
• An Intro­duc­tion to Image Com­pres­sion
  The begin­ning of a multi-part series on image com­pres­sion with tons of tech­nical information.
• JPEG Image Com­pres­sion FAQ, Part 1/2
  An excel­lent series of questions-and-answers about the JPEG format, including inform­a­tion about compression.

About the author

Cameron Chapman is a pro­fes­sional Web and graphic designer with over 6 years of exper­i­ence. She writes for a number of blogs, including her own, Cameron Chapman On Writing . She’s also the author of Internet Famous: A Prac­tical Guide to Becoming an Online Celebrity.