Multimedia on the Web Graphics in web pages Downloading software & media Digital photography JPEG & GIF Streaming media Macromedia Flash Graphics in web pages Graphics are very popular in web pages Graphics software Capturing, processing, fine-tuning for web page use Digital camera bundled software Windows bundled imagine software Adobe Photoshop and other brands Free graphics software, graphic images http://www.freebyte.com/graphicprograms/ various free software and free photos and icons Searching via a search engine e.g., go to http://www.google.com/ then click on images Display with different resolutions, same compression 682KB file size 82KB file size 58KB file size 1
682KB, 82KB, 58KB Notice any difference? Image resolution and compression Image resolution The precision of an optical sensor In terms of digital photos, the number of pixels used to capture/represent an image Digital photo images can be stored in files representing the raw pixels The smaller the image size, the lesser difference can be noticed. Image compression Data compression on digital images Many compression methods Probably the most suitable/popular for sceneries and portraits may be jpeg (jpg), Joint Photographic Experts Group available on most all modern digital cameras directly displayable in web browsers a lossy compression method. How JPEG works JPEG divides up the image into 8 by 8 pixel blocks calculates the discrete cosine transform (DCT) of each block a quantizer rounds off the DCT coefficients (compacts data, resulting good (for human vision) but lossy compression The original block is represented by a matrix of intensity values The DCT values turn out to be low values in lower right portion The quantizer sets low values to zeros The result has little visual effect a special jpeg compression technique, taking advantage of the characteristics of the resulting matrix, yields the output data (the step in here, runlength encoding, is not a lossy compression) decompression reverses the transformation Reference: http://dynamo.ecn.purdue.edu/~ace /jpeg-tut/jpegtut1.html More on jpeg A jpeg image can be displayed or printed in arbitrary sizes It can be resized from its default size Given a resolution, an image in jepg can be compressed/saved at different relative quality levels Higher compression can reduce file size significantly, but not affect print quality as significantly 2
Insufficient resolution for a specific size yields a fuzzy result Too much compression also has ill effect Higher than needed resolution for a specific image size does not increase clarity The right resolution and compression for a jpeg file depend on how the file is to be used Large difference in resolutions 382x458=174,956 pixels vs. 53x64=3,392 pixels, Both at level 7 compression Arbitrarily resizing a jpeg image Printing vs. displaying on a monitor Different resolutions needed Low resolution maybe good for monitor display and small prints Good quality monitor display needs much lower resolution than good printing does The larger the image size, the higher resolution and the lesser compression are appropriate Some rules of thumb: For monitor display: 72 ppi, most any modern digital camera For high quality print, a camera needs: 8 x10 photo: 3 meg pixel resolution 20 x30 photo: 7 meg pixel resolution Digital cameras Digital cameras Cameras that capture images with optical sensors, arranged as pixels Colors are captured with color filters over the sensors Typically digital cameras allow the choice of different resolution (number of pixels) settings 3
Typically employ one or more methods of compression, most allow jpeg Better ones typically have higher resolution, and allow more choices of different compression methods and levels of compression Internal memory size, processor type, algorithm, etc. affect the speed of obtaining and the quality of the result Different types of optical sensors Charge-Coupled Device (CCD) http://www.pctechguide.com/19digcam_ccd.htm Complementary Metal Oxide Semiconductor (CMOS) http://www.pctechguide.com/19digcam_cmos.htm There are many other useful features References: http://electronics.howstuffworks.com/digitalcamera.htm http://www.ulead.com/learning/imageinfo.htm http://www.photoxels.com/digitalphotography-tutorials.html Working with a photo processor Adobe Photoshop After opening a photo file, it is the current file, or select one opened to be the current file Changing default image size: Image -> image size Change size => same total resolution, can change back with no loss Change size => change total resolution Once total resolution is reduced, it cannot be restored perfectly. Saving a file, applying compression Given resolution, can save at different compression/quality levels. Normally, to save with one level difference does not have noticeable visual effect. Saving with multiple level difference has more, but still not very significant, different visual effect. Some other Adobe Photoshop features Changing and fixing colors From colored to black and white Changing brightness and contrast Editing, fixing problems Cropping images Combining images Filtering images 4
Photo images for the Web Recommendations on file size from Kodak In general, the smaller the file size the better Save photographic images in JPEG format Save a master image without compression as a starting point Experiment with the amount of JPEG compression If you have no various resolution options, try cropping the image Graphics Interchange Format (GIF) A bitmap image format, widely used on the WWW For still images and for animations Uses efficient, lossless, LZW compression, quick download References: GIF http://en.wikipedia.org/wiki/gif LZW compression http://en.wikipedia.org/wiki/lzw Animated GIF images GIF animation is a set of images, called frames, displayed in sequence, next over previous http://users.bendnet.com/brianhovis/tutorial/home.htm GIF tutorial http://www.webreference.com/dev/gifanim/tutorial.html Download free (evaluation) software http://www.blumentals.net/egifan/ http://www.gifworks.com/ Downloadable media Complete file download necessary Only after complete download, playing can start The traditional multimedia playing approach prior to 1995 May take a long time to download, not convenient for Web applications Streaming Media Streaming media just-in-time (interpreted while arriving) delivery of multimedia information compressed multimedia formats delivered over the Internet Demo: A small avi file (6.67meg), needs to be fully downloaded to play. 5
usually defined at the bit level (comprising a bitstream) players accepting the corresponding protocols play the data in just-in-time form many users can access at arbitrary times, different from broadcasting A Tutorial on Streaming Media Provided by University of Wisconsin http://streaming.wisconsin.edu/understand/understand.h tml Tutorial on the concepts, applications, and guidelines, with demo. Streaming media implementation Codecs Describes a device or program capable of performing transformations on a data stream or signal The compression/decompression routines Encoding tools For compressing the media for Internet delivery Streaming servers Storing and delivering the compressed files for live stream delivery, typically can deliver to thousands users simultaneously Players Sharing the protocol with corresponding servers, receiving the streaming data, playing the data just-intime Streaming media systems QuickTime Developed by Apple Computer Capable of handling various formats Digital video, Sound, Text, Animation, Music, etc. Openly documented QuickTime file format Free QuickTime media player Software development kits available Download free player: http://www.apple.com/quic ktime/download/ Windows Media By Microsoft for Microsoft Windows and some other operating systems Plays various types of audio and video formats The free Windows Media Player Plays media files Copies music to CDs Lets users purchase music from online music stores Download media player: http://www.microsoft.com/download s/search.aspx?displaylang=en 6
RealAudio, RealVideo By RealNetworks Free basic realplayer Early market leader in streaming media Now handles various formats too Download realplayer: http://www.real.com/realpla yer.html?pp=home&type=d lrhap_bb&src=092304realh ome_1_1_2_1_9_1 The players cannot play other proprietary formats The above three major players cannot play each other s proprietary file format In addition to own proprietary format, usually can play, not streaming, most of: music CD - sound waves are sampled 44,056 times per second and converted into digital format, no further compression MP3 Motion Picture Experts Group, Audio Layer 3, a high quality compressed audio Avi Audio Video Interleave, audio video for simultaneous playback Wav (WAVE) - WAVEform audio format, MS and IBM audio for PC Mpeg (MPG) Moving Picture Experts Group, has several standard compression formats, for audio and video DVD video MPEG-2 compressed video, plus multi-channels of varying audio formats Midi Musical Instrument Digital Interface, for transmit information between electronic musical instruments, using it computers can create synthesized music for different instruments Aiff Audio Interchange File Format, for audio Macromedia Flash Macromedia Flash (Flash) A graphics animation program Uses vector graphics Using geometrical primitives, e.g. points, lines, curves, polygons to represent images. Particularly good for cartoon type of animation Not true streaming media, frame oriented The flash files may appear in a web browser or standalone Flash players Flash circumvents display blocking browser controls, allowing ads to display animation even when the enduser has turned off the animation capability in the browser. Maybe used to design better controlled web pages by the designer, no browser change of font size, etc. Content not accessible by most search engines Download player: http://www.macromedia.com/shock wave/download/alternates/ 7
Demo The Macromedia homepage http://www.macromedia.com/ Reload to see different effects. Downloading software safely Downloading software is not 100% safe virus deliberately built in software unknowingly replaced by infected file Safe downloading scan just downloaded file if.zip file, also scan the directory after unzipping after installation, scan the directory where installed for added safety, scan the drive 8