How to choose the best image file type?

All web images must be JPEG (.jpg), GIF (.gif) or PNG (.png) file formats, and must be RGB color mode (not CMYK like print images). TIF, EPS, PSD, BMP and other file types will not display in a web browser. The standard resolution for web images has always been 72 dpi but now some hi-resolution “retina” monitors display images at 144 dpi.

What file type for what purpose?

  • JPEG — use for full-color photographs or illustrations with a full range of color gradients (like watercolors or oil paintings or computer illustrations with gradated colors). Transparency is not possible with JPEGs.
  • PNG — use for line are, clip art, logos, graphical text and other images with solid lines and little or no gradated color variation. PNGs do allow transparency. PNG-8 (8-bit color depth) files are compatible with most browsers. PNG-24 files may not display in all browsers. Animated PNGs are not compatible with all browsers.
  • GIF — use for the same purposes as PNGs, but GIFs generally result in slightly larger file sizes for the same image quality. GIFs do allow transparency.
  • loadingGIFs and PNGs can also be animated as shown at right (although animated GIFs are compatible with more browsers at this point in time).

Examples

The captions on the following examples explain the good, the bad and the ugly of making the right choice of file type depending on the image being reproduced.

ashley200x300GIF16ditherashley200x300GIF32ashley200x300JPEG40sharp

Left: GIF file, 16-colors, diffusion dither, 18K. Note the “stippled” effect as the GIF tries its best to render the color gradients. A GIF is rarely as good as a JPEG at reproducing a photograph. Middle: GIF, 32 colors, no dither, 16K. Not good! Without the dither a GIF has no chance of producing a smooth color gradation. Right: JPEG, 40 quality, 8K. Best choice hands down. Best looking, smallest file size. A perfect example of why a JPEG is almost always the best choice for a full-color photo.

The next example is challenging because it has elements of a continuous-tone color image (the graduated gray background) and elements of solid line artwork (the “art” text).

artsquare150pxJPEG10 artsquare150pxJPEG80 artsquare150pxGIF32 artsquare150px256colors6K

Left: This is a JPEG at 10 Quality. The 4K file size is good but the image quality is terrible. Note the artifacting, especially in and around the “a.” Second: This is a JPEG at 80 Quality. The relatively large 12K file size is necessary to produce an acceptable image quality. Third: This 32-color GIF is just 4K which is great, but the gradated background becomes banded due to the limited number of colors available. a PNG will have the same problems. Far right: This is a 256-color PNG file. Weighing in at just 8K, this is clearly the best choice of the four options. A GIF will produce a comparable result as long as is is set for 256 colors.

Below are examples of a simple line-art image with no graduated or blended colors. These types of images will typically reproduce best as a PNG or GIF.

artsquareBLK150pxPNG32artsquareBLK150pxJPEG5artsquareBLK50pxJPEG100

Left: 32-color PNG, just 4K (a GIF will be very similar). Middle: JPEG at 5 quality, only 4K but very poor image quality. Right: JPEG at 100 quality results in an acceptable image quality, but at 16K it is much larger than the GIF or PNG.

Transparency

Need to place an irregular-shaped image over a colored background or on top of another image? JPEGs wont’s work because they do not allow background transparency. Your only choices will be GIF or PNG. Read more about working with transparent images.

 

Leave a Comment

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.