Transcript Graphics_General

Media – an overview
1
Media






Image
Video
Flash
Sound
HTML Graphics (covered later)
Tools to create
2
Media – all take storage space
Term
Definition
Bit
Binary value 0 or 1
Kilobit (Kb)
1,000 bits (approx.)
Byte
8 bits
Kilobyte (KB)
1,000 bytes
Megabyte (MB)
1,000,000 bytes
Gigabyte (GB)
1,000,000,000 bytes
Kbps
Kilobits per second (1,000 bits in a second)
KB/sec
Kilobytes per second (1,000 bytes in a second)
3
Images




How they are created
Some tips about photography
Resolution
Image Formats
4
Image Formation

How are images created.
5
Image Formation
Images are formed when a SENSOR
registers RADIATION that has
interacted with PHYSICAL OBJECTS
6
Types of Images




Photography:
reflected light
Range images:
distance
Tomography: tissue
density
Infrared: heat
We will concentrate on
the first type
(gray scale and color).
7
Digital Images
are 2D arrays (matrices) of numbers:
8
Digital images
Depending on the type of image, the numbers,
pixel values, represent:
 light intensities, or color
 distances, or
 other physical quantities.
Color image and
3 fields –red, green,blue
Blow up – shows
pixels
Pixel values represent9
Depth – white nearer
Intensity Images
Light coming from the world hits the sensor.
10


Distant objects appear smaller
Even though B is larger than C it appears
the same size because it is more distant.
11
Optical Parameters- about
photography

Angular apertures
Larger aperture
(larger diameter of opening)
•Lets in more light, but, can have
Smaller aperture
(smaller diameter of opening)
12
Optical Parameters

Larger Aperture means:
For an aperture
Shutter speed too low
• More light comes in (can have faster
shutter speed …take quick picture and
hence capture faster moving objects).
• BUT, also means incoming light is
uncollimated rays, resulting in a sharp
focus only for rays with a certain focal
length. This means that a greater aperture
results in an image that is sharp around
what the lens is focusing on and blurred
otherwise.
SMALLER DEPTH
OF FIELD
Object near flower are not in focus13
For this larger aperture
Optical Parameters

Smaller Aperture means:
• Less light comes in (need greater
exposure time…not good for fast moving
objects…get a blur).
• BUT, also means incoming light is highly
collimated rays, resulting in a sharp focus
at the image plane for objects an a more
varied distance from the point focused on
in the scene. GREATER DEPTH OF FIELD
Objects around flower are in focus with 14
smaller aperture
Resolution, Size of Image





Image size = (rows)*(colomns)
Resolution = size of image = #pixels
low resolution ---> # of pixels is small
high resolution ----> # of pixels is big
HOW DO YOU SELECT A RESOLUTION?
• if grid is too large you will get jagged edges
• This is called Aliasing.
15
No Aliasing
Aliasing
Loss in making a Digital Image?

Loss from sampling?
Ok samples
Under sampled
• Not if choose the correct number of
samples.
• Over-Sampling = when you have more
samples than you need
• Under-Sampling = not enough samples are
used

Loss from quantization?
• Always unless your analog
image miraculously happens to
only have values at the
quantization levels.
16
256 levels 8 levels
Types of
Graphics

Graphic types commonly used on
Web pages:
• GIF
• JPG
• PNG
17
GIF
Background
color
configured
to be
transparent
Background
color – no
transparenc
y







Graphics Interchange Format
Best used for line art and logos
Maximum of 256 colors
One color can be configured as transparent
Can be animated
Uses lossless compression
Can be interlaced
18
JPEG







Joint Photographic Experts Group
Best used for photographs
Up to 16.7 million colors
Use lossy compression
Cannot be animated
Cannot be made
transparent
Progressive JPEG – similar to
interlaced display
19
PNG







Portable Network Graphic
Support millions of colors
Support multiple levels of transparency
(but browsers do not -so limit to one transparent color for Web display)
Support interlacing
Use lossless compression
Combines the best of GIF & JPEG
Browser support is growing
20
Video




What is Video
Video Formats
Video Editing
Video Hosting
21
Video basically a sequence of
images (frames)
22
Video Terms




Frame rate =number of frames per
second – mostly 25-30 fps is what
you will want.
Interlacing = displays odd then even
rows in a frame (does not change all
of them)
Resolution = number of rows and
columns in a frame
Aspect Ration= i.e. 16:9
width:height (this is high def)
23
Video length



File size is proportional to the movie
length.
Videos longer than 1 or 2 minutes
cause long download times. (moving
target)
If it is a long video, consider
streaming video or breaking it into
smaller videos.
24
Video Formats







