Grayscale

Grayscale (some spell it greyscale) is a term that has supplanted the term monochrome when referring to a screen that does not support color images. It differs from pure black and white in that there are levels of gray in addition to black and white.

Introduction

The term grayscale is used in photography and computer screens to specify not only the lack of color but also the amount of definition that is used to describe an image. For example the chart on the right represents 16 discrete levels of grayscale. This is typically the high end limit for current e-paper screens (although the epson controller can support 32 levels). Other popular screen displays include 8 level grayscale, 4 level grayscale, and 2 level pure black and white (called A2). Of course a true grayscale as used in black and white analog photography would be continuous with no discrete separations. The limitations are caused by the nature of digital information where nothing is truly continuous. A JPG grayscale image has 256 levels which is hard to distinguish from continuous. GIF provides excellent compression for grayscale, particularly for line graphics. True modern photographs may use more that 8 bits even in grayscale. Some goes as far as 16 bits although 10 to 12 is likely enough. A TIF image and a PNG can store such an image.

In some settings the term black and white can also mean that grayscale is assumed. For example a black and white TV does grayscale and the term black and while photo also means grayscale.

Digital display

-

-

-

-

Digital computers and devices use numbers to represent everything inside the device. At the most basic level the numbers are binary, only 1 and 0 (called bits). Binary is a positional system like our decimal system except there are only two values. Counting starts as 1, 10, 11, 100, 101, 110, 111 and we only reached the decimal number 7. Of course there is also 0 and programmers like to start with 0 since they can get to 8 values with only 3 digits. As seen in the above you can only get to 4 with two digits even with use 0. Each time you add one bit you double the value you can reach.

