How Computer Screens and Printers Show Images

The ability to make a picture of a subject is one of the traits of humanity. One of the many methods to produce pictures is the mosaic. Over hundreds of generations our ancestors have been assembling various materials (shells, stones, ceramics, wood, bone, ivory and glass) into pictures. The picture below is a close up of a Roman owl mosaic. This technique is all around us today in almost every electronic device we use; computers, mobile phones, money dispensers, televisions, message boards, electronic books etc.

What are Pixels?

The images on the screens we view are made up of thousands of small dots or squares in a multitude of colors. In computer jargon these dots are called pixels. A pixel is the modern version of a mosaic tile. On a television, computer or mobile phone normally the pixels cannot be seen but use a magnifing glass and they are revealed.

Here is a magnified display with a single pixel highlighted.

Below is a magnified part of a letter O on an Amazon Kindle showing the tiny black an white capsules that make up the image. Pixels on electronic devices either emit light, filter light or reflect light to make the image visible to the human eye.

Here is a magnified display from a lazer printer's output.

Below is a magnification from an ink jet printer's output. The dots that form the final image are visible. Lazer and ink jet printing has made it possible for printing to be done at home and in offices.

On an electronic display each individual pixel is usually composed of three sub-pixels, one each of red, green and blue. These are the primary colors which can be combined in various portions to form other colors. By varying the brightness of each sub-pixel (controlling how much of each red, green and blue light is produced) different colors are perceived on the display. For printers a similar process occurs by printing more or less ink for each color available. The image below is a magnifaction of the letters R, for red, G for green, and B, for blue, in their respective colors. A portion is further magnified to show how only a part of the pixel is illuminated to generate a color.

Display Resolution

For a display the pixels are arranged in a square grid, this is known as a raster display. The number of pixels in the X-axis and Y-axis of the grid determines it's resolution. So a display that is 1024 pixels wide and 600 pixels high has a resolution of 1024×600 (1024 by 600). To get the number of pixels being used by the display the resolution is used for a calculation. For the 1024 by 600 resolution display just multiply the X and Y values. Therefore 1024 X 600 = 614,400 pixels, that is a lot of dots. But a modern full high definition televison (1080p HD) has a resolution of 1920×1080, that is 2,073,600 pixels, 2 megapixels – a very big mosaic. If each dot on a HD TV was 1cm square it would be a 14 square metre mosaic, an area a small house would fit into. Fortunately the size of the pixel is very small so the HD TVs can fit in our living room. The number of pixels in the X-axis and Y-axis of the grid determines the density of the display. If 1024 width pixels fitted into a 8 inch wide tablet display then the display density is 128 pixels per inch (PPI), also know as dots per inch (DPI). The higher the PPI (DPI) the crisper the image appears (provided it is a good quality image). For example the Apple iPhone 4S has a PPI of 326.

What is Pixelation?

Image files stored in computers or from digital cameras have a record of each pixel's color and position. The computer reads the file and using the color and position information plots the color onto the screen to build the image. Because the image is made up of dots as the image is magnified the dots become more and more visible. This results in the image becoming pixelated. To reduce pixelation the image needs to be created and stored at a very high resolution. The image resolution can be higher (have more dots) than the screen can display, in which case the computer shrinks the image to get it to fit on the display. This is what digital cameras do, they take pictures that can have eight times or more pixels than a HD TV. In this diagram the end of the statue's nose is shown magnified on a computer screen and print output and the pixels become visible. Pixelation is shown where the highlighted area is zoomed into on a computer.

A higher resolution of the picture would not pixelate as much on the zoomed in part but the dots would still be visible on the magnified screen and print, because their resolution would not change. In practice a image resolution of around six megapixels is good for most uses. It also means the computer is not working as hard to process all that data, the greater the number of pixels the longer it takes the computer to manipulate the image. Try reducing the image size taken by a digital camera and see the effect on picture quality and computer performance. It will be noticed that it is easier to manipulate a six megapixel than 16 megapixel image without really affecting image quality.

This article has shown that whenever you look at a device you are looking at a very good mosaic put together by the computer, but still designed by a human.

Image Sources

Images used in this article originated from the following sources, click the links to see the licensing conditions and author.

• http://commons.wikimedia.org/wiki/File:TFT_Pixel.png
• http://commons.wikimedia.org/wiki/File:It%C3%A1lica_Owl.jpg
• http://commons.wikimedia.org/wiki/File:Kindle_3_microcapsules.png
• http://commons.wikimedia.org/wiki/File:Color_Laser_Printer_Magnified.jpg
• http://commons.wikimedia.org/wiki/File:Moai_Rano_raraku.jpg
• http://commons.wikimedia.org/wiki/File:TrameQuadri.png
• http://commons.wikimedia.org/wiki/File:LCD_RGB.jpg
• http://commons.wikimedia.org/wiki/File:PrinterDots.jpg