IRT0180 Harjutus 2Värviruum, värvimudel.

Ekraanid ja pikslid.

8.02.2017

Color perception

3http://www.cambridgeincolour.com/tutorials/color-perception.htm

• People with normal vision needed three wavelengths to create the normal range of colors

• The human eye with normal vision has three kinds of cone cells, which sense light, with spectral sensitivity peaks in • short (S, 420 nm–440 nm),

• middle (M, 530 nm–540 nm), and

• long (L, 560 nm–580 nm) wavelengths.

• These curves are often also referred to as the "tristimulus functions."

Color model and color space

Color model

• Abstract mathematical model

• Describing the way colors can berepresented

• RGB, CMYK

Color space

• Set of colors

• Described by mathematicalmodel (color model) with a precise description of how the components are to be interpreted

Example: colors defined in different colormodels

color Wavelength Frequency Hex triplet sRGBB(r, g, b) CMYKH(c, m, y, k) HSV (h, s, v)

Red ~620–740[1][2] nm ~480–400 THz #FF0000 (255, 0, 0) (0, 100, 100, 0) (0°, 100%, 100%)

Green 495–570 nm ~575–525 THz #00FF00 (0, 255, 0) (100, 0, 100, 0) (120°, 100%, 100%)

Blue 450–495 nm ~670–610 THz #0000FF (0, 0, 255) (100, 100, 0,0) (240°, 100%, 100%)

Cyan 490–520 nm 610–575 THz #00FFFF (0, 255, 255) (100, 0, 0, 0) (180°, 100%, 100%)

Magenta Non-spectral color #FF00FF (255, 0, 255) (0, 100, 0, 0) (300°, 100%, 100%)

yellow 570–590 nm 525–505 THz #FFFF00 (255, 255, 0) (0, 0, 100, 0) (60°, 100%, 100%)

Black

Non-spectral acromatic color

#000000 (0, 0, 0) (0, 0, 0, 100) (–°, –%, 0%)

Gray #808080 (128, 128, 128) (0, 0, 0, 50) (--°, 0%, 50%)

white #FFFFFF (255, 255, 255) (0, 0, 0, 0) (-°, 0%, 100%)

6B: Normalized to [0–255] (byte)H: Normalized to [0–100] (hundred)

A comparison of RGB and CMYK color models

RGB

• Additive model

• Primary colors are red, green, and blue.

CMYK

• Subtractive model

• primary colors are cyan (C), magenta (M), yellow (Y), and black (K)).

http://www.cambridgeincolour.com/tutorials/color-perception.htm

A comparison of RGB and CMYK color models

• This image demonstrates the difference between how colors will look on a computer monitor (RGB) compared to how they will reproduce in a CMYK print process.

By RGB_CMYK_4.jpg: Annette Shacklett derivative work: Marluxia.Kyoshu (talk) - Made in Photoshop. Original was alsomade in Photoshop in 2003., Public Domain, https://commons.wikimedia.org/w/index.php?curid=9396397

Cylindrical-coordinate representations of points in an RGB color modelHSL stands for hue, saturation, and lightness (or luminosity), and is also often called HLS

HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness)

9By Martin Kraft - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=27580005

Chromacity diagram (värvsusalad)

10By BenRG and cmglee - http://commons.wikimedia.org/wiki/File:CIE1931xy_blank.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=32158329

• Why colors look different in different applications• Unfortunately there is no exact

consensus as to what loci in the chromaticity diagram the red, green, and blue colors should have, so the same RGB values can give rise to slightly different colors on different screens. (wikipedia)

Hue (värvitoon)

• Hue in the HSB/HSL encodings of RGB

• A color's "hue" describes which wavelength appears to be most dominant.

By w:ru:User:Kalan - Own work, Public Domain, https://commons.wikimedia.org/w/index.php?curid=1609109

Saturation (küllastus)

Intense vs dull• As saturation increases, colors appear

