Embed Size (px)
Citation preview
520251: Multimedia Systems
[!"#$%&]!"#$%&'()*'()*+',-.,/
29 '+012%/2 2553
1
Raster vs vector
2
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
3
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
Vector graphics(drawing)
3
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
Vector graphics(drawing)
4
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
Vector graphics(drawing)
4
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
Vector graphics(drawing)
5
Raster Graphics vs Vector Graphics
Raster graphics(bitmap image)
Vector graphics(drawing)
5
$%&344 raster
%&'()*+,#-./+ (x,y) 0&1-(#"2 pixel
6
$%&344 raster
34"5' pixel 67)8,)9:5
7
$%&344 raster
8,)9:54,);<=,>7?$@1A<$(2&.B+0(C*
8
$%&344 raster
6D+;"2-E .F$#$ pixel 92(G2><=,>7?$@1AH92(
9
#566(/7,849:;2%.
6<2=2 pixel (resolution)
lena_color_256.tif, 256x256, 201 KB
lena_color_512.tif, 512x512, 791 KB!"#$%: http://www.imageprocessingplace.com/root_files_V3/image_databases.htm
10
#566(/7,849:;2%.
>=%')?@;A:B, (color depth)
lena_color_256.tif, 256x256, 201 KB
lena_gray_256.tif, 256x256, 70 KB
!"#$%: http://www.imageprocessingplace.com/root_files_V3/image_databases.htm
11
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12
Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
13
Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html14
Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html15
Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html16
%&'0+C$4"2;E8); raster graphics
resolution x color depth
0@6I$I5-1)/%(&JK0(1A-#(B*G2>
(2&>BL$20@6I$I5-1 image processing
)B5()&DMN90>7A)(2&3!+;O5G2>
(2&*1*)B+8,)9:5
17
-7>C2C)/,A1#@!DE-@,8/=@(4$%&
18
Input
19
Output
20
)B5()&DMN9<$(2&3!+;O5G2>
21
Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4
22
Anti-aliasing
jaggies
aliasing = !A/F/(@4!+-=D;A4
22
Anti-aliasing
jaggies
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
22
Anti-aliasing
jaggies
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
22
Anti-aliasing
jaggies
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
22
Anti-aliasing
!"#$%: http://flasheandoblog.wordpress.com/2009/11/29/flash-performance-series-quality-adjustments/
!"#$%: http://www.pixelburg.com/am_glossary/
23
Dithering
aliasing = -7>2+>@%!)=:*%'21I/EG2@%!
(-F'JA2@(4)-&+8'#!+'%D color depth
$%/G*H#!+'%DB, (color palette) 7,8',
6<@(.
!"#$%: http://en.wikipedia.org/wiki/Dithering
24
Dithering
aliasing = -7>2+>@%!)=:*%'21I/EG2@%!
(-F'JA2@(4)-&+8'#!+'%D color depth
$%/G*H#!+'%DB, (color palette) 7,8',
6<@(.
!"#$%: http://en.wikipedia.org/wiki/Dithering
24
Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25
Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25
Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25
Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25
Dithering
!"#$%: http://commons.wikimedia.org/wiki/File:Dithering_algorithms.png
26
Dithering
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html27
“Image compression is the
application of data
compression on digital images.
In effect, the objective is to
reduce redundancy of the
image data in order to be able
to store or transmit data in an
efficient form....”
Image Compression
28
Image Compression
lossless lossy
29
lossless
30
Image Compression
lossless lossy
31
lossy
!"#$%: http://en.wikipedia.org/wiki/Jpeg
hi-quality comp: 83,261 Bytes
lo-quality comp: 4,787 Bytes
32
Image File Format
33
JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
34
JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2())(P%
34
JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2())(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+ (I+-0U>2'G2>V"2-)
34
JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2())(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+ (I+-0U>2'G2>V"2-)PQ5K05C(34"0(C*&2-5'0)1-+!:;
34
JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2())(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+ (I+-0U>2'G2>V"2-)PQ5K05C(34"0(C*&2-5'0)1-+!:;
0(C*G2>!1P+,S52(S52-6#295N(8);!1
34
!"#$%: http://upload.wikimedia.org/wikipedia/commons/c/ce/Quality_comparison_jpg_vs_saveforweb.jpg
35
!"#$%: http://upload.wikimedia.org/wikipedia/commons/c/ce/Quality_comparison_jpg_vs_saveforweb.jpg
36
!"#$%: http://en.wikipedia.org/wiki/JPEG
37
38
39
JPEG vs JPEG2000
!"#$%: www.lithium.it/050702_ jp2_qualitvergl_e.jpg
40
41
☹not suitable for line drawing or
images with text
jpg
gif
JPEG
42
43
GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
44
GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
44
GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
0S92'(B*G2>@1A915B(RJ'52-0!,$ P9"0S92'(B*G2>V"2-
44
GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
0S92'(B*G2>@1A915B(RJ'52-0!,$ P9"0S92'(B*G2>V"2-
44
GIF (Transparent)
45
GIF89a (Animation)
46
PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
47
PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
47
PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
47
PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
!292&V&);&B* transparency @1AWB*W,)$P+,
47
PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
!292&V&);&B* transparency @1AWB*W,)$P+,
47
I%&3(&94*34";G2>
48
49
50
51
52
Acquiring an Image
• Screen capture
• Scanner
• Digital camera & digital VDO camera
• Other sources
53
Scanner
54
Scanner
54
Scanners
Flatbed Sheet-fed
55
Scanners
Handheld Drum
Use photomultiplier tube (PMT) instead of CCD (read more on wiki)
56
Scanned Image Size (in 24-bit color)
Resolution (dpi)
image dimensionimage dimensionimage dimension
1”x1” 4”x6” 8.5”x11”
72 15 KB 356 KB 1,420 KB
100 29 KB 703 KB 2,739 KB
300 264 KB 6,328 KB 24,653 KB
600 1,055 KB 25,313 KB 98,613 KB
57
Digital Camera & VDO Camera
58
Digital Camera & VDO Camera
58
Digital Camera & VDO Camera
58
Digital Camera & VDO Camera
59
JPEG vs RAW
• Normally, digital cameras save their images in the JPEG format.
• Automatically adjusts: white-balance and all.
• RAW format is exactly what the camera sees when it takes the picture; NO adjustments have been made to the images. BUT, the file is a lot bigger in size...
60
Type of image Min resolution Camera Spec.
Web images 640x480 1 megapixel +
5”x7” 2048x1536 3 megapixels +
8”x10” 2272x1704 4 megapixels +
16”x20” 3072x2048 6 megapixels +
61
Editing Raster Images
• Selecting an Area
• Cropping
• Image resizing & canvas size
• Rotating
• Adjusting the balance
62
Editing Raster Images
• Sharping the contrast
• Adjusting the resolution
• Saving and exporting
63
Vector Graphics
64
Vector Graphics
65
Vector Graphics
66
Vector Graphics
66
Vector Graphics
66
3D Modeling
67
