1

JPEGJPEG

JPEG stands for Joint Photographic JPEG stands for Joint Photographic Experts GroupExperts Group

Superior for continuous tone, Superior for continuous tone, photographic color imagesphotographic color images• not good on sharp-edges or flat-colornot good on sharp-edges or flat-color

JPEG is lossy and supports full 24-bit colorJPEG is lossy and supports full 24-bit color

Designed to exploit the nature of our Designed to exploit the nature of our eyes – small changes in color are eyes – small changes in color are perceived less accurately than small perceived less accurately than small changes in brightnesschanges in brightness

2

JPEGJPEG

JPEG accurately records the brightness of JPEG accurately records the brightness of each pixel, but averages out the hueseach pixel, but averages out the hues

Usually yields a file that is between 10 - 20 Usually yields a file that is between 10 - 20 times smaller than the originaltimes smaller than the original

Converts the image representation into a Converts the image representation into a frequency map using a Discrete Cosine frequency map using a Discrete Cosine Transform (DCT) function that separates the Transform (DCT) function that separates the high and low-end frequencieshigh and low-end frequencies

Some are discarded depending on the Some are discarded depending on the amount of compression desired (encoder can amount of compression desired (encoder can set the level)set the level)

3

PNGPNG

Pronounced ‘ping’Pronounced ‘ping’

Originally thought to replace GIFsOriginally thought to replace GIFs

Relatively new lossless formatRelatively new lossless format

The World Wide Web Consortium (W3C) The World Wide Web Consortium (W3C) published the final specification in published the final specification in 19961996

Accurately compresses 24 or 32 bit Accurately compresses 24 or 32 bit images, and supports indexed images images, and supports indexed images with 256 or fewer colorswith 256 or fewer colors

4

PNGPNG

Provides an 8-bit Provides an 8-bit alpha channelalpha channel for for transparency or maskingtransparency or masking

The alpha channel allows for 256 The alpha channel allows for 256 gradations of transparency (GIF only gradations of transparency (GIF only supports 1), allowing for realistic glows, supports 1), allowing for realistic glows, shadows and special effectsshadows and special effects

Provides automatic Provides automatic gamma correctiongamma correction, , allowing for more control over image allowing for more control over image brightnessbrightness

Based on Based on wavelet compressionwavelet compression

5

PNGPNG

Examples exploiting PNG’s alpha Examples exploiting PNG’s alpha channel:channel:

6

Gamma CorrectionGamma Correction

The relation between RGB values and the actual The relation between RGB values and the actual color displayed on the screen is rarely linearcolor displayed on the screen is rarely linear

For example, a red channel set to 200 should be For example, a red channel set to 200 should be twice as bright as one set to 100, but it usually twice as bright as one set to 100, but it usually isn’tisn’t

The actual relation, called The actual relation, called gammagamma, varies from , varies from monitor to monitormonitor to monitor

This is an important issue for companies This is an important issue for companies wanting to sell products such as cosmetics and wanting to sell products such as cosmetics and paint onlinepaint online

Gamma correction associates a single numeric Gamma correction associates a single numeric value with a display system, then compensates value with a display system, then compensates the image accordinglythe image accordingly

7

Wavelet CompressionWavelet Compression

Wavelet compression provides better Wavelet compression provides better compression ratios than DCT compressioncompression ratios than DCT compression

Wavelets are mathematical expressions Wavelets are mathematical expressions that describe an image in a continuous that describe an image in a continuous streamstream

A wavelet stream can be uncompressed A wavelet stream can be uncompressed incrementally, so the same file can be incrementally, so the same file can be viewed at different resolutionsviewed at different resolutions

Wavelets allow downloading of the same Wavelets allow downloading of the same image at different resolutions depending image at different resolutions depending upon the available bandwidthupon the available bandwidth

8

Other Image ManipulationsOther Image Manipulations

Other manipulations of images include:Other manipulations of images include:• DitheringDithering• AntialiasingAntialiasing

Monitors and image files limited to 256 Monitors and image files limited to 256 colors can create the illusion of more colors can create the illusion of more colors by colors by ditheringdithering the available colors in the available colors in a scattered pattern, approximating the a scattered pattern, approximating the desired colordesired color

Image editors often use dithering to Image editors often use dithering to convert truecolor images to indexed color convert truecolor images to indexed color imagesimages

9

DitheringDithering

TrueColorTrueColor DitheredDithered

10

AntialiasingAntialiasing

Aliasing effects occur when representing Aliasing effects occur when representing curvescurves

Because pixels are rectangular and in a Because pixels are rectangular and in a grid, rounded objects and diagonal lines grid, rounded objects and diagonal lines appear jagged (staircase effect)appear jagged (staircase effect)

AntialiasingAntialiasing is the process that is the process that eliminates or reduces these effectseliminates or reduces these effects

Antialiasing make diagonal edges Antialiasing make diagonal edges appear smoother by setting pixels near appear smoother by setting pixels near the edge to an intermediate colorthe edge to an intermediate color

11

Vector GraphicsVector Graphics

Vector graphics are images encoded Vector graphics are images encoded descriptively in terms of geometric shapesdescriptively in terms of geometric shapes

That is, rather than assigning colors to That is, rather than assigning colors to pixels, a vector graphic is defined by lines pixels, a vector graphic is defined by lines and shapesand shapes

Essentially, a vector graphic is a series of Essentially, a vector graphic is a series of commands that describe a line’s direction, commands that describe a line’s direction, thickness, and colorthickness, and color