more "pure." As saturation decreases, colors appear more "washed-out.„[WhatIs.com]

• The saturation of a color is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths. The purest (most saturated) color is achieved by using just one wavelength at a high intensity (wikipedia) Saturation scale (0% at bottom,

corresponding to black and white).By Lefty (2006-03-04), inspired by Coyne Tibbets (CoyneT), 03/18/2005 - en:File:Saturationdemo.png, Public Domain, https://commons.wikimedia.org/w/index.php?curid=12123002

Hue and saturation

• A color's "hue" describes which wavelength appears to be most dominant.

• A color's saturation is a measure of its purity

13

http://www.cambridgeincolour.com/tutorials/color-perception.htm

Brightness (eredus)

• Brightness the attribute of a visual sensation according to which an area appears to emit more or less light

• Luminance (heleduskomponent) is radiant power weighted by a spectral sensitivity function that is characteristic of vision. • Chrominance (värvikomponent) is the color information in a signal.

• Lightness (heledus) is perceptual response to luminance.

RGB model and luminance–chrominance formats relationship• All luminance–chrominance formats used in the different TV and video

standards such as YIQ for NTSC, YUV for PAL, YDBDR for SECAM, and YPBPRfor component video use color difference signals, by which RGB color images can be encoded for broadcasting/recording and later decoded into RGB again to display them. These intermediate formats were needed for compatibility with pre-existent black-and-white TV formats. Also, those color difference signals need lower data bandwidth compared to full RGB signals.

• Similarly, current high-efficiency digital color image data compressionschemes such as JPEG and MPEG store RGB color internally in YCBCR format, a digital luminance-chrominance format based on YPBPR. The use of YCBCRalso allows to perform lossy subsampling with the chroma channels (typically to 4:2:2 or 4:1:1 ratios), which it aids to reduce the resultant file size.

15wikipedia

Color image pipeline

16By Knutinh (talk) - I created this work entirely by myself., Public Domain, https://en.wikipedia.org/w/index.php?curid=18314259

YUV (värvusvahesignaal)

• YUV colors are represented with

• one "luminance" component (heleduskomponent) called Y (equivalent to grey scale) and

• two "chrominance" components(värvikomponent), called U (blue projection) and V (red projection) respectively, hence the name.

• Y = .299R + .587G + .114B BT.601

• U = 0.492 (B -Y)

• V = 0.877 (R -Y)

• Used in analog PAL and analog NTSC.

• Y’UV has gamma correlated Y signal

17

By User:Brianski - Concept from en:Image:YUV_components.jpg, original publicdomain image at en:Image:Barns_grand_tetons.jpg, Public Domain, https://commons.wikimedia.org/w/index.php?curid=2792866

An image along withits Y′,

U, and V components respectively

standards

Rec. 709 (HDTV) Rec. 2020 (UHDTV)

By CIExy1931.svg: Sakuramboderivative work: GrandDrake (talk) - CIExy1931.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=21864661

By CIExy1931.svg: Sakuramboderivative work: GrandDrake (talk) - CIExy1931.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=21864671

YCbCr (YCC) and YPbPr

• luma and chroma encoding systems

• Consist of a luminance component (Y) and two chrominance components

• Component video - the luminance signal (Y) and the color difference signals (R-Y and B-Y).

• YCbCr (digital) and YPbPr (analog) are equivalent

19http://wolfcrow.com/blog/whats-the-difference-between-yuv-yiq-ypbpr-and-ycbcr/, http://wolfcrow.com/blog/understanding-luminance-and-chrominance/

Chroma subsampling

• humans are more sensitive to the black-and-white information

• One practical example would be decreasing the bandwidth or resolution allocated to "color" compared to "black and white“

• The subsampling scheme is commonly expressed as a three part ratio J:a:b (e.g. 4:2:2) or four parts if alpha channel is present (e.g. 4:2:2:4), that describe the number of luminance and chrominance samples in a conceptual region that is J pixels wide, and 2 pixels high. The parts are (in their respective order):

