20/20 Background and Notes

This section of the help contains topics that will aid in your understanding of graphic formats, thus enabling you to better use 20/20.  A list of topics include:

• What the heck is display resolution?
• Bits, Bytes, and Pixels
• What are Palettes?
• True Color
• BMP vs JPEG vs GIF vs ?

What the heck is display resolution?

Your display resolution is a fancy way of referring to the maximum number of colors you can view on your screen.  It is dependant on the type of graphic card and device driver you have installed.  Most graphics device drivers allow you to control the display resolution.   At the bottom of the Display options tab in the preferences dialog, 20/20 displays your current resolution setting.

You can normally change your display resolution by right-clicking on your desktop and then click on "Properties".  This will bring up the "Display Properties" dialog.  Click on the "Settings" Tab.  There will be field named "Color Palette".  This field controls your display resolution.   Choose the highest resolution your driver is capable of.  If the highest value available is 16 colors, you'll need to either update your graphics card, or you'll need to install the correct driver for your graphics adapter. 

20/20 will work in all display modes, however not all of its features are available when your resolution is set to 8-bits (256 colors) or less.  The display resolution not only affects how your images appear, but also affects how your images are stored, and that depends on the format that your image is stored.

Bits, Bytes, and Pixels

This section describes how images are physically displayed and stored in graphics files.  It also describes why some graphic file types are larger than others even though the same image is being stored.

Your display is made up of individual picture elements or "pels".   Picture elements are commonly referred to as pixels.  The number of pixels your computer is capable of displaying depends on your display settings.  Windows normally defaults to 640 pixels across by 400 pixels down (640 x 400).  This can also be changed in the "Display Properties" dialog (see above).  It is interesting to note that the amount of memory that is used by each open image is dependant on the setting of your display resolution.  Let's take a look at why.

A little programming: There are 8 bits in a byte.  For our purposes, a byte is the unit used to measure memory.  If your computer contains 32Mb (megabytes) of memory it actually contains 33,554,432 individual bytes of memory.  There are 1,024 bytes in a single megabyte of memory.

Windows stores and displays images internally in what is called a bitmap.  When an image file is loaded, it must first be converted to a window's bitmap before it can be displayed.  The amount of memory the bitmap occupies depends on the display resolution.  If your display resolution is set to 1 bit (two colors: black and white) and the size of your image is 640 x 400, it would take 32,000 bytes of memory to hold the image.  How did we come up with that?  Well, there are 640 pixels across and each pixel requires 1 bit to determine its color (Display resolution equals 1 bit).   Since there are 8 bits in a byte, each 640 pixel line occupies 80 bytes (640 divided by 8). We need to multiply the 80 bytes per line by the number of lines: 400.   The result is 32,000.

How much memory is used for 16 and 256 color display resolutions?  We can use the same calculation used above.  For 16 colors (4 bit resolution), each pixels requires 4 bits to determine its color.  So 640 pixels (1 line) requires 2560 bits (640 multiplied by 4).  2560 bits is translated to 320 bytes (3560 divided 8 bits per byte).  We multiply the number of bytes per line by the number of lines (400).   So, a 16 color image 640x400 requires 128,000 bytes of memory.

A 256 color image (8 bits per pixel) requires 256,000 bytes of memory.  See a pattern here? 4 bits requires four times as much memory as 1 bit, and 8 bit two times as much as 4 bit.

If 1 bit can hold two values: 0 and 1, its fairly obvious how a 1 bit pixel is able to determine it's color. Black equals 0 and White equals 1.  If  4 bits can hold 16 possible values and 8 bits can hold 256 possible values, how can those values be translated to colors?  Well, in order to understand how, we need to introduce a new concept: windows palettes.

What are Palettes?

Palletized surfaces need palettes to be meaningfully displayed. A palletized surface, also known as a color-indexed surface, is simply a collection of numbers where each number represents a pixel. The value of the number is an index into a color table or palette. Surfaces that use a 16-bit or greater pixel format do not use palettes.

A palette represents an indexed color table that has 4, 16 or 256 entries to be used with a color indexed surface. Each entry in the palette is an RGB (Red, Green, Blue) triplet that describes the color to be used when displaying pixels within the surface. By default, Windows defines color as a combination of three primary colors - red, green, and blue. Windows identifies a color by giving it a color value (sometimes called an RGB triplet), which consists of three 8-bit values specifying the intensities of its color components. Black has the minimum intensity for red, green, and blue, so the color value for black is (0, 0, 0). White has the maximum intensity for red, green, and blue, so its color value is (255, 255, 255).

A 16 color (4 bit) palette consists of 16 RGB color values.  For example if we have a palette containing the following values:

Each pixel is able to determine its color by referencing the palette.   Looking at a the first four pixel index values: 5, 3, 1, and 9, their pixels colors would be yellow, green, white, and purple, respectively.

True Color

True color images are images where each pixel is represented by 16 bits or greater.   For the sake of simplicity we'll look at how 24 bit images are stored.  24 bit images require 24 bits or 3 bytes of memory for each pixel to determine its color.   Rather than using a palette, each pixels RGB triplet is stored in memory.  So, using our 640x400 pixel image example, we can see that that an image this size requires 768,000 bytes of memory: (640 pixels multiplied by 3 bytes per pixel, multiplied by 400 lines.)

BMP vs JPEG vs GIF vs ?

A window's bitmap file is usually stored as it is represented in memory.   Therefore, a 24 bit image would take approximately 768,000 bytes of disk space.   The JPEG format is also capable of storing 24 bit images, but applies a compression algorithm to the image data before saving it.  The compression is similar to that used by most Zip utilities.  The amount of compression that can be achieved depends on the quality you want the image stored.  At 100% quality, JPEG essentially compresses the bitmap data.  You could achieve similar results by running a bitmap file through a Zip program.  If you are willing to sacrifice some of the image quality, JPEG is capable of obtaining even greater compression.

What kind of space savings are we talking about? Well, we captured a desktop and saved it as a bitmap file and it took 921,654 bytes (32 bit display resolution).  We then saved the same image in the JPEG format at 75% of the original quality.  The JPEG image required 33,016 bytes of disk space.  About a 96% savings in disk space.   This is why you rarely see web pages that contain images in bitmap format.

The same image store in the GIF file format, occupied 25,597 bytes of disk space.   GIF is able to achieve better storage results because it saves images in an 8 bit resolution (256 colors).

Contents