Digital media for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

1. EASING
INTO WEB
DEVELOPMENT
8.
8 DIGITAL MEDIA

2. 1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY

3. Image Output
3
 An image on the screen is made up of a matrix or
grid of colored squares called pixels.
 A printed image, however, is made up of dots
called halftones.
original
o iginal pixels
pi els halftone halftone

4. Digital Representations
4
 While an image is output as pixels or halftones, it
can be represented/stored digitally in one of two
different ways.
 Thus, there are two basic categories of digital
, g g
images:
 bitmap (sometimes also called raster) images
 vector images

5. Bitmap Images
5
 uses a grid of small squares called pixels
 each pixel has a specific color value
 are resolution dependent — i e it contains
resolution-dependent i.e.,
fixed number of pixels.
 Thus, they can lose detail and appear jagged if
magnified or printed at too low a resolution
 painting programs allow you to directly magnified 700%
manipulate those pixels.
 Examples include: Adobe Photoshop, PaintShop
Pro, Adobe Elements, Microsoft Expression
Design
 The three main file formats used on the web
(GIF, JPG,PNG) are bitmap.

6. Painting Program (Photoshop)
6

7. Vector Images
7
 composed of lines and curves
f
defined by mathematically
objects called vectors.
bj t ll d t
 when you move or resize a magnified 700%
vector graphic, i edges
hi its d
remain crisp and smooth.
 resolution-independent
l d d
 Adobe Flash and Adobe
Illustrator are the most popular
vector drawing programs.

8. Drawing Program (Illustrator)
8

9. Can you differentiate raster from vector images?
y g
9

10. What is Color?
10
 The human eye perceives
color according to
wavelength of light that
reaches it
h it.
 Light that contains full
spectrum of color appears
p pp
as pure white light.
 The absence of light, the
eye perceives as black
black.

11. Color Models
11
 Color can be numerically defined using one of
several color models. The most common models are:
 RGB
 CMYK
 HSB (Hue, Saturation, Brightness)

12. RGB Color Model
12
 Allarge percentage of the visible spectrum can b represented by mixing red, green, and bl
f h i ibl be db i i d d blue
(RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan,
magenta, and yellow.
 Because the RGB colors combine to create white they are also called additive colors Adding all
white, colors.
colors together creates white—that is, all light is reflected back to the eye.
 Additive colors are used for lighting, video, and monitors. Your monitor, for example, creates color by
emitting light through red, green, and blue phosphors.

13. CMYK Color Model
13
 The
Th CMYK model is b d on the li h
d l i based h light-
absorbing quality of ink printed on
paper. As white light strikes translucent
inks,
inks part of the spectrum is absorbed
and part is reflected back to your eyes.
 In theory, pure cyan (C), magenta (M),
and yellow (Y) pigments should combine
d ll i h ld bi
to absorb all color and produce black.
For this reason these colors are called
subtractive colors
colors.
 However, due to the imperfection of
printing inks, black ink (K) is also needed.
www.ne14design.co.uk/images/CMYKseparations.jpg

14. Gamut
14
 A gamut is the range of
colors that a color system
can display or print The
print.
spectrum of colors seen
by the human eye is
y y
wider than the gamut
available in any color
model.
http://unix.temple.edu/~susanj/design/color/gamut.jpg

15. Gamut
15
 The
Th RGB gamut contains a
t t i
subset of visible colors
 Therefore, some colors, such as
, ,
pure cyan or pure yellow, can’t
be displayed accurately on a
monitor.
 The CMYK gamut is generally
a subset of RGB
 Therefore,
Therefore some colors that can
be displayed on a monitor
(RGB), cannot be printed
(CMYK).
(CMYK)
 Highly saturated colors in
particular cannot be printed
using CMYK www.astockphotos.com/images/rgb‐cmyk.jpg

16. HSB
16
 HSB model is based on human perception.
 Color is described in terms of three characteristics:
 Hue is what we usually refer to as color.
S t
Saturation
ti describes intensity or strength of a color. Th
d ib i t it t th f l The
more gray in a color, the less the saturation.
 Brightness describes the relative lightness or darkness
of a color.

17. Hue
ation
Satura
S
Brightness
17

18. Color Depth
18
 Color depth refers to the maximum
number of possible colors that an
image can contain.
 Itis determined by the number of bits
used to represent the color or tone
information for each pixel in the image.

19. Color Depth
19
 A color image will have a pixel depth of either:
 8 bits or less per pixel.
 No more than 256 colors will be displayable (28=256).
 Using bi
U i 7 bits per pixel would allow only 128 colors.
i l ld ll l l
 6 bits per pixel would allow only 64 colors, 5 bits = 32
colors, 4 bits=16 colors, 3 bits = 8 colors, 2 bits = 4 colors, 1
bits = 2 colors.
 24 bits per pixel.
 16.8 displayable million (224 = 16,777,216)
 This is also called true color
 8 bits of information are used for Red, Green, and Blue
 32 bits per pixel
 24 bits for color
 8 bits for transparency
 48 bits per pixel
 16 bit per red, green, and blue (not supported in browsers)
bits d d bl ( t t di b w )

20. Pixel Depth (color)
20
8-bit red 8-bit green 8-bit blue
01101110 11010001 10001110
24-bit color
01101110
8-bit color

21. Monitor Color Depth
21
 Image color depth is not the same as the number of
f
colors that can be displayed on a monitor.
 The number of colors displayable on a monitor is
determined by:
 Display resolution
 1024 x 768 is currently the most popular minimum resolution
 amount of video memory (VRAM)
f d
1 MB => 640 x 480 allows 24 bit
 2 MB => 800 x 600 allows 24 bit
 4 MB => 1600 x 1200 allows 24 bit Ancient History –
don’t worry about this

22. Screen Resolution
22
iPad = 1024 x 768
iPhone = 960 x 640
i h
http://www.w3schools.com/browsers/browsers_display.asp

23. Monitor Color Depth
23
 Some monitors can not display 24 bit color
regardless of memory.
 Old(pre 2002), low-end monitors
 PDAs and phones
p
 e.g.,
Android 2.1 and Blackberry Storm are 16 bit displays
(65000+ colors)
 Most business-class LCD monitors (and iphone 3GS and iPad 1)
 arein fact 18 bit displays (262000+ colors)
 expensive “true color” LCD panels are true 24 bit monitors

24. Setting Monitor Color Depth
24
Accessed by
1) right-clicking on desktop, and
selecting properties; or
2) choosing Display from
Control Panel Ancient History –
don’t worry about this