• J: horizontal sampling reference (width of the conceptual region). Usually, 4.

• a: number of chrominance samples (Cr, Cb) in the first row of J pixels.

• b: number of changes of chrominance samples (Cr, Cb) between first and second row of J pixels.

• Alpha: horizontal factor (relative to first digit). May be omitted if alpha component is not present, and is equal to J when present.

• This notation is not valid for all combinations and has exceptions, e.g. 4:1:0 (where the height of the region is not 2 pixels but 4 pixels, so if 8 bits/component are used the media would be 9 bits/pixel) and 4:2:1.

20

Chroma subsampling schemes

Type of samplingJ:a:b

ExplanationJ: horizontal sampling reference (width of the conceptual region). Usually, 4.a: number of chrominance samples (Cr, Cb) in the first row of J pixels.b: number of changes of chrominance samples (Cr, Cb) between first and second row of J pixels.

4:4:4 Each of the three Y'CbCr components have the same sample rate, thus there is no chromasubsampling.

4:2:2 The two chroma components are sampled at half the sample rate of luma: the horizontal chromaresolution is halved

4:2:1 Cb horizontal resolution is half that of Cr (and a quarter of the horizontal resolution of Y). This exploits the fact that human eye has less spatial sensitivity to blue/yellow than to red/green

4:1:1 In 4:1:1 chroma subsampling, the horizontal color resolution is quartered, and the bandwidth is halved compared to no chroma subsampling

4:2:0 Cb and Cr are each subsampled at a factor of 2 both horizontally and vertically.There are three variants of 4:2:0 schemes, having different horizontal and vertical siting.

410

31021https://en.wikipedia.org/wiki/Chroma_subsampling

4:2:0

Interlace (ülerealaotus)• Interlaced video is a technique for

doubling the perceived frame rate of a video display without consuming extra bandwidth. The interlaced signal contains two fields of a video frame captured at two different times. This enhances motion perception to the viewer, and reduces flicker by taking advantage of the phi phenomenon.

• Deinterlacing is the process of converting interlaced video, such as common analog television signals or 1080i format HDTVsignals, into a non-interlaced form.

Progressive (täiskaadrilaotus)

• way of displaying, storing, or transmitting moving images in which all the lines of each frameare drawn in sequence.

22

Gamma Correction (gamma korrektsioon)

23http://www.cambridgeincolour.com/tutorials/gamma-correction.htm

• It defines the relationship between a pixel's numerical value and its actual luminance.

• Without gamma, shades captured by digital cameras wouldn't appear as they did to our eyes (on a standard monitor).

• The human perception of brightnesshas greater sensitivity to relative differences between darker tones than between lighter ones.

• If no color profile is embedded, then a standard gamma of 1/2.2 is usually assumed.

Color identification in TV cameras

• Color is important part of visual information

• Television camera identifys color in form of information parameter of image

• Physical color is clearly defined by spectral composition of lightradiation and three color components

• Registering color components is related to identifying 3 primarycolors

• 3 colors in TV cameras are usually• primary colors red, green, blue (RGB) or• complementary colors cyan, magenta, yellow (CMY)

24Schults 2009

International Color Consortium (ICC)

• established in 1993 by eight industry vendors

• creating, promoting and encouraging the standardization and evolution of an open, vendor-neutral, cross-platform color management system architecture and components.

• it allows users to be sure that their image will retain its color fidelity when moved between systems and applications

• v4 ICC profile format

• next-generation color management profile format and architecture known as iccMAX

Sources and further reading

• https://en.wikipedia.org/wiki/List_of_color_palettes

• Sean McHugh. Color management and printing. Cambridge in colour. http://www.cambridgeincolour.com/color-management-printing.htm(14.09.2016)

• Color formats. Equasys GmbH. http://www.equasys.de/colorformat.html (14.09.2016)