The display behaves like memory and stores numbers. It uses those numbers to control the pixels you see on the screen. If you only had 1 bit per pixel everything on the screen would be only black (0) or white (1). (Actually they could be any two colors based on the hardware design of the screen, but for our purpose we'll call them black and white.) This is generally fine if all you want to show is text; our newspapers are mostly black and white as well. But what about pictures? Well if you look really close to a picture in your newspaper you will notice that it is made from really small black dots on a white background. Modern newspapers use such small dots that you may need a magnifying glass to see them. Computer screens also use dots to display information on the screen and again they may be small enough to require a magnifying glass to see them. Gray is achieved by varying the number of black dots in a given area of white background. If the black dots are really close the image is black but move them apart and the image is perceived as gray, trending toward white so long as the dots are small enough. Otherwise the image will look speckled. This technique of separating the dots is called dithering. However, the image will be better if we can vary the intensity of the black dot to produce a gray image, this way there is less likelihood of seeing the speckles. The less degree of change that there is between dithered dots the better it looks.

Grayscale displays

(In the discussion that follows 8 bit grayscale is used as a model represented with numbers from 0, black, to 255, white. In computer parlance these are Hexadecimal (hex) numbers from x00 to xFF.)

Adding even a little bit of gray improves images and can even improve the display of text to some degree. Using two bits per pixel allows 4 level grayscale; black, dark gray, light gray, and white although occasionally you may see only 3 in discussions showing half white and half black. You can't actually show half black and half white in a full 4 level gray scale display. You would have to resort to dithering the gray levels to achieve that. The actual values used are x00, x55, xAA, and xFF. (These values are marked on the image to the right with a hypen(-).)

Going to full 4 bit grayscale will achieve the display choices shown on the sample image. The hexadecimal values are x00, x11, x22, x33, ..., xDD, xEE, xFF. (Each value is decimal 17 higher than the previous.) This is a super set of the 2 bit grayscale values since all 4 of those values are in the set. An 8 bit grayscale would have increments of 1; x00, x01 x02, etc.

At first glance it would seem that you could use every other one of the 16 levels for an 8 level display but that would mean you didn't use the full range contrast of black to white. To have full values you need to go all the way from x00 to xFF. Unfortunately the 3 bit grayscale (8 levels) does not fit neatly into this scheme as there is no integer divisor for these values. The closes integer is 36 decimal and we end up with x00, x24, x48, x6C, x90, xB5, xDA, xFF. (the last three values were successively incremented by one to get all the way to xFF, although they could have been introduced anywhere.) As you can see, by comparing these numbers to the 16 level numbers, there is no direct correspondence so it is likely to see slight dithering on an 8 level display if an image was targeted specifically to a 16 level display.

Dithering

Dithering, as defined above is a technique to achieve visual grayscale levels beyond those supported by the hardware. (It is also used in color images when there is a need to represent a color image with a smaller color palette.) It tries to average a small area of the screen to the desired grayscale value by using dots at the next available level to pepper the display. In some cases it works well but other cases it can detract from the image by making it look speckled. There are some alternatives to using dithering. It some cases you are better just turning it off or limiting its use to predefined levels. You can also design fixed visual patterns to represent certain levels of grayscale. These patterns are known to be visually appealing and can easily double the effective grayscale levels.

Dithering is the technique used in newspapers to produce gray images and related to, but not quite the same as, the technique used in CMYK color imaging where it is called Halftone. (Halftone changes density of dots and sometimes the size.) It can also be used in the E Ink display A2 (black and white) mode where is can substitute for gray scale with a high update rate for images.

Lines and Fonts

Most people have seen what happens to a line drawn at an arbitrary angle on a computer display. It seems to have a case of the jaggies, where is goes along for a few pixels either horizontal or vertical and then jumps to a new row or column. The result look more like a saw edge rather than an straight line and is called aliasing. This problem can be mitigated with the use of grayscale to smooth the transition by adding a grayscale pixel or perhaps several to visually smooth this transition for the human eye. This is called anti-aliasing.

Most modern font sets are defined as lines making an outline of the shape of the font. These lines are subject to the same issue described above and the same fix can be applied. This can be critical for the look of italic fonts.

Bold fonts

At first glance it would seem that grayscale could be used to provide for regular weight fonts and bold fonts using a difference to how black they are. However, the contrast of the black and white on the display needs to always be as much as possible for the user comfort in reading. For this reason bold is normally implemented by making the lines defining the shape wider (thicker) rather than darker.

Color Conversion

Color images will often be converted to grayscale either automatically or by the user for use in eBooks. Tools can be used to do this automatically for digital images and JPEG even has a special grayscale mode that it supports for nearly losses images using 256 levels of grayscale using 8 bits per pixel which is essentially continuous to the unaided eye.

A digital color image is generally made by combining the outputs of 3 primary colors into one pixel. These colors have their own scale which may or may not be the same for each color. JPEG has 8 bits for each primary color thus they have 24 bits (3 bytes) per pixel. When translating that into grayscale the amount of each color is lost but the value is used to compute a combined brightness level for the image. As the different colors have a different amount of inherent brightness a formula must be used. The full brightness (grayscale level) is determined by using 30% of the red value, 59% of the green value, and 11% of the blue value to add to 100%. This is an exact mathematical value but to speed up the processing on a computer a slightly different ratio is often used. The values (11*R + 16*G + 5*B)/32 is easier to compute using simple integers. Note the values add up to 32 which is then divided by 32. 32 happens to be a number that is easy to divide by if you are a computer.

When converting, there is usually a correction factor, called gamma correction, that is applied. This is caused by the fact that an electronic display does not linearly match the human eye in so far as color brightness is concerned. This is another reason the ratio numbers, mentioned above, are different from the ideal ones.

Converting the image to grayscale can reduce the image size substantially due to the reduction in the number of bits needed to define a pixel and will also improve the time it takes to render the image on the screen. However if you leave the image in color the eBook Reader will be able to convert it on the fly to display. Converting to gray is a one way trip. Once converted you cannot reconstruct the original color image.

Color conversion performance

Using a checkerboard pattern in a PDF with full (100%), either red, green, or blue.

• The Kobos convert the red, green, and blue to 52%, 86%, and 26% of full white, respectively.
• The Kindle 2 converts to 50%, 33%, and 17%, respectively,
• The Kindle paperwhite 2 and Kindle Voyage convert to 9%, 35%, and 12%, respectively.

Interestingly, none of these match the commonly used grayscale conversion ITU-R BT.709 or BT.601, which are 21%, 72%, 7% and 30%, 59%, 11%, respectively, but the Kobos are definitely closest, proportionally, which explains why they look more natural. It is particularly strange that all of the Kindles weight the RGB components significantly differently than the ITU-R weightings (K2 has red weighted the highest, and PW2/Voyage have blue weighted more heavily than red). That seems clearly flawed, and would be trivial to correct.

For more information

• See https://www.google.com/search?q=grayscale+conversion+methods for more information.
• MobileRead discussion