multimedia object types ii: graphics and color ismt multimedia dr vojislav b mišić

Multimedia object types II:graphics and color

ISMT MultimediaDr Vojislav B Mišić

ismt337: Graphics and Color/ 2 © 2001 Dr Vojislav B Mišić

Illustrations

• Illustrations can• convey information or• be purely decorative

• Decorative illustration can add depth and emotion – often better than photographs


More illustrations

• Graphs and charts can accurately communicate data – if designed with care

• Diagrams combine text and data, maybe some other visual element

• Maps: geographic maps or tree diagram

• Icons – special symbols used to identify places, things or attributes


Photographs

• Photographs –a powerful media that can evoke emotional responses

• Good photography is an effective balance between focus, exposure, lighting, subject matter, composition and effects


Issues in graphics design(not a detailed exposition!)

• composition and form• choice of colors, lines, textures• foreground/background separation• 2D vs. 3D images: perception of

space and depth cues


Just to remind you …

• Humans can perceive millions of colors (resolution much below 1nm = 10-9m)

• Sensitivity is not constant throughout the frequency/color range

• Small details are not perceived in color (sensitivity for color detail is about 25% of the sensitivity for monochrome detail)

• Color is not perceived well under low lighting conditions


Computer representation of color

• Three types of color-sensitive cells• Theoreticians have argued for a

long time that there are three primary colors

• All other colors can be expressed as some combination of primaries

• Red, Green, Blue signals used to drive picture tubes for TV sets and computer monitor screens


TV and computer screens

• An electron beam scansthe image by lines

• Mask (grid) used for precision in positioning

• Phosphor dots emit visible light when illuminated

• Since the dots are small and we are some distance away, we see a continuous image, not a scanning pattern or individual dots


The CIE chromaticity diagram• Can all visible colors be displayed?• Not really – the primaries (phosphors)

used determine which colors are available

• Chromaticity diagram (CIE) shows how

• only colors inside the triangle of primaries can be shown

• different primaries givedifferent color sets


Color models

• RGB is actually the “output” format• However, different primaries and

color representation schemes can be used

• Color models can be classified as additive, subtractive, and other

• RGB, CMYK, HSB, HSL, CIE, YIQ, YUV, YCC (among others)


RGB model

• RGB is an additive model• RGB color is obtained by adding

appropriate appropriate amounts of red, green and blue (0 … 100%)• 1-bit color = black and white• 8-bit color = 256 colors• High color (16-bit color) = thousands of

colors• True color (24-bit color) = 16 million

colors


So many colors?

• 16 million may seem too much (a 800x600 image can have no more than 480K colors … )

• However• humans can be very picky• different images have different 480K

sets• extra colors can be used for copyright

protection (digital watermarks)


See for yourselfDifferent color depths (24, 8, 8 mono)


Take a second look …Parts of the same images, slightly enlarged


Dithering

• Limited color depth results in distortion – can it be improved?

• Solution: a process called dithering• a predefined pattern is used to simulate

missing colors using available colors• looking from a distance, adjacent pixels create

the impression of the missing color• posterization and Moiré patterns are less

visible• in a sense, color noise is added to the image in

a pseudo-random fashion

See foryourself(in B/W)

• Original

• Stripes

• Simple (pattern)

• Adaptive (diffuse)


See for yourself (in color)

• Original vs. simple vs. adaptive dithering


Subtractive models

• CMYK – a subtractive model commonly used in the printing industry (color separations)

• Primary colors include• cyan (light blue – close to green)• magenta• yellow• black(K)

• Color is specified as the amount of C, M, Y primaries subtracted from black (printed matter is seen through reflected light)


HSE/HSL model

• Several similar models (neither additive nor subtractive) are based on the HSE/HSL (hue, saturation, brightness/lightness) paradigm

• hue (or color) is an angle from 0 to 360 degrees on a color wheel

• saturation is the intensity (100% = pure color, 0% = no color – white, black or gray)

• lightness/brightness = percentage of black/white mixed in (100% = white, 50% = pure color, 0% = black)


Standard colors

• Should be an easy choice, right?

• But: their number is limited

• Moreover, there are problems with Internet pages (more on this later)


Option #2:Color wheel

• Well, almost …

• Standard or custom colors available


Custom colors

• You can manipulate either RGB, or HSL representation

• Changes made in one model are reflected to the other one

• Other programs allow other representations as well


TV color models

• CIE: color described in terms of frequency etc. (not really convenient in practice)

• YIQ / YUV models used in NTSC / PAL• two-way compatibility with monochrome

TV• luminance (Y) channel – which old TV sets

can use to display monochromeY = 0.30R + 0.59G + 0.11B

• two chrominance channels, (R-Y) and (G-Y) (somewhat scaled)


See for yourself

• luminance (Y) and chrominance (U, V) components of an image

• differences between YUV and YIQ are due to TV transmission/processing requirements


Digitized graphics

• The image must be digitized – converted to a rectangular dot (pixel) pattern

• The color of each pixel is measured• The set of color values for each pixel