• Sareesh Sudhakaran. Understanding Luminance and Chrominance. http://wolfcrow.com/blog/understanding-luminance-and-chrominance/ (14.09.2016)

• International Color Consortium, http://www.color.org/

26

Full-area 2-dimensional displays

• Television sets

• Computer monitors

• Head-mounted display

• Broadcast reference monitor

• Medical monitors

• Smartphone screens

• etc

27

Underlying technologies

• Cathode ray tube display (CRT) – 1970s

• Liquid crystal display (LCD) – 1990s• High-Performance Addressing display (HPA)

• Thin-film transistor display (TFT)

• Light-emitting diode display (LED)

• Plasma display panel (PDP)

• Organic light-emitting diode display (OLED)

• Active-matrix organic light-emitting diode (AMOLED)

28

CRT (cathode ray tube, elektronkiirte toru)

• The cathode ray tube (CRT) is a vacuum tube that contains one or more electron guns (elektronkahur)and a phosphorescent screen(ekraan), and is used to display images.

• Deflection system (hälvitus süsteem) modulates, accelerates, and deflects electron beam(s) onto the screen to create the images.

• Color CRTs use three different phosphors which emit red, green, and blue light respectively.

29By Blue tooth7 - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=16981328

Shadow mask of color CRT

30

• Triad shadow mask (aukmask).• aperture grille of tensioned vertical wires (pilumask)

By w:User:Planemad - Own work, CC BY-SA 2.5, https://commons.wikimedia.org/w/index.php?curid=1520394

Moiré pattern (effect)

• Secondary and visually evident superimposed pattern created when two identical patterns on a flat or curved surface are overlaid while displaced or rotated a small amount from one another.

• Television screens: when a person is wearing a shirt or jacket of a particular weave or pattern. This is due to interlaced scanning in televisions and non-film cameras, referred to as interline twitter.

• Photographs of a TV screen: Since both the TV screen and the digital camera use a scanning technique to produce or to capture pictures with horizontal scan lines, the conflicting sets of lines cause the moiré patterns. To avoid the effect, the digital camera can be aimed at an angle of 30 degrees to the TV screen.

31By P. Fraundorf - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=6272747

LCD (Liquid Crystal Display, vedelkristallkuvar)

• Mid 1990s used in TV and computers.

• A liquid-crystal display (LCD) is a flat-panel display or other electronic visual display that uses the light-modulating properties of liquid crystals. Liquid crystals do not emit light directly

RGB LCD subpixel.

32

