1. Media – an overview 1

2. Media Image Image Video Video Flash Flash Sound Sound HTML Graphics (covered later) HTML Graphics (covered later) Tools to create Tools to create 2

3. 3 Media – all take storage space TermDefinition 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)

4. Images How they are created How they are created Some tips about photography Some tips about photography Resolution Resolution Image Formats Image Formats 4

5. 5 Image Formation How are images created. How are images created.

6. 6 Image Formation Images are formed when a SENSOR registers RADIATION that has interacted with PHYSICAL OBJECTS

7. 7 Types of Images Photography: reflected light Photography: reflected light Range images: distance Range images: distance Tomography: tissue density Tomography: tissue density Infrared: heat Infrared: heat We will concentrate on the first type (gray scale and color). (gray scale and color).

8. 8 Digital Images are 2D arrays (matrices) of numbers:

9. 9 Digital images light intensities, or color light intensities, or color distances, or distances, or other physical quantities. other physical quantities. Depending on the type of image, the numbers, pixel values, represent: Color image and 3 fields –red, green,blue Blow up – shows pixels Pixel values represent Depth – white nearer

10. 10 Intensity Images Light coming from the world hits the sensor.

11. 11 Distant objects appear smaller Distant objects appear smaller Even though B is larger than C it appears the same size because it is more distant. Even though B is larger than C it appears the same size because it is more distant.

12. 12 Optical Parameters- about photography Angular apertures Angular apertures Larger aperture (larger diameter of opening) Lets in more light, but, can have Smaller aperture (smaller diameter of opening)

13. 13 Optical Parameters Larger Aperture means: Larger Aperture means: More light comes in (can have faster shutter speed …take quick picture and hence capture faster moving objects).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 FIELDBUT, 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 For an aperture Shutter speed too low Object near flower are not in focus For this larger aperture

14. 14 Optical Parameters Smaller Aperture means: Smaller Aperture means: Less light comes in (need greater exposure time…not good for fast moving objects…get a blur).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 FIELDBUT, 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 smaller aperture

15. 15 Resolution, Size of Image Image size = (rows)*(colomns) Image size = (rows)*(colomns) Resolution = size of image = #pixels Resolution = size of image = #pixels low resolution ---> # of pixels is small low resolution ---> # of pixels is small high resolution ----> # of pixels is big high resolution ----> # of pixels is big HOW DO YOU SELECT A RESOLUTION? HOW DO YOU SELECT A RESOLUTION? if grid is too large you will get jagged edgesif grid is too large you will get jagged edges This is called Aliasing.This is called Aliasing. No AliasingAliasing

16. 16 Loss in making a Digital Image? Loss from sampling? Loss from sampling? Not if choose the correct number of samples.Not if choose the correct number of samples. Over-Sampling = when you have more samples than you needOver-Sampling = when you have more samples than you need Under-Sampling = not enough samples are usedUnder-Sampling = not enough samples are used Loss from quantization? Loss from quantization? Always unless your analog image miraculously happens to only have values at the quantization levels.Always unless your analog image miraculously happens to only have values at the quantization levels. Ok samplesUnder sampled 256 levels8 levels

17. Types of Graphics Graphic types commonly used on Web pages: Graphic types commonly used on Web pages: GIFGIF JPGJPG PNGPNG 17

18. GIF Graphics Interchange Format Graphics Interchange Format Best used for line art and logos Best used for line art and logos Maximum of 256 colors Maximum of 256 colors One color can be configured as transparent One color can be configured as transparent Can be animated Can be animated Uses lossless compression Uses lossless compression Can be interlaced Can be interlaced 18 Background color – no transparenc y Background color configured to be transparent

19. JPEG Joint Photographic Experts Group Joint Photographic Experts Group Best used for photographs Best used for photographs Up to 16.7 million colors Up to 16.7 million colors Use lossy compression Use lossy compression Cannot be animated Cannot be animated Cannot be made transparent Cannot be made transparent Progressive JPEG – similar to interlaced display Progressive JPEG – similar to interlaced display 19

