Image Usage:
Images in Web pages are generally either photographic or simply "graphic":
- Photographs often have a full tonal range, a lot of detail and subtle gradations from light to dark.
- Graphic images are less complex utilizing fewer colors and color gradations - usually appearing on Web pages as simple text treatments or logos.
Regardless of the kind of image usage, the goal is to produce the best quality image in the smallest file size possible. Overly large image files are the primary cause of slow-loading Web pages (and the resulting reduction in number of site visitors).
Image File Types:
There are three image file types supported by modern browsers and each has advantages and disadvantages:
- GIF (Graphics Interchange Format) is limited to 256 colors so works well for simple graphic images with large areas of solid color. Of the three image types, GIF produces the smallest file size when used with uncomplex images. It can produce banding in photographs and tonal gradients. It is the only of the three common image formats that allows animation to be incorporated directly into the image.
- JPEG (Joint Photographic Experts Group) is a "lossy" compression method that allows the user to vary the amount of compression to get the best compromise between file size and quality. Lossy means that actual image information is thrown away every time a JPEG is saved so JPEG images should not be re-opened and re-saved.
- PNG (Portable Network Graphics) unlike GIF and JPEG, PNG was designed specifically for use on the Internet. Because of this, it overcomes several limitations of the GIF format providing improved transparency and less banding.
All three of these formats are in widespread use.
Transparency
Images that allow transparency greatly expand creative options for Web designers by allowing background elements to show through the image.
Both GIF and PNG allow transparency. JPEG does not. The images below illustrate the differences in how the image formats handle transparency. If you click the gray or red radio button, you'll see that GIF only allows a single color (white in these examples) to be transparent. Any colors other than white, such as the subtle range of grays in the drop shadow or anti-aliasing around the S, maintain full opacity. In contrast, PNG allows transparency throughout its color range so images with feathered edges can anti-alias smoothly over any background.
 JPEG  GIF  PNG  JPEG  GIF  PNG |
Photographs
Photographs present special problems for Web designers because they contain a great deal of information which leads to very large file sizes. File sizes are a concern on the Web because they affect how long pages take to load into the browser.
GIF - 29KB (note banding in sky). For photos, GIF is least useful because it does not produce the smallest file size and, due to its limited color palette, yields a low-quality image with banding where smooth gradations should occur.
PNG - 41KB. PNG produces better photographic quality than GIF but does not compress photos as efficiently as JPEG.
JPEG - 16KB. JPEG remains the best choice for photos yielding both smaller files and higher image quality.
JPEG Compression
The amount of compression in a JPEG is weighed against the reduction in quality that results. Image software usually presents the compression level on a sliding scale and indicates the resulting file size as is this example from Photoshop:
Since JPEG compression is lossy (meaning actual image data is lost in the compression process), over-compressed JPEGS have what are called "JPEG artifacts." These are blotchy-looking areas of pixilation that reduce photographic clarity and tonal smoothness.
File size is 53KB
File size is 12KB