By LCD_subpixel_(en).png: Marvin Raaijmakers, modified by ed g2s • talk derivative work: Angelo La Spina (LCD_subpixel_(en).png) [CC BY-SA 2.5 (http://creativecommons.org/licenses/by-sa/2.5)], via Wikimedia Commons

TN Twisted Nematic field effect(väändnemaatika) • Twisted nematic displays contain

liquid crystals that twist and untwist at varying degrees to allow light to pass through. When no voltage is applied to a TN liquid crystal cell, polarized light passes through the 90-degrees twisted LC layer. In proportion to the voltage applied, the liquid crystals untwist changing the polarization and blocking the light's path. By properly adjusting the level of the voltage almost any gray level or transmission can be achieved.

Exploded view of a TN liquid crystal cell showing the states in an OFF state (left), and an ON state with voltage applied (right)

34CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1568630

TFT LCD (Thin Film Transistor)

TN display under a microscope, with the transistors visible at the bottom

36

• A thin-film-transistor liquid-crystal display (TFT LCD) is a variant of a liquid-crystal display(LCD) that uses thin-film transistor (TFT) technology to improve image qualities such as addressability and contrast.

LCD and its subtypes

37

• LCD – Liquid Crystal Display, the current world champion for consumer grade and professional display monitors, in volumes of units sold. It is more energy efficient than CRTs and takes up less space.

• TFT LCD – Thin-Film Transistor, a ‘circuit’ in your typical LCD to give it life –in other words, improve performance. Today, TFT LCD is LCD.

• IPS LCD – In-Plane Switching. The orientation of the crystal was changed to get wider viewing angles and better color. Going forward, IPS TFT LCDs might be LCD.

• HPA LCD - High-Performance Addressing. Passive-matrix display technologyHPA uses a technique called multiline addressing in which the incoming video signal is analyzed and the image is refreshed with a frequency as high as possible. (wikipedia)

http://wolfcrow.com/blog/how-to-choose-a-professional-display-monitor-part-three-different-panel-technologies/

Screen parameters

• Response time (reaktsiooniaeg) - A 60 Hz display capable of showing 60 fps will have a time per frame of 16.7ms. The total response time should be lower than this value for zero ghosting. (<10 ms)

• Dynamic range or contrast ratio – the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing.• the human eye can only see about 1000:1 at any given time. (2000:1)

• Brightness - the brightness of monitors depends on the viewing environment. (100 nits … 200 nits)

• Color depth – 8 bits per color channel.• Refresh rate - there aren’t any consumer display systems for anything

greater than 60fps

39

http://wolfcrow.com/blog/how-to-choose-a-professional-display-monitor-part-four-understanding-manufacturer-specifications/

LED (light emitting diode)

• An LED display is a flat panel display, which uses an array of light-emitting diodes as pixelsfor a video display.

Detail view of a LED display with a matrix of red, green and blue diodes

40By Martin Kraft - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=43973300

OLED

• An OLED (organic light-emitting diode) is a light-emitting diode (LED) in which the emissive electroluminescent layer is a film of organic compound which emits light in response to an electric current.

• This layer of organic semiconductor is situated between two electrodes; typically, at least one of these electrodes is transparent.

Can be warped

41By meharris - English Wiki, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=2559944

AMOLED

• AMOLED (active-matrix organic light-emitting diode,

• OLED describes a specific type of thin-film-display technology in which organic compoundsform the electroluminescentmaterial, and active matrixrefers to the technology behind the addressing of pixels.

Magnified image of the AMOLED screen on the Nexus One smartphone using the RGBG system of the PenTile matrix family

42By Matthew Rollings at English Wikipedia, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=14914205

Plasma

• A plasma display panel (PDP) is a type of flat panel display common to large TV displays 30 inches (76 cm) or larger

• They are called "plasma" displays because they use small cells containing electrically chargedionized gases, which are plasmas.• 1936 first principle,

• 1964 monochrome,

• 1992 full-color plasma display

43By Jari Laamanen - Own work, FAL, https://commons.wikimedia.org/w/index.php?curid=1829066

Comparison of screen sizes by width, height, diagonal, area, and aspect ratio.

45By Marcel Müller - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=7972012

Resolution (eraldusvõime, lahutusvõime, resolutsioon)• lahutusvõime, füüsikariista võime eristada ajas või ruumis eraldi

paiknevaid või omaduste poolest lähedaledasi esemeid. Optikariista(mikroskoobi, spektroskoobi) või elektronoptilise seadme (kuvari) lahutusvõimeks nimetatakse tema võimet tekitada lähedastest objektidest või kujutiseelementidest eristatavaid kujutisi. [http://entsyklopeedia.ee/artikkel/lahutusv%C3%B5ime3]

• eraldusvõime, informaatikas kujutist näitava (kuvari) või jäädvustava seadme (printeri) omadus esitada kujutist suurema või väiksema täpsusega. Eraldusvõimet väljendatakse pikkusühiku (harilikult tolli) kohta tuleva kujutist moodustavate elementide arvu järgi. Kuvari puhul antakse eraldusvõime pikselite arvuna pildi laiuse ja kõrguse kohta (nt 1024×768 või 1280×1024). Laserprinterite eraldusvõime on harilikult 600 või 1200 dpi, filmiprinteritel 2000 dpi või üle selle. [http://entsyklopeedia.ee/artikkel/eraldusv%C3%B5ime]

46

Resolution (resolutsioon, eraldusvõime, lahutusvõime)• Display resolution (kuva eraldusvõime) is the number of distinct pixels in

each dimension that can be displayed on a display device

• Pixel density (pikslitihedus) shows number of pixels per one inch (ppi) orcentimeter (ppcm) on electronic image device (computer monitor, television display) or image digitizing device (camera, image scanner).

• Horizontal and vertical density are usually the same, as most devices have square pixels, but differ on devices that have non-square pixels

• Image resolution, a measure of the amount of detail in an image

• Printing resolution, the number of individual dots a printer can produce within a unit of distance (e.g., dots per inch)

48

Resolution of computer monitor

• Computers can use pixels to display an image, often an abstract image that represents a GUI. The resolution of this image is called the display resolution and is determined by the video card of the computer.

• LCD monitors also use pixels to display an image, and have a native resolution. Each pixel is made up of triads, with the number of these triads determining the native resolution.

• On some CRT monitors, the beam sweep rate may be fixed, resulting in a fixed native resolution. Most CRT monitors do not have a fixed beam sweep rate, meaning they do not have a native resolution at all - instead they have a set of resolutions that are equally well supported.

• To produce the sharpest images possible on an LCD, the user must ensure the display resolution of the computer matches the native resolution of the monitor.

• The bigger resolution, then smaller pixels and clearer image.

49

Resolution of telescopes

• The pixel scale used in astronomy is the angular distance between two objects on the sky that fall one pixel apart on the detector (CCD or infrared chip). • The scale s measured in radians is the ratio of the pixel spacing p and focal

length f of the preceding optics, s=p/f. (The focal length is the product of the focal ratio by the diameter of the associated lens or mirror.) Because p is usually expressed in units of arcseconds per pixel, because 1 radian equals 180/π*3600≈206,265 arcseconds, and because diameters are often given in millimeters and pixel sizes in micrometers which yields another factor of 1,000, the formula is often quoted as s=206p/f.

50

Digital video resolutions

51By Jedi787plus - https://en.wikipedia.org/wiki/File:Vector_Video_Standards4.svg, GFDL, https://commons.wikimedia.org/w/index.php?curid=37694717

Television resolutions

Standard-definition television (SDTV): • 480i (NTSC-compatible digital standard employing two interlaced fields of 243 lines each)• 576i (PAL-compatible digital standard employing two interlaced fields of 288 lines each)

Enhanced-definition television (EDTV): • 480p (720 × 480 progressive scan)• 576p (720 × 576 progressive scan)

High-definition television (HDTV): • HD (1280 × 720 progressive scan)• Full HDi (1920 × 1080 split into two interlaced fields of 540 lines)• Full HD (1920 × 1080 progressive scan)

Ultra-high-definition television (UHDTV): • 4K UHD (3840 × 2160 progressive scan)• 8K UHD (7680 × 4320 progressive scan)• 16K UHD (15360 × 8640 progressive scan)

52https://en.wikipedia.org/wiki/Display_resolution

Number of distinct colors represented (bpp)

• 1 bpp, 21 = 2 colors (monochrome)

• 2 bpp, 22 = 4 colors

• 3 bpp, 23 = 8 colors

• ...

• 8 bpp, 28 = 256 colors

• 16 bpp, 216 = 65,536 colors ("Highcolor" ) normally has 5 bits for red and blue, and 6 bits for green, as the human eye is more sensitive to errors in green than in the other two primary colors. For applications involving transparency, the 16 bits may be divided into 5 bits each of red, green, and blue, with one bit left for transparency.

• 24 bpp, 224 = 16,777,216 colors ("Truecolor") allows 8 bits per component.

• On some systems, 32-bit depth is available: this means that each 24-bit pixel has an extra 8 bits to describe its opacity (for purposes of combining with another image).

53

Image resolution. Pixel resolution

• Resolution is the capability of the sensor to observe or measure the smallest object clearly with distinct boundaries.

• Pixel dimensions - how many pixels are used for width and how manypixels are used for length of image.

• Resolution [pixels/inch]

Public Domain, https://commons.wikimedia.org/w/index.php?curid=1078380

54

Render (visualiseerimine)

• Andmete teisendamine kuvamiseks või printimiseks sobivasse vormingusse. Näiteks kiirte jälituse meetodi puhul võetakse kolmemõõtmelise objekti (või objektide kogumi) matemaatiline mudel ja teisendatakse see kahemõõtmeliseks bittrasterkujutiseks, mida saab ekraanil vaadata. Veebilehitsejad teisendavad HTML dokumente arvutiekraanil nähtavaks tekstiks ja piltideks

• [vallaste.ee]

56

Render (visualiseerimine)

• Rendering is the process of generating an image suitable for printing or display from a 2D or 3D model (or models in what collectively could be called a scene file) by means of computer programs.

• A scene file contains objects in a strictly defined language or datastructure; it would contain geometry, viewpoint, texture, lighting, and shading information as a description of the virtual scene. The data contained in the scene file is then passed to a rendering program to be processed and output to a digital image or raster graphics image file.

• A web browser engine (sometimes called layout engine or renderingengine) is a program that renders marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.).

57

Pixel definition is context-sensitive

• A pixel is generally thought of as the smallest single component of a digital image. • "printed pixels" in a page, or

• pixels carried by electronic signals, or

• represented by digital values, or

• pixels on a display device, or

• pixels in a digital camera (photosensor elements).

• synonyms include pel, sample, byte, bit, dot, and spot.

• The pixels, or color samples, that form a digitized image (such as a JPEG file used on a web page) may or may not be in one-to-one correspondencewith screen pixels, depending on how a computer displays an image.

58

Pixel

• Geometry of color elements of various CRT and LCD displays; phosphor dots in a color CRTs display (top row) bear no relation to pixels or subpixels.

59By Pengo - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=3430548

Pixels on different screens

• For convenience, pixels are normally arranged in a regular two-dimensional grid.

• For example:• LCD screens typically use a staggered grid, where the red, green, and blue components are

sampled at slightly different locations. Subpixel rendering is a technology which takes advantage of these differences to improve the rendering of text on LCD screens.

• Color digital cameras use a Bayer filter, resulting in a regular grid of pixels where the color of each pixel depends on its position on the grid.

• Warped grids are used when the underlying geometry is non-planar, such as images of the earth from space.

• Pixels on computer monitors are normally "square" (this is, having equal horizontal and vertical sampling pitch); pixels in other systems are often "rectangular" (that is, having unequal horizontal and vertical sampling pitch –oblong in shape)

60

Bayer filter mosaic

• A Bayer filter mosaic is a color filter array (CFA) for arranging RGBcolor filters on a square grid of photosensors. Its particular arrangement of color filters is used in most single-chip digital image sensors used in digital cameras, camcorders, and scanners to create a color image. The filter pattern is 50% green, 25% red and 25% blue, hence is also called RGBG, GRGB, or RGGB.

• The Bayer filter is almost universal on consumer digital cameras.

62

By en:User:Cburnett - Own workThis vector image was createdwith Inkscape., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1496872

By Martin Kraft - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=27580005

63

Diagram of common sensor resolutions of digital cameras incl.megapixelvalues

Sources and further reading

• Alvy Ray Smith. A Pixel Is Not A Little Square. Microsoft TechnicalMemo 6 1995. http://alvyray.com/Memos/CG/Microsoft/6_pixel.pdf[23.09.2016]

• http://wolfcrow.com/blog/how-to-choose-a-professional-display-monitor-part-three-different-panel-technologies/

•

64