25. Dithering
25
 Monitors limited to less than true color create the
illusion of more colors by dithering the available
colors in a diffuse pattern of pixels.
 Image editors also use dithering to convert 24-bit color
images to 8-bit color images.

26. Dithering
26
True Color
(24-bit)
True Color Dither
(24-bit) (8 bit)
Dither
(16 bit)

27. Web Safe Color
27
 Unfortunately, the standard 256 colors are
f 2 6
different on Macs and PCs.
 There are 216 colors that are the same on both
platforms.
 These 216 colors are called the web-safe or
browser palette.
 These web-safe colors will not dither.
 If a sizable minority of y
y your target market will be
g
using 256 color systems you should use web-safe
colors for background and text colors.
Ancient History –
don’t worry about this

28. Using web-safe colors viewed
on 256 color system.
Not using web-safe colors
viewed on 256 color system.
28

29. Not using browser-safe colors
and viewing on 16 million
color system.
Same file as above viewed on
256-color system
256 color system.
Using browser-safe
colors and viewed on
256-color system
29

30. Web Safe Colors
30
 Web-safe colors have the following numbers:
Decimal Hexadecimal
0 00
51 33
102 66
153 99
Ancient History –
204 CC don’t worry about this
255 FF

31. Platform Differences
31
 One
O problem with the RGB color model is that it
bl h h G l d l h
measures color relative to the hardware being used at
the time
time.
 The relation between RGB values and actual displayed
color, called g
, gamma, varies from monitor to monitor, and
, ,
computer to computer.
 Images optimized for PCs tend to look paler on Macintoshes.
Images optimized for Macs tend to look darker on PCs.
df M d l kd k C
 Also, Mac monitor resolution is 72 pixels per inch, while
PC monitor resolution is about 96 ppi.
it l ti i b t i
 Thus images created on PC will appear larger on Mac

32. Platform Differences
32
Mac PC
Mac PC

33. Image Size
33
 Every image contains a fixed number of pixels,
measured in pixel height and pixel width.
 The size of an image on-screen is determined by the
p
pixel dimensions of the image, the monitor size and
g ,
the computer’s display resolution.

34. Display Resolution
34
 Different computer systems can have different
display resolutions.
 Common values:
 800x600
 1024x768
 1280x1024
 1600x1200
 1920 1200
1920x1200

35. Image Size + Display Resolution
35
 The physical size of pixels and their physical
spacing will change with higher resolutions.
 Thus, any given web page (and its parts) will appear
smaller on a high resolution system (and larger on a low
resolution system).

36. Effect of Display Resolution
36
800 x 600 Monitor 1600 x 1200 Monitor
How many extra pixels in the 1600 x 1200 monitor?
- twice as many, or
- four times as many?

37. Effect of Monitor Size
37
15” Monitor (800 x 600 resolution)
22” Monitor (800 x 600 resolution)
Notice, that because resolution is the same,
the content fills the same percentage of
space
iPhone (800 x 600 resolution)

38. Resizing Images
38
 Whenever you resize an image, Photoshop (or any
program) must interpolate (also called resampling).
 Resizing an image always reduces its quality.
 The image usually becomes pixelated.
 Making an image larger degrades image much
more than making it smaller
smaller.
 Increasingthe size just a small percentage (say 10% -
20%) will not b th t much of a problem.
ill t be that h f bl

39. Resizing
R i i an I
Image
39

40. Resizing an Image
40
Notice that the loss f
N ti th t th l of quality is not nearly as
lit i t l
noticeable when reducing the size of an image.

41. Resizing an Artwork Image – Wrong
Way
41
Original (400 x 100)
Enlarged (800 x 200)
Reduced (200 x 50)
Reducing or enlarging art work or text is
particularly problematic.

42. Resizing an Artwork Image – Right Way
42
Original (400 x 100)
Enlarged (800 x 200)
Reduced (200 x 50)
By changing it in the Photoshop original (say, by
increasing/decreasing the font size, etc), the
quality is ideal.

43. Resizing Text
43
Original
Pixels (jpg/gif/png) resized (in Browser, PowerPoint, etc)
Objects Resized (in Photoshop, Illustrator, etc)

44. Resizing Images
44
 If you need to resize an image:
Worst  use browser, Word, etc to enlarge
 use Photoshop to enlarge
 enlarge using scanner
l
 enlarge photographic original, rescan, and
lower resolution/size
l l /
or
Best  take digital photo at high resolution (i.e.,
greater than 200pixels/per inch or larger size),
h 200 l/ h l )
and lower resolution/size.
or
 Recreate with bigger size (for logos, ads, etc)
R hb (f l d )
In both of these cases, there will be a high
number of pixels i the i
b f i l in h image so the l of
h loss f
quality will not be as noticeable.

45. Interpolation Methods
45
 Different programs have different interpolation
methods for resizing.
 The browser (and most other programs) uses nearest
neighbour interpolation
 Dedicated image editing programs have more
sophisticated interpolation algorithms

46. 46
Bicubic Interpolation Nearest Neighbour Interpolation

47. File Formats
47
 Browsers prior t IE 5 5 can only read two different file formats: GIF
B i to 5.5 l d t diff t fil f t
and JPG.
 IE 5.5 and 6 can partially display PNG files (but not transparency).
 Firefox, Safari, and Opera can display all three.
 IE 7 can almost fully display PNG files.
 Image editing programs such as Photoshop can read and write a
I diti h Ph t h d d w it
much wider variety of graphic file formats.
http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm

48. JPEG (JPG)
48
 JPEG images are full-color images (24 bit).
 Thus on a system that can only display 8-bit color, JPGs
will be dithered.
 JPEG uses a "lossy" compression scheme.
y p
 i.e.,
reduces file sizes by throwing away pixel
information.
 Each time you save a JPG, quality gets worse, so keep a
non-JPG version (TIF or PSD) as well.
 file sizes are dramatically reduced.

49. JPEG (JPG)
49
 You can choose the degree of compression you wish
to apply to an image in JPEG format.
 But this changes the image quality.
 The more you squeeze a picture with JPEG compression,
y q p p ,
the more you degrade its image quality.
Photoshop 5.5
Save for Web
Photoshop
Ph h
Save A Copy

50. 50
JPEG (JPG)
 The lower the quality (i.e., the higher the compression),
q y( , g p ),
the more artifacts or noise appear in the image.
Uncompressed Quality: 10 Quality: 30 Quality: 60
427 K 21 K 34 K 63 K

51. JPG Qualities
51
Quality 1 = 32 K Quality 5 = 36 K Quality 10 = 81 K
Uncompressed Original = 140 K

52. JPEG (JPG) Noise
52
 JPGs are ideal for
G d lf
photographs and other
continuous-tone images such as
paintings and grayscale
i ti d l
images.
 JPEG poor for artwork or Original Saved as jpg
diagrams or any image with a
di i ih
large area of a single color.
 When compressed with JPEG,
diagrammatic i
di ti images show a
h
"noise" pattern of compression
garbage around the transition
areas
jpg zoomed to show noise / artifacts

53. Creating JPG for Web
53
Aim for the smallest file possible
(the lowest quality setting) that
still looks okay.
Images without large areas of
similar color can get by with very
low quality (10-20)
Images with large areas of
similar color will need higher
quality (40 70).
(40-70)
In example here, mountains and
stream areas could get by with
quality of 10, but the sky has
ugly artifacts even at quality 60
(I had to use quality of 80, which
h dt lit f 80 hi h
resulted in file size of 41K)

54. GIF89a (.GIF)
54
 8-bit or less color (limited to 256 colors colors).
 Colors in GIF image are stored in its palette.
 Different GIF images can have different palettes.
 Uses run-length compression.
U g p
 Changes along horizontal axis increases file size
6.7K 11.5K 56K

55. 55
8-bit
8 bit (256) color 00001100 = 12
 Which 256 colors???
 Eight-bit image files dedicate eight bits to
each color pixel in the image.
 In eight-bit images the 256 colors that make
up the image are referenced to a palette
h i f d l tt
 It is possible for the palette to contain less than
256 colors. Position 12 in palette
color definition = 00000001 00000111 11111010
Position 9 in palette
p
color definition = 00000001 00000111 11111010
64 color palette = 6 bits per pixel
file size = (10000 pixels x 6) / 8 = 0.75K)
001001= 9
256 color palette = 8 bits per pixel
file size = (10000 pixels x 8) / 8 = 1K)

56. GIF89a (.GIF)
56
 Ideal f images with f
for flat-bands of color, or with
f
limited number of colors.
 Not very good for photographic images. Use JPG
instead.
GIF = 53K JPG = 32K
GIF = 2K
JPG = 4K

57. Interlaced GIFs
57
 allows web browsers to begin tog
build a low-resolution version of
the full-sized GIF picture on the
screen while the file is still
downloading.
 gives the reader a quick preview
of the full area of the picture.
p
 not faster-loading than non-
interlaced graphics; they just look
as if they download faster because
the rough preview comes up faster.
Ancient History –
don’t worry about this

58. Transparent GIFs
58
 The GIF89a file format allows you to pick one color
from the color lookup table (i.e., palette) of the GIF
to be transparent.
Plain GIF Select white to be How it looks in
graphic transparent color browser
Home Home
Light blue background of web page (set via BODY tag)

59. Transparent GIFs
59
 Unfortunately, if you make a color transparent, then
every pixel in the graphic that shares that same
color will become invisible.
Plain GIF Select white to be How it looks in
graphic
hi transparent color
l browser
b
Home Home
Select white to be
transparent color

60. Transparent GIFs
60
 Transparent GIF can also be disappointing when the
graphic contains anti-aliased edges with pixels of
multiple colors.
 Anti-aliasing visually "smooths" the shapes in graphics
by inserting pixels of intermediate colors along
boundary edges.

61. Transparent GIFs
61
 These anti-aliased edges often result in a "halo" of
color when you set a transparent color in a GIF
Anti-aliased edges
Image as seen in browser (black background color
defined in BODY tag) without and with white
defined as transparent.
transparent

62. Transparent GIFs
62
Green b k
G background of web page
d f b
(set via BODY tag)
Original GIF How it looks in
graphic browser with white
set to transparent
Solution: make background layer in Photoshop How it looks in browser
same color as background color in BODY tag.
tag with background green
set to transparent

63. Animated GIFs
63
 GIFs can also be animated.
 Animations are created by having multiple
y g p
frames.
 Each frame is like a separate GIF image.
 You can specify how long to pause between frames
and how many times to loop through the animation.
 Requires a GIF animation program to construct the
animated GIF out of individual GIF images
images.
Ancient History –
Yes, it is 1995 again with these classic animated GIFs don’t worry about this