20. PNG Portable Network Graphic Portable Network Graphic Support millions of colors Support millions of colors Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for Web display) Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for Web display) Support interlacing Support interlacing Use lossless compression Use lossless compression Combines the best of GIF & JPEG Combines the best of GIF & JPEG Browser support is growing Browser support is growing 20

21. Video What is Video What is Video Video Formats Video Formats Video Editing Video Editing Video Hosting Video Hosting 21

22. 22 Video basically a sequence of images (frames)

23. Video Terms Frame rate =number of frames per second – mostly 25-30 fps is what you will want. 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) Interlacing = displays odd then even rows in a frame (does not change all of them) Resolution = number of rows and columns in a frame Resolution = number of rows and columns in a frame Aspect Ration= i.e. 16:9 width:height (this is high def) Aspect Ration= i.e. 16:9 width:height (this is high def) 23

24. 24 Video length File size is proportional to the movie length. File size is proportional to the movie length. Videos longer than 1 or 2 minutes cause long download times. (moving target) 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. If it is a long video, consider streaming video or breaking it into smaller videos.

25. Video Formats mpg = MPEG = motion picture expert group mpg = MPEG = motion picture expert group mp4 = MPEG -4 =version of MPEG mp4 = MPEG -4 =version of MPEG avi = audio video, microsoft avi = audio video, microsoft mov,qt = quick time mov,qt = quick time rv = real video by real networks = streaming rv = real video by real networks = streaming wmv = windows media video, newer microsoft standard wmv = windows media video, newer microsoft standard flv = flash video (requires flash player plugin) flv = flash video (requires flash player plugin) 25

26. 26 Frame size Larger “full-screen” video is 640x480 pixels or more. Larger “full-screen” video is 640x480 pixels or more. A common frame size for web video is 160x120 pixels (smaller window inside a page). 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) 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. The size you should use depends on the CPU power and the Internet connection bandwidth of your clients.

27. Video Formats and Compression GOAL: reduce the size to store video by sometime removing not important information GOAL: reduce the size to store video by sometime removing not important information CODEC: sw/algorithm to compress (CO) and decompress (DEC) the video CODEC: sw/algorithm to compress (CO) and decompress (DEC) the video Usually formats specify compressions but, sometimes there are options. Usually formats specify compressions but, sometimes there are options. Each format can have different versions – this is important. Each format can have different versions – this is important. 27

28. Video Formats – which one Many require plug-in to play Many require plug-in to play Choose a format based on what browsers will support Choose a format based on what browsers will support Choose a format based on how good it compresses and how fast it plays 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) A suggestion for getting fast playing high compression = MPEG4 with code standard H.264 (best compression) Alternatively for possibly larger size file use flash video flv Alternatively for possibly larger size file use flash video flv 28

29. 29 MPEG Comparison MPEG-1MPEG-2MPEG-4 Standard since 199219951999+ Default Video resolution (NTSC) 352 x 288 640 x 480 Max. Audio Frequency range 48 KHz 96 KHz Max. audio Channel 288 Regular data rate 1380 kbit/s 6500 kbit/s 880 kbit/s Frames per sec (NTSC) 303030 Video Quality Satisfactory Very good Very Good Hardware requirement for encoding/decoding LowMediumHigh

30. Video Editing and Creation Tools Adobe Premier Software, Adobe Media Encoder (conversion) Adobe Premier Software, Adobe Media Encoder (conversion) Free tools – Free tools – riva front end for FFmpeg sw tools (conversion one format to another– harder to use),riva front end for FFmpeg sw tools (conversion one format to another– harder to use),rivaFFmpegrivaFFmpeg VLC (conversion one format to another and player) VLC (conversion one format to another and player)VLC On windows machine – microsoft windows movie maker = editingOn windows machine – microsoft windows movie maker = editing DivX (www.divx.com)DivX (www.divx.com)DivXwww.divx.comDivXwww.divx.com MPEG Stream Clip (search for it)MPEG Stream Clip (search for it) xVId (xvid.org)xVId (xvid.org)xvid.org Cheap tools – quicktime (will do conversion into mpeg4) Cheap tools – quicktime (will do conversion into mpeg4) 30

