Why aren't images in Wikipedia displayed?

How are images displayed on screen by code?

• My dad has always had this fascination with images on the internet and how they are put onto the screen by code. As a beginner programmer who has just recently gotten into the magical land of print functions and class files, he asked me how images are displayed on a screen by code. He always thought that it was binary code, however I'm not a hundred percent sure, and I wanted to find out for him.

• Answer:

  First, a little about how we perceive images and then the details about how it is displayed on the computer screen. Every object's color we see is a composite of Red, Green and Blue components. The mixture of these primary colors in different proportions produces the entire spectrum of colors we can see. There are two ways we can understand this - One is the additive color system and the second is the subtractive color system. In an additive color scheme, we understand colors as a mixture of primary colors - Red, Green and Blue (RGB). For example, Yellow is an equal mixture of Red and Green colors. White is an equal mixture or red, green, blue components. In the subtractive scheme, we understand colors based on what quantities of primary colors are absorbed by an object and what is reflected off of it. For example, an object in white light that absorbs no wavelengths of the visible light spectrum appears white because it reflects everything. Similarly, an object appears black because it absorbs everything and reflects nothing. How colors are represented in a computer and rendered on the screen: In a computer, the primary colors Red, Green and Blue are represented by bits. These bits are rendered by tiny display units called pixels. The display unit is a huge grid of individual pixels and each pixel can display a mixture of primary colors. Now if you have one bit for each color RGB, how many different colors could be represented with it? The answer is 2^3=8 colors. Each bit can take a value 0 or 1. R G B                             R G B                R G B                   R G B 0  0 0      = Black             1 0  0  = Red      0  1 0 = Green       0 0  1 = Blue R G B                             R G B                R G B                R G B    1  1  1     = White             1  1 0 = Yellow   0  1 1 = Cyan     1  0  1  = Magenta Computers usually deal with 8 bits of information for every color for each pixel. So each component R,G or B can take 256 different values. That's 256 different shades of Red, Green and Blue or 256^3 = 16 million different color combinations that can represent virtually any color possible. An image file like bitmap (.bmp) consists of color data for each pixel and color in a grid called the raster. You can visualize the raster as follows: Each square represents a pixel and for each pixel, the image file holds the exact mixture of Red, Green and Blue colors. On a monitor, there are thousands of pixels close to each other. They are so tiny that the human eye cannot spot them. This is the secret of producing a life like image on screen. Because the pixels are so densely packed (On a 15 inch screen with resolution of 1366x768, there are 104 pixels per inch (PPI), the human eye cannot distinguish between individual pixels. This raster data is then mapped to the screen where it is displayed. Each pixel takes the color corresponding to it's position in the raster data. See the image below. On the left side is the image that you normally see. But when you zoom in, you can see individual pixels taking different colors. How are pixels actually rendered on screen? This depends on the type of monitor. In the old days, we had the Cathode Ray Tube (CRT monitor). In a CRT monitor, there exists a device called the electron gun which shoots electrons onto a phosphor screen. Phosphor is a fluorescent material and glows when electrons bombard them. The color produced by the phosphor element depends of the energy of the electrons which is controlled by the electron gun. The electron gun shoots electrons and the trajectory of electrons is controlled by magnetic deflections. Based on the raster data, the electron gun starts at the top left and shoots electrons line by line at the desired energy based on the color that is to be produced at that point. Once it reaches the bottom of the screen, it goes back up and repeats. This process is called scanning and the rate at which it happens is called the refresh rate. We have come a far way from CRTs and now have TFT LCD (Thin film transistor Liquid Crystal Display) screens. These screens work very differently. They rely on a special property of Liquid Crystals in the presence/absence of an electric field. Liquid crystals in a twisted nematic state reorient polarized light. In a LCD display, the liquid crystal is sandwiched between two polarizers that are 90 degrees out of phase (1 and 5 in the figure below are polarizers). When light passes through the first polarizer, it gets horizontally oriented. When there is no electric field, the Liquid crystal reorients this light and brings it in phase with the second polarizer. When an electric field is applied, the molecules in the liquid crystal align with the field and untwist. In this state, it doesn't reorient the light. Since the light is 90 degrees out of phase with the second polarizer, it cannot pass through it. White light source is used to illuminate the panel and filters are used to produce color. In a  TFT LCD, the electric field is controlled by thin silicon transistors arranged in a grid. Each pixel in the grid has a liquid crystal element sandwiched between two capacitive plates supplied by the transistors. By turning the transistors on and off, we can control the intensity and color produced by the pixels.   The hardware takes care of rendering the image and the device drivers know how to communicate the raster to the hardware (it's hardware specific). The only thing left is to create the image file. There are different formats, but they all contain the RGB information about pixels.