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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma