Date post: | 13-Jan-2016 |
Category: |
Documents |
Upload: | solomon-gordon |
View: | 216 times |
Download: | 4 times |
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