forms the digital representation of the image

• A similar process is used for films, but the (much smaller) dots are obtained by a chemical deposition process (which means they may not be identical in size)


Raster formats

• Sometimes called a bitmap or pixmap• Each pixel of the original image is

accounted for in its computer representation

• Some popular raster formats• Pict (Mac), BMP (Win)• TIFF (several flavors), JPEG• GIF (most popular on Internet),• PNG (Portable Network Graphics)

• different, sometimes adjustable color depths


Storage of raster formats

• Open (save) is an easy procedure: just read (write) the image, pixel by pixel

• Disk—not display—may be the bottleneck• Size of the file containing the image:

columns rows bits-per-pixel• Higher resolution + more colors

= more space used (larger file size)• Compression often used to reduce file

sizes


Image compression

• Reduction of file size by exploiting redundancy in the image• color count is smaller than pixel count• adjacent pixels are likely to have the same color

• Compression algorithms differ by• efficiency (ratio of compressed vs. original size)• complexity (time required for compression and

decompression vs. file size)• distortion (lossy vs. lossless)

• Remember: world is not perfect …


To lose or not to lose?

• Efficiency depends on the algorithm as well as image content• painted images (cartoons) with large areas of

single color can be compressed with simple Run-Length Encoding algorithm (e.g., PCX)

• which does not work well for photographs

• In general:• lossless algorithms usually do not offer high

efficiency (save in some special cases)• better efficiency means more losses• lossy compression is irreversible and repeatable


Lossless algorithms

• run-length coding shortens long runs of identical values: for example, the run 000000000000000000000 is coded as 0@21 (fast, efficient for simple images)

• LZW coding (ZIP, … ): more complex, very efficient and reasonably fast (GIF)

• entropy (Huffman) coding: finding the optimal code depending on the image content (not too fast)


Lossy algorithms

• approximation paradigm:• process a block of pixels• then substitute colors according to some

algorithm

• prediction paradigm• predict the color of a pixel, based on the color

values of neighboring pixels• then code the difference between the actual

and predicted value (=reduced dynamic range)

• some techniques use both approaches


JPEG

• Joint Picture Experts Group -- a set of standard techniques for image compression (and a number of storage formats as well)

• lossless JPEG uses DPCM prediction• lossy JPEG: a multistep algorithm

• 2-dimensional 88 Discrete Cosine Transform (DCT) performed first, followed by

• run-length coding to shorten the file, and• entropy coding to obtain an optimized color

palette


See for yourself

• 100% quality at 52KB• Then, 50% quality at

8KB, with little visibledegradation

• 10% quality takes just4KB, but a distinctdistortion pattern is visible (due to the 88DCT used by JPEG)


In more detail …


Where to use JPEG

• Probably the best choice for photographs – since good efficiency (i.e., compression ratio) can be obtained with little loss

• JPEG decoders can trade loss for speed• JPEG can be used for motion (no

prediction)• Not suitable for line art, where its

distortion pattern is noticeable and annoying


Other techniques

• GIF (very popular for Internet) uses LZW• but note: GIF is 8-bit only, and Unisys

may ask you for royalties or license• PCX (was very popular on PC platforms)

uses even simpler RLE• LZW and RLE compression schemes make

these formats suitable for pictures with large areas of single color (cartoon-like), and sometimes for line art


Raster image processing

• Reading and storing images is easy – disk speed counts (compression takes little time)

• Color and palette changes quick and simple• Cutting and pasting easy for simple patterns,

difficult for irregular patterns• Pasted objects get merged with the image,

cannot be extracted any more• More complex operations (such as scaling,

rotation, … ) require significant CPU time


Vector formats

• Image consists of geometrically defined shapes in a virtual coordinate system

• The content to be displayed is recalculated after each change – may be computationally intensive for large number of objects

• Most popular formats:• DXF (AutoCAD) – standard for engineering use• CDR (Corel)• PS/EPS (PostScript)


Vector image properties

• Objects retain their identity throughout the lifetime of the image

• Editing is simple – but displayed content must be recalculated after each change

• File size generally smaller than raster files – regardless of the physical image dimensions – depends on object count instead

• Most vector formats allow insertion of bitmaps (as objects or object properties)


Vector image processing

• Color and palette changes quick and simple• Geometrical operations (scaling, rotation,

translation, … ) performed easily• Objects added, deleted, or modified easily• Objects can be ordered to change visibility• The only choice for 3D scenes• However: recalculation may be (and often

is) computationally intensive


On scanning and OCR

• printed images must be scanned• most scanners use JPEG or TIFF• always scan at best feasible resolution,

then downsample it to required resolution

• remember: repeated lossy compression makes image quality deteriorate

• OCR: sophisticated recognizers• use “line art” settings for scanning, best

possible resolution (files are not saved)


Lecture Summary

• graphics - a very important media type

• computer representation of graphics

• again, overall sense of balance and style is very important

multimedia object types ii: graphics and color ismt multimedia dr vojislav b mišić

Documents