64. Creating GIF for Web
64
 Need to specify which:
 palette to use
 the amount of dithering

65. GIF Palette
65
Will use the best 256 (or less) colors
Will use only web-safe colors (216 colors or less)
y ( )
Will use only system colors (256 colors defined for Windows/Mac)
Use Web palette for clip-art, logos.
Use Selective for images that combine photos and clip-
g p p
art/text, and for photos with very large areas of similar color.
Use Perceptual/Adaptive/Selective for logos or clip-art in
which color fidelity is important.

66. Adaptive/Exact Palettes
/
66
Original 24 bit Web Palette (8 bit) Adaptive Palette (8 bit)
216 Web Colors
W bC l
Best 256 colors
36 Exact Colors

67. Dithering and Palettes
67
3.3 K
Since original didn't use web-safe colors, the resulting GIF has diffusion dithering.
2.3 K
By changing to No Dither, the resulting GIF's non-web-safe colors have been switched to web safe.
Generally, clip-art/logos should have as little dithering as possible.

68. Dithering and Palettes
68
7K
!
The resulting GIF looks as good as the original But this is what it looks like on 256-color system
2K
With the web palette, everyone sees the dither
1K
Photos need dithering, otherwise it’s a real ugly mess
Visually, the Selective seems the best choice; but the file size is too large.

69. Bits/Pixel or Color Depth
69
7K 5.7 K 4.5 K
The Selective Palette gave us good Reducing the number of colors to 128 Reducing the number of colors to 64
results, but file size was too large. (7 bits per pixel), reduces file size (6 bits per pixel) still give us good
without noticeable loss of quality. results.

70. Bits/Pixel or Color Depth
70
3.6 K 2.6 K 2K
Reducing the number of colors to 32 (5 Some dithering in photo noticeable now Dithering even more noticeable at 8
bits per pixel) still give us good results. at 16 colors (4 bits/pixel) but still okay. colors (3 bits/pixel). Going below this
gives horrid results.

71. Bits/Pixel or Color Depth
71
256 Colors -- 12 K
C l 128 Colors -- 9 7 K
C l 9.7 64 Colors -- 7 6 K
C l 7.6 32 Colors -- 6 K
C l
Looks okay but too large Still looks okay Some dithering Dithering more noticeable;
noticeable just acceptable
16 Colors -- 4 3 K
4.3 8 Colors -- 3 3 K
3.3 4 Colors -- 2 K
Dithering quite Dithering very Now image looks like a
noticeable; perhaps noticeable; loss of colors duotone; client might
unacceptable (carrots and lemon have notice be rather unhappy
turned green). with this result.

72. GIF Transparency
72
If working with Photoshop image with layers, then transparency option will be unavailable if
background layer visible.
If you turn off visibility of background layer, then transparency option will be available.

73. GIF Transparency
73
If working with non-Photoshop image with no
layers, then transparency option will be
unavailable.
To enable transparency, must follow the following steps:
1. Use Image | Mode | RGB menu.
2. Select the Magic Eraser Tool, available from Eraser fly-out menu
3.
3 Click on background color with tool
tool.
4. Now do File | Save for Web menu, and turn on Transparency.

74. Anti Aliasing
Anti-Aliasing and Transparency
74
Default settings. Notice how this gives halo
around image when viewed in web page with
a background color set in BODY tag.
Saved GIF
Zoomed in
as seen in
on browser
browser
view.
Matte: None. This removes halo, but gives
image jagged edges because anti-aliasing
pixels have been removed.
removed Zoomed in
Z di
on browser
Saved GIF view.
as seen in
browser
Matte: Color. Here the Matte color has been
set to the same color as the background color
in BODY tag.
tag
Zoomed in
on browser
view.

75. PNG
75
 Portable N
P bl Network G hi or possibly
k Graphics, ibl
 PNG Not Gif
 Created to replace GIF due to its limitations and to
copyright issues
 Features:
ea u es:
 bitmap format that uses a lossless compression
 Supports 1-bit, 2-bit, 4-bit, 8-bit, 24-bit, and 48-bit per
pixel.
i l
 Supports 1-bit, 8-bit, and 16-bits of transparency
information per pixel.
p p
 Supports gamma correction and color space management
(not supported by IE 7)

76. PNG
76
 For normal photographs, JPG is a better choice
because the file size will be smaller.
 If image has large areas of similar color, then PNG
