 |
< BACK TO ARTICLE INDEX
What type of image file is
best?
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. We recommend
that you make all your images at 72 dpi resolution (technically,
any dpi resolution will display in a web browser, but 72 dpi is
the standard and assures that an image will display at the size
you intend without reducing it (or worse yet enlarging it) with
your html editor or CMS controls.
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. GIFs can be animated. (Generally speaking, Flash
(.swf) files will produce smoother animations with smaller file
sizes. Read more about
Flash files.)
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.
 |
|
 |
|
 |
|
|
|
|
|
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. |
|
GIF,
32 colors, no dither, 16K. Yuck! Without the dither a GIF
has no chance of producing a smooth color gradation. |
|
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).
 |
|
 |
|
 |
|
 |
|
|
|
|
|
|
|
| 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." |
|
This
is a JPEG at 80 Quality. The relatively large 12K file size
is necessary to produce an acceptable image quality. |
|
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. |
|
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 bold
image with no graduated or blended colors that will typically reproduce
best as a PNG or GIF.
 |
|
 |
|
 |
|
 |
|
|
|
|
|
|
|
| 32-color
GIF, just 4K. |
|
32-color
PNG, also just 4K. |
|
JPEG
at 5 quality, only 4K but very poor image quality. |
|
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 on a colored background? JPEGs wont's work, your only choices
will be GIF or PNG. (Read more about working
with transparent images.)
|
|
|
|
|
|
ShareThis