mpg = MPEG = motion picture expert
group
mp4 = MPEG -4 =version of MPEG
avi = audio video, microsoft
mov,qt = quick time
rv = real video by real networks =
streaming
wmv = windows media video, newer
microsoft standard
flv = flash video (requires flash player
plugin)
25
Frame size




Larger “full-screen” video is 640x480 pixels or
more.
A common frame size for web video is 160x120
pixels (smaller window inside a page).
Not recommend to use a frame size larger than
320x240. (moving target)
The size you should use depends on the CPU
power and the Internet connection bandwidth of
your clients.
26
Video Formats and
Compression




GOAL: reduce the size to store video
by sometime removing not important
information
CODEC: sw/algorithm to compress
(CO) and decompress (DEC) the
video
Usually formats specify compressions
but, sometimes there are options.
Each format can have different
versions – this is important.
27
Video Formats – which one





Many require plug-in to play
Choose a format based on what
browsers will support
Choose a format based on how good
it compresses and how fast it plays
A suggestion for getting fast playing high
compression = MPEG4 with code standard H.264
(best compression)
Alternatively for possibly larger size file use flash28
video flv
MPEG Comparison
MPEG-1
MPEG-2
MPEG-4
Standard since
1992
1995
1999+
Default Video resolution (NTSC)
352 x 288
640 x 480
640 x 480
Max. Audio Frequency range
48 KHz
96 KHz
96 KHz
Max. audio Channel
2
8
8
Regular data rate
1380 kbit/s
6500 kbit/s
880 kbit/s
Frames per sec (NTSC)
30
30
30
Video Quality
Satisfactory
Very good
Very Good
Hardware requirement for
encoding/decoding
Low
Medium
High
29
Video Editing and Creation
Tools



Adobe Premier Software, Adobe Media Encoder
(conversion)
Free tools –
• riva front end for FFmpeg sw tools (conversion one
format to another– harder to use),
• VLC (conversion one format to another and player)
• On windows machine – microsoft windows movie maker
= editing
• DivX (www.divx.com)
• MPEG Stream Clip (search for it)
• xVId (xvid.org)
Cheap tools – quicktime (will do conversion into mpeg4)
30
Video Editing / Conversion online

Search for free video editing /
conversion online services
• www.zamzar.com
31
YouTube hosting



YouTube will take various input
including (see youtube.com for
current list): .wmv, .avi, .mov,mp4
Currently converts to .flv for most
playability
They suggest uploading mp4
32
Quality




Many video-editors allow you to set the overall
quality of the video.
The degree of compression controls the target
quality.
Frame rate and quality are usually tradeoff in
different applications.
Play with what quality setting is acceptable for
you to reduce storage size
33
Audio
34
Audio Formats





mp3 = MPEG-3 audio
mp4 = MPEG-4 audio
ra/rm = streaming real audio
.wma, wav = windows media audio,
waveform audio format by microsoft
aif/aiff = audio interchange file
format by Apple
35
Optimizing for the Web

Length of the audio clip
• Keep the audio clip as short as possible.

Number of channels
• A mono audio file is halved the space of
a stereo file.
• Music – may want stereo
36
Optimizing for the Web

Bit depth
• Audio file on the Web are usually 8-bits.
• Half the size of a 16-bit file.

Sampling rate
• Half the sampling rate will also halve the space
needed.
• Voice only audio file can be reduced to 8KHz.
• 22 KHz music clips are acceptable.

Putting all things together: Mono, 8-bit,
22KHz, MP3 compression or better.
37
Streaming Audio

What is it?
• Play almost immediately after the request,
continues playing the transferring data.

Advantages:
• Address the problem of long download time.
• Control distribution and protect copyright,
because the user cannot get a copy of the file.

Disadvantages:
• Sound quality may be affected by low speed or
unstable Internet connection.
38
What is Streaming?
39
How does it work?
Streaming audio
Packet are sent to a buffer on the receiving
Computer, the RealPlayer will play the sound
File when buffer full
Web browser
Web browser request
a RealAudio from
the web server
RealAudio
Server
Web server
40
MIDI (.mid/.midi)




MIDI stands for “Musical Instrument
Digital Interface” which is developed for
electronic musical instruments.
MIDI files are very compact and very good
for low-bandwidth delivery.
Instruments are “piano, drums, bass,
orchestral strings, …”
Demo: www.findmidis.com
41
Choosing an audio format
Audio Needs
Suggested formats
Short voice greetings
MP3, WMA, WAV, AIFF
News broadcasts
Streaming solutions (RealAudio,
Windows Media)
Background music
MP3, MIDI, WAV, WMA
Music samples for some
audience
MP3 or QuickTime
Radio-style or Live broadcasting
RealMedia System
Musical E-greeting card
MIDI, WAV
42