Digital images are regular arrays of colored pixels (picture elements), and are characterized by three properties:

1. size is the height and width of the image in inches, pixels or whatever (not to be confused with the image's file size).
2. resolution is the number of pixels per unit distance.
3. bit depth is the number of bits per pixel.  A black-and-white image needs a bit depth of one; a greyscale or 256-color image has a bit-depth of 8, and a "true-color" image has a bit depth of at least 24.

The most iimportant rule in preparing images for the Web is to keep the file size small!  One small image typically requires more download time than a very large text page.  There are lots of impatient users with slow network connections who simply won't wait for slow downloads, so you need to keep your graphics files small enough to download at reasonable speed.  Some rules of thumb for minimizing image file sizes:

• Limit the image resolution, 72 dpi is usually good enough.
• Don't use more bit depth than you need.
• Use PNG or GIF format for diagrams and other images with blocks of uniform color, JPEG format for photographic images.
• When creating JPEG or PNG images, experiment with different compression levels and use the highest level that still provides acceptable image quality.
• Pay attention to the size (dimensions) of the image.  Don't use a full-screen image if you can you make your point just as well with a 2" by 4" image. Or you might include a smaller "thumbnail" version of the image on your page that links to the big version in all its glory.

The Web supports three basic image file formats: GIF, JPEG and PNG.

GIF format

Compuserve's GIF (Graphic Interchange Format) format uses "indexed" 8-bit color and 72 dpi image resolution.  The 256 colors allowed by the 8 bit color depth are chosen from 2563 = ~16.7 million possible colors (256 levels of R x 256 levels of G x 256 levels of B), and are indexed in the image's color table.  Then each pixel's byte value simply refers to an index value in the color table.

When saving images in GIF format, the choice of palette can be critical.  Most image editing programs offer several options for converting 24-bit images to 8-bit GIF.  If available, you should generally use an adaptive palette, i.e. a custom palette based on the relative frequencies of colors in that image.  This reproduces the original image much more accurately than a standard palette, which contains 256 pre-defined system colors, or a web palette that reserves 40 colors for the browser itself and uses only 216 colors in the image.  A web palette is only useful if a significant number of your page's visitors are using 8-bit displays.

Tonal gradations in 24-bit images get pixelated or patchy when converted to GIF.  The effects of alternative paletting are shown in the family photo below.   Compared to the adaptive palette, the standard palette has an insufficient number of light blue colors to render the background very well.

Dithering allows GIF's to give the appearance of having more than 256 colors by interspersing pixels with different colors to simulate color blending.  In the third image, above, dithering has largely compensated for the standard palette.

Note that there are actually two GIF standards: GIF87a and GIF89a.  All GIF's can be interlaced so that they display in four successive passes through the image (12.5%, 25%, 50% and 100%).  This makes the image seem to appear quicker and gradually sharpen.  A non-interlaced image will simply paint from top to bottom.  Interlacing increases file sizes slightly.

GIF89a files can also include specified transparent colors, so that you can blend a GIF's background into any web page background.  The GIF89a format also supports animation; you can sequence a set of static GIF's as a single animated GIF file.  You can find various free GIF manipulation utilities on the web that allow you to set colors in the palette to transparent or create animations.

GIF uses a lossless compression algorithm known as LZW that is based on run-length coding.  Run-length coding basically abbreviates 000000000011100000000022222 as 10x0 3x1 9x0 5x2.   Thus the GIF format is best suited to images with a limited number of colors and long (horizontal) runs of uniform color values; JPEG is usually better for photographs.

To minimize GIF file sizes, minimize bit depth (e.g. via Adobe Photoshop's Adaptive Palette), and use dithering only where necessary.
 

JPEG format

The JPEG (Joint Photographic Experts Group) format supports 24-bit color in variable image resolution.  The compression algorithm sections the image into 8 x 8 blocks of pixels, and calculates cosine transforms that approximate the intensity and hue shifts within each block.  The file stores the cosine transform parameters rather than the actual pixel values.  This is a "lossy" format, but very efficient for photographic images.

JPEG supports varying trade-offs of image quality for file compression.   Image areas with smooth tonal gradients compress much better than areas with high tonal variation.

JPEG's are inherently 24-bit, so reducing bit-depth doesn't change file size.  Most image editing packages let you set the level of JPEG compression, trading off some image quality for lower file size.  Some editors can create customized (or "optimized") color tables for JPEG's, which replicate colors more accurately while yielding slightly smaller file sizes.  You can increase JPEG compression efficiency by blurring areas of your image where detail is not important.

JPEG's with very high compression will exhibit blurring or discernible blocky artifacts when you zoom in on small areas of the image.  You can often improve JPEG compression efficiency by applying a smoothing ("low-pass") filter to blur a photographic image slightly before you save it as a JPEG.  Similarly, when converting an 8-bit image to JPEG, you can often get better results by applying some smoothing to the image first.

Progressive JPEG's are interlaced, and are slightly smaller than standard JPEG's.

JPEG is generally not recommended for diagrams, maps or other images with high-resolution linework.  Compare the map fragments below.  Both of these maps are View exports from ArcView.  The left version was exported as a Windows Bitmap (BMP) and converted to GIF.  The right version was exported directly to JPEG.

Note that the loss in image quality from JPEG compression is additive: each time you edit and re-save a JPEG, its quality deteriorates.  Cropping and resizing can generate artifacts by shifting the borders of the 8x8 image pieces.  If you think you will be re-editing an image, keep a version of it in a non-lossy format (TIFF or whatever) so you avoid compounding the JPEG compression effects.
 

PNG format

The PNG format was created as a non-proprietary alternative to GIF.  It has better compression efficiency and supports 24-bit images. 

Some image tricks

You can use blank images as page placeholders to control spacing or layout.  How did I get just the first line of this paragraph to indent?  By inserting a tiny (1 x 1 pixel) transparent GIF image, resized to a width of 50 pixels.  The embedded tag is

   <IMG SRC="1x1transparent.gif" HEIGHT=1 WIDTH=50>
 

Another trick is to create vertical rules (equivalent to sideways <HR>'s) to set off a block of text, position and size little colored tiles like this. The embedded tag here is:

  <IMG SRC="1x1blue.gif" HSPACE=10 HEIGHT=70 WIDTH=4 ALIGN=LEFT>
 
To size a vertical rule's height to be exactly consistent with the height of the block, place the vertical rule and text block in side-by-side cells in a table.

Image editing strategies

When creating or editing images, you should always work in RGB color mode, not indexed color mode.  If you are going to palette your image to 8-bit color, do this once, as a last step.  Avoid multiple conversions between 24-bit and 8-bit color, since each 24-to-8 conversion can degrade image quality further.  Keep a 24-bit version of your image in case you need to do re-editing.

Since dithering reduces compression efficiency, avoid dithering or smooth graphics unnecessarily.

You can use anti-aliasing in text withing graphics to obtain smoother-looking text characters.  Compare the two examples here generated from Adobe Photoshop; note how anti-aliasing also improves character spacing.  Anti-aliasing increases smoothness by adding a slight blur to the curved edges of letters, but this can increase the number of colors in the image, and increase file size slightly.  Anti-aliasing is generally worthwhile for all but the smallest text elements (10 point or smaller).

Note that anti-aliasing can impair the effect of transparent backgrounds by leaving a discernible halo around image features.

Putting your text in graphics gives you absolute control over how it displays, but isn't generally advisable.  Graphics take a lot longer to download, their content is lost to non-graphical browsers (including Braille and speech devices), and they cannot be indexed or searched.

Be aware that images created on a Windows PC may look washed out on a Mac, and images created on a Mac can look overly dark on a PC, because of different default brightnesses.  You can control image brightness by adjusting the gamma value of your image.  Typically a gamma value of 2.2 will be suitable for either platform.  Note that Adobe Photoshop version 4 uses a Mac default gamma value, while version 5 uses a Windows default gamma. 

Image-mapping

Image mapping makes mouse-clicks in different portions of an image link to different things.  You can do server-side image-mapping via the server's cgi-bin imagemap utility, but client-side imagemapping works quicker and is just as simple.  Here's an illustration.

Take the image to be mapped, and determine the basic shapes you want to map in it.  You can define

• rectangles by upper-left and lower-right pixel coordinates (X_UL,Y_UL,X_LR,Y_LR) referenced from the image's upper left corner.
• circles.by center coordinate and radius (X,Y,r)
• polygons by coordinates delineating the perimeter (X₁,Y₁,X₂,Y₂,X₃,Y₃,...)

Use an image editing program to determine the pixel coordinates.  The include a <MAP> section in your document defining the shapes:

<MAP NAME="header">
<AREA SHAPE="rect" COORDS="213,1,360,180" HREF="http://www.trepan.com">
<AREA SHAPE="circle" COORDS="158,196,62" HREF="http://en.wikipedia.org/wiki/Trepanation">
<AREA SHAPE="rect" COORDS="115,268,360,288" HREF="http://www.theonion.com">
<AREA SHAPE="rect" COORDS="1,230,107,288" HREF="http://hatsofmeat.com/photos.html">
</MAP>

Then reference the NAME of the MAP tag in the <IMG> tag:

<IMG SRC="trepan.gif" USEMAP="#header" WIDTH=360 HEIGHT=288 ISMAP>

Here's the imagemapped GIF based on this code.  Try it out.  (Not a tanning parlor!)

Faking imagemaps with tables

Imagemaps are actually declining in use, since compositing image pieces in tables offers just about the same functionality.  You can use your image editor to chop the image up into rectangular pieces and tile these in a table. Tables are discussed in detail in the next chapter.

This approach offers several advantages.  In a table, each image piece can have its own ALT= text description.  Also, mouseovers work much more efficiently in tables, since the client pre-loads one alternative version of each piece rather than multiple versions of the whole image.

When you construct an image with tiled pieces in a table, you should specify table and cell sizes in pixels so that each cell encloses its tile exactly.

When you composite image pieces in tables, you need to be sure the spaces beteween the tiles are eliminated.  First set BORDER, CELLPADDING and CELLSPACING all to zero in the <TABLE> tag.  Then make sure your code has no extra spaces or returns in the table data cells: <TD><IMG SRC="tile2.gif"></TD>.  This will require keeping each <TD> element on a single line in your code.  Although closing </TD> elements are usually optional, omitting them can also cause unwanted white space.

Some browsers may collapse empty cells completely and not show their background colors.  To get empty cells to display a background color or whatever, include a &nbsp; character or <BR> tag.