Webwork
/
Image Types

Image Usage:

Images in Web pages are generally either photographic or simply "graphic":

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:

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.

Black   Gray   Red   White
4-color
JPEG
4-color
GIF
4-color
PNG
4-color
JPEG
4-color
GIF
4-color
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.

puebla
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.
puebla
PNG - 41KB. PNG produces better photographic quality than GIF but does not compress photos as efficiently as JPEG.
puebla
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:

jpeg-options

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.

puebla-high
This JPEG has been compressed at a setting of 70 (high quality).
File size is 53KB
puebla-high-detail
puebla-low
This JPEG has been compressed at a setting of 10 (low quality).
File size is 12KB
puebla-low-detail
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com