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?
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.
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).
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.
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.
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.