Notes on Images

The U-2 graphics on my site come from many sources.

Many of these sources provide graphics with high levels of detail. But the result is that the graphic files are quite large.

On my site, I generally sacrifice some level of "quality" in order to reduce the file size of the graphic. This happens in two ways:

1. If a JPG file is "smaller" than the corresponding GIF file, I will use the JPG, and
    
2. I generally optimize JPG files to 75%.

Within the notes for the graphics of the U-2, you will see information tags. These tags tells you the relationship between the graphic that you see on my site and the original graphic which I obtained.

Thumbnails

The thumbnail versions of the images are generally reduced in size so that the smallest dimension (either width or height) is 150 pixels.

Large Images

The large versions of the images are generally presented in the same size as the original, but optimized as JPG to 75%.

Some sites, particularly NASA, provide multiple sizes of original images. In those cases I download the largest and highest resolution image. I use that high resolution image to derive the thumbnail and full size images.

I limit the full size image to 1000 pixels maximum (either height or width). So for most of the high resolution images, I reduce the size to 1000 pixels and then optimize the image, typically to 75%.

Hi-Res Cutouts

Whenever the large image I display is smaller than the high resolution image, I also include a "Hi-Res Cutout" from the high resolution image. This is a piece of the larger image, cut out just to give an idea of the resolution available. It is also optimized. Because the purpose is to give an idea of the resolution available, it is often optimized "more" (e.g., 30% instead of 70%) resulting in poorer quality but faster load time.

Cropping Labels and Frames

I sometimes crop images. I crop the images if they have either

1. labels, or

2. frames.

Labels are sections of an image, typically in white and typically below the actual image, which contain identifying information like the image ID, date, photographer, subject, logo of the agency, etc. NASA frequently uses labels for its images. Here is an example of an image with a label. If an image has a label, I crop the image to remove the label.

Frames are used around an image to increase the size of the image and to make it stand out. Frames may be used on two sides (top and bottom, left and right) or on all four sides. Here is an example of an image with a two-sided frame. Here is an example of an image with a four-sided frame. If an image has a frame, I crop the image to remove the frame.

Current Tools

I am currently using Paint Shop Pro 7.0 to perform the resizing and cropping, and Ulead Smart Saver Pro 3.0 software to perform graphic optimizations.

Web Design Tutorial: Pictures: Information about images on the web, including information about optimization.  ««»»