It’s a set of plain text instructionsIt’s a set of plain text instructions

The files are small because every pixel The files are small because every pixel doesn’t need to be accounted for. The doesn’t need to be accounted for. The complexity of the image determines file size.complexity of the image determines file size.

12

Vector GraphicsVector Graphics

Raster graphics need to be encoded multiple Raster graphics need to be encoded multiple times for different sizes and proportionstimes for different sizes and proportions

Vector graphics can be resized to any Vector graphics can be resized to any proportion and re-rendered at any pointproportion and re-rendered at any point

A vector graphic may be defined once, A vector graphic may be defined once, named, and then reused anywhere in the named, and then reused anywhere in the document, resizing (& rotating) a cached document, resizing (& rotating) a cached versionversion

JPEGs are superior for representing real JPEGs are superior for representing real world images; vector graphics are good for world images; vector graphics are good for simple graphics such as line drawings (like simple graphics such as line drawings (like GIFs)GIFs)

13

Vector GraphicsVector Graphics

Vector graphics trade the burden of a large file Vector graphics trade the burden of a large file size to the burden on the receiver’s processorsize to the burden on the receiver’s processor

Vector graphics are converted to bitmaps for Vector graphics are converted to bitmaps for display on the monitordisplay on the monitor

Since all displays are raster (pixel) oriented, the Since all displays are raster (pixel) oriented, the difference between raster and vector graphics difference between raster and vector graphics is where they are is where they are rasterizedrasterized: server side or : server side or client sideclient side

Vector images are easier to modify because the Vector images are easier to modify because the components can be moved, resized, rotated, or components can be moved, resized, rotated, or deleted independently, as opposed to modifying deleted independently, as opposed to modifying individual pixelsindividual pixels

14

Vector GraphicsVector Graphics

The only W3C supported vector format The only W3C supported vector format is is Scalable Vector Graphics (SVG)Scalable Vector Graphics (SVG)

Flash is currently the most popular Flash is currently the most popular vector formatvector format

However, Flash is in a binary format However, Flash is in a binary format that takes a special editor to createthat takes a special editor to create

SVG code is plain text and resides SVG code is plain text and resides within HTML documents – it is written in within HTML documents – it is written in XMLXML

Other vector programs include Adobe Other vector programs include Adobe Illustrator and Macromedia FreehandIllustrator and Macromedia Freehand

15

Vector GraphicsVector Graphics

SVG defines 6 standard shapes: rect, SVG defines 6 standard shapes: rect, circle, ellipse, line, polyline, polygoncircle, ellipse, line, polyline, polygon

Unique shapes may be defined as Unique shapes may be defined as combinations of these shapescombinations of these shapes

Can also control:Can also control:• fill - the painting of the interior of the fill - the painting of the interior of the

shape (you can specify color and shape (you can specify color and transparency)transparency)

• strokestroke - - the painting along the outline of the painting along the outline of the shape (you can specify color, width, the shape (you can specify color, width, antialiasing, and opacity)antialiasing, and opacity)

16

Vector GraphicsVector Graphics

For example, the following code can be For example, the following code can be used to create a yellow circle with a red used to create a yellow circle with a red edge:edge:

<circle style = "fill: yellow; stroke: <circle style = "fill: yellow; stroke: red" />red" />

SVG also provides patterns that may be SVG also provides patterns that may be used to fill any shape with a GIF or JPEG. used to fill any shape with a GIF or JPEG. These can be tiled to fill the shape.These can be tiled to fill the shape.

To specify where an object appears on the To specify where an object appears on the page, SVG utilizes page, SVG utilizes Cascading Style Sheets Cascading Style Sheets (CSS)(CSS)

17

Ray TracingRay Tracing

Technique for rendering three-Technique for rendering three-dimensional graphics with complex dimensional graphics with complex light interactionslight interactions

Based on the idea that you can model Based on the idea that you can model reflection and refraction by following reflection and refraction by following the path that light takes as it bounces the path that light takes as it bounces through the environmentthrough the environment

In order to save effort, rather than In order to save effort, rather than tracing from the light source out when tracing from the light source out when most rays won’t reach the viewer, most rays won’t reach the viewer, rays are traced from the viewer back rays are traced from the viewer back to the light source.to the light source.

18

Ray TracingRay Tracing

For each pixel on the display window, For each pixel on the display window, a ray is defined that extends into the a ray is defined that extends into the scenescene

The ray is traced as it bounces off The ray is traced as it bounces off objects back to the light sourceobjects back to the light source

The final color of the ray (pixel) is The final color of the ray (pixel) is determined by the colors of the determined by the colors of the objects hit by that rayobjects hit by that ray

19

Ray TracingRay Tracing

To simulate reflection, ray tracing takes To simulate reflection, ray tracing takes into account multiple bounces from objectsinto account multiple bounces from objects

If an object is defined as reflective, the ray If an object is defined as reflective, the ray follows a straight line from where it hitsfollows a straight line from where it hits

To handle refraction, ray tracing takes into To handle refraction, ray tracing takes into account what happens when a ray passes account what happens when a ray passes through a partially or fully-transparent through a partially or fully-transparent objectobject

Rays may be bent if the objects around the Rays may be bent if the objects around the surface have different indices of refractionsurface have different indices of refraction

20

Ray TracingRay Tracing

21

Ray TracingRay Tracing

22

Ray TracingRay Tracing

23

Ray TracingRay Tracing

24

Ray TracingRay Tracing

25

Ray Tracing ExampleRay Tracing Example

26

Ray Tracing ExampleRay Tracing Example