31. Video Editing / Conversion - online Search for free video editing / conversion online services Search for free video editing / conversion online services www.zamzar.comwww.zamzar.comwww.zamzar.com 31

32. YouTube hosting YouTube will take various input including (see youtube.com for current list):.wmv,.avi,.mov,mp4 YouTube will take various input including (see youtube.com for current list):.wmv,.avi,.mov,mp4 Currently converts to.flv for most playability Currently converts to.flv for most playability They suggest uploading mp4 They suggest uploading mp4 32

33. 33 Quality Many video-editors allow you to set the overall quality of the video. Many video-editors allow you to set the overall quality of the video. The degree of compression controls the target quality. The degree of compression controls the target quality. Frame rate and quality are usually tradeoff in different applications. Frame rate and quality are usually tradeoff in different applications. Play with what quality setting is acceptable for you to reduce storage size Play with what quality setting is acceptable for you to reduce storage size

34. Audio 34

35. Audio Formats mp3 = MPEG-3 audio mp3 = MPEG-3 audio mp4 = MPEG-4 audio mp4 = MPEG-4 audio ra/rm = streaming real audio ra/rm = streaming real audio.wma, wav = windows media audio, waveform audio format by microsoft.wma, wav = windows media audio, waveform audio format by microsoft aif/aiff = audio interchange file format by Apple aif/aiff = audio interchange file format by Apple 35

36. 36 Optimizing for the Web Length of the audio clip Length of the audio clip Keep the audio clip as short as possible.Keep the audio clip as short as possible. Number of channels Number of channels A mono audio file is halved the space of a stereo file.A mono audio file is halved the space of a stereo file. Music – may want stereoMusic – may want stereo

37. 37 Optimizing for the Web Bit depth Bit depth Audio file on the Web are usually 8-bits.Audio file on the Web are usually 8-bits. Half the size of a 16-bit file.Half the size of a 16-bit file. Sampling rate Sampling rate Half the sampling rate will also halve the space needed.Half the sampling rate will also halve the space needed. Voice only audio file can be reduced to 8KHz.Voice only audio file can be reduced to 8KHz. 22 KHz music clips are acceptable.22 KHz music clips are acceptable. Putting all things together: Mono, 8-bit, 22KHz, MP3 compression or better. Putting all things together: Mono, 8-bit, 22KHz, MP3 compression or better.

38. 38 Streaming Audio What is it? What is it? Play almost immediately after the request, continues playing the transferring data.Play almost immediately after the request, continues playing the transferring data. Advantages: Advantages: Address the problem of long download time.Address the problem of long download time. Control distribution and protect copyright, because the user cannot get a copy of the file.Control distribution and protect copyright, because the user cannot get a copy of the file. Disadvantages: Disadvantages: Sound quality may be affected by low speed or unstable Internet connection.Sound quality may be affected by low speed or unstable Internet connection.

39. 39 What is Streaming?

40. 40 How does it work? Streaming audio Web browser Web server RealAudio Server Web browser request a RealAudio from the web server Packet are sent to a buffer on the receiving Computer, the RealPlayer will play the sound File when buffer full

41. 41 MIDI (.mid/.midi) MIDI stands for “ Musical Instrument Digital Interface ” which is developed for electronic musical instruments. 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. MIDI files are very compact and very good for low-bandwidth delivery. Instruments are “ piano, drums, bass, orchestral strings, …” Instruments are “ piano, drums, bass, orchestral strings, …” Demo: www.findmidis.com Demo: www.findmidis.comwww.findmidis.com

42. 42 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