will be better.
 PNG usually a better choice than GIF for artwork
or if non single color transparency is required
non-single required.
 However, not supported on older browsers

77. PNG Transparency
77
 Because you can specify 8-bits for transparency,
you do not have to worry about anti-aliasing halos
(like you did with GIFs).
Same PNG file displayed on two different backgrounds.
Source: http://en.wikipedia.org/wiki/PNG
Source: http://en wikipedia org/wiki/PNG

78. TIFF (.tif)
78
 Multi-platform format
 Lossless compression
p
 Supports resolutions, layers, etc
 Not di l
N t displayable in b
bl i browser
 Useful as an inter-operable image format that won’t
lose information each time it is saved

79. Photoshop (.PSD)
79
 Photoshop's native file format.
 If you wish to p
y preserve your layers, y must use
y y , you
Photoshop format.
 Binary compatible between Mac and PC PC.
 In general, Photoshop is the only program that can
read th
d these files.
fil

80. Raw files
80
 Contain the output from the original red, green, and
blue sensors in a camera.
 Some cameras can save these files (instead of/addition
to the usual jpg version).
 Very large files
 Sensible choice if not sure you have optimal exposure and
white balance.
 Provide the highest quality.
 Different formats
 Proprietary
(Different one for each manufacturer)
 Open Source (.dng)

81. Adobe Flash
81
 Since its introduction in 1996, Flash has become a
popular method for adding animation and
interactivity to web pages.
 Flash is commonly used to:
y
 create animations and advertisements and games
 create various web page components such as menus
and galleries
 integrate video into web pages

82. Flash Examples
82

83. Adobe Flash
83
 Can manipulate vector and raster graphics.
 Supports streaming of audio and video.
pp g
 Contains a scripting language called ActionScript.

84. Adobe Flash
84
 Source files (.fla) created and edited by Flash
 Browser can display Shockwave Flash Files (.swf)
p y ( )
created by Flash and some other programs.
 Other media players can display Flash video files
(.flv)
 Most browsers have Flash plugin pre-installed
M tb h Fl h l i i t ll d
 Conflicts with Apple and W3C may mean decline in
use of Flash over time.

85. Video and the Web
85
 Approaches:
 Streaming
 Video can be played simultaneously as it is received
 Requires special streaming software on web server
 Non-streaming
 Entire video must download first
 Fake Streaming
 Player
y can p y video once a certain amount of the file has
play
been downloaded (buffering)
 Most players employ fake streaming

86. Video Formats
86
 Real ( rm)
(.rm)
 Multi-platform but low installed base for player
 Small files
 Qu c
QuickTime (.mov)
e (. ov)
 Only minority (albeit large) of Windows users have the player
 Small files
 Windows Media (.wmv)
 Only Windows users (and not even all windows users have it ~85%) have it
 Small files
 MPEG version 1 (.mpg)
 Multi-platform (
M li l f (can b played by QuickTime and Wi d
be l d b Q i kTi d Windows Media players)
M di l )
 Large files
 Flash Video (.flv)
 Multi platform
Multi-platform and highest installed base (98%)
 Small files
 Used by YouTube and Google video
 Currently the best choice for web video

87. Codecs
87
 Video is compressed with something called a codec.
 A video codec is a device or software that enables
video compression and/or decompression.

88. Codecs
88
 Codecs differ in terms of:
 video quality,
 the quantity of the data needed to represent it, also
known as the bit rate,
 the complexity of the encoding and decoding
algorithms,
 robustness to data losses and errors,
 ease of editing,
 whether random access is allowed

89. Common codecs
89
 MPEG-1
MPEG 1
 used in Video CDs
 MPEG-2
 Used on DVDs
 H.263
 Used in videoconferencing
g
 MPEG-4 Part 2
 MPEG standard that can be used for internet, broadcast, and on storage media.
 Divx, FFMPEG, and Xvid are two implementations of this codex
 MPEG-4 Part 10 (also known as H.264)
 The current state of the art adopted by Blue-Ray, Mac OS, XBOX 360, iPhones,
etc
 WMV (Windows Media Video)
 RealVideo

90. Container Video Formats
90
 Some video formats are container formats.
 can contain video compressed with a variety of
different codecs.
 E.g.,
.mp4 (MPEG version 4)
.mov (QuickTime)
.asf (Ad
f (Advanced Streaming Format)
dS )
.avi (Audio Video Interleaved)