Dithering vs. Pixelation

Do you know the difference between pixelation and dithering of images on a web page? Read more to find out.

Dithering vs Pixelation, are two terms that many get confused about when talking about the world of web images. Both affect the quality of the image as seen on a computer screen, but they are the result of two very different processes.

Dithering is something that you might encounter in images displayed on a computer that have had their color depth reduced. It is most commonly seen with photos that start with a very high color depth where it may not be easily reduced to the color depth supported by computer graphics. Ultimately, it is a function of the graphics card or the graphics chip of the computer used to display the website. However, on older devices that use an 8-bit definition for each pixel (rather than 8 bits per red-blue-green color), only 256 colors may be displayed on the screen at one time. Why only 256 colors? Because when only using 8 bits, you can only count from 0000 0000 to 1111 1111 which is 0 to 255 or 256 possible colors for each pixel. While that may seem to be a lot of possible colors, it is not enough to truly represent all the colors in a photograph. Therefore, computer systems have two choices, they can Example of color ditheringeither replace a missing color with a color that is close to the original that it can support and thus introduce a color banding effect, or it can introduce noise, dithering, by mixing dots of two or more colors to simulate the missing color. If you look closely at the screen showing a dithered image, you might see some of these individual dots of color. Of course, most computer screens today support millions of colors so dithering is no longer needed.

Perhaps a simpler way to understand dithering is to look at pictures in your local newspaper. Most newspapers publish pictures using black ink on a white or beige colored paper. Yet the pictures appear to have shades of grey. If you use a magnifying glass to view the images, you can see that the image really consists only of various sized black dots on the paper. As the dots either grow larger or are placed closer together, the image appears darker. Fewer or smaller black dots in an area result in a shade of grey. If the dots are small enough, most viewers of the images in the paper do not even notice them. The same applies to the colors used in the Sunday Comics. However, when we are talking about images in the comics, the dots of color are not limited to black ink but could consist of yellow, blue, or red ink. Now that you are thinking about these three colors, think about what color ink you have in your computer printer. Do you have ink for hundreds if not thousands of colors? Of course not. Your printer simulates colors when it prints an image by using small dots of each of these three colors and even black to create shades. When you buy a printer, they usually list the dots per inch, or resolution, that the printer supports when printing. The larger the number of dots per inch, and thus the smaller the dots, the less noticeable the dithering is to create any color and to print color photos. Modern printers can even overlay two or more colors at the same position to achieve different colors without resorting to dithering of different colored dots. (You may have noticed that printing requires red, blue, and yellow ink while your computer screen requires red, blue, and green to produce colors. Perhaps we can get into that difference another time.)

Dithering also occurs when taking a high-resolution audio track such as a 24-bit resolution track and reducing it to a 16-bit resolution. Why do this? First, a 16-bit resolution track takes is smaller than a 24-bit resolution track and second, most people cannot hear the difference until they have extremely good audio equipment and great hearing.

In any case, dithering occurs when reducing the depth of a data stream either by reducing the number of colors in images or reducing the number of bits to reproduce sound in an audio track.

So, what is pixelation? Pixelation occurs when you take a smaller image and attempt to zoom into it, making it larger. Let’s say you start with an image that is 100 pixels by 100 pixels. That means that the image has a total of 10,000 total pixels. Each pixel has its own color. Now double the size of the image so that the image is 200 pixels by 200 pixels. The Pixelated Imageimage now has 40,000 pixels or 4 times as many. In effect, each pixel of the original image now is represented by 4 pixels. But if each original pixel had a single color, what color should the 4 pixels have? The easy solution is to use the same color for each of the 4 pixels. This technique however creates a visible block of each color pixel that degrades the quality of the image. Is it possible to use the color of surrounding pixels to provide each new pixel with a color that smooths out the image? Yes, but even that does not really improve the sharpness or clarity of the image as that would require creating information where no information existed before. While some sharpening is possible by weighing the transition colors, you will not get the clarity that you see on some TV shows where they take a fuzzy picture of a car, zoom into the license plate, and read with crystal clarity the numbers and letters. The only way to truly do that is with a higher resolution camera that supports a high number of pixels.

Anyway, that is all for today. Hope you had a good Easter weekend, Passover week, or Ramadan month for those of you who celebrate any of those.

C’ya next time.

Author: sharepointmike

I am interested in all things scientific and technical, but especially SharePoint, SQL Server, Power BI, and ADA.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: