Multimedia Content

Web Architecture and Information Management [./]
Spring 2009 — INFO 190-02 (CCN 42509)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information
2009-03-09

[http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]

Contents E. Wilde: Multimedia Content

Contents

2Abstract
3Images vs. Graphics
1 Image Formats
- 1.1 Graphics Interchange Format (GIF)
  - 6Graphic Interchange Format (GIF)
- 1.2 Joint Photographic Experts Group (JPEG)
  - 8Joint Photographic Experts Group (JPEG)
- 1.3 Portable Network Graphics (PNG)
  - 10Portable Network Graphics (PNG)
  - 11Alpha Channel Effects
2 Video and Audio
- 13Download vs. Streaming
- 14Streamed Paper
- 15Video and Audio on the Web
- 16Content Delivery Networks (CDN)
- 17CDN Request Routing
- 18Audio on the Web
- 19Video on the Web
20Conclusions

E. Wilde: Multimedia Content

(2) Abstract

Pictures are the only multimedia content on the Web that is widely supported by standardized formats. The most important picture formats are the Graphics Interchange Format (GIF), the Joint Photographic Experts Group (JPEG) format, and the Portable Network Graphics (PNG) format. These picture formats target different application areas and depending on the picture material, choosing one format over the other can make a big difference. While audio and video are not supported by Web browsers, they also have become popular media types on the Web.

E. Wilde: Multimedia Content

(3) Images vs. Graphics

Vector vs. Bitmap

Pictures can be encoded in a wide variety of ways [http://en.wikipedia.org/wiki/Comparison_of_graphics_file_formats]
Images are bitmaps of pixels
- it takes scanning/rendering to produce images
- images have a certain native resolution
- scanning is done by a scanner, a fax, or a camera's CCD [http://en.wikipedia.org/wiki/Charge-coupled_device]
Vector Graphics are composed out of graphic primitives
- graphics can be searchable, stylable, and scalable
- the format can have different capabilities (2D vs. 3D)
Graphics preserve model-level information
- this only makes sense if there is a model
- rendering and styling can be an expensive process (e.g., video games)
- images can be a snapshot of some specific view of graphics
Today's Web supports images, but not graphics

Image Formats

Outline (Image Formats)

Image Formats [4]
Video and Audio [7]

Graphics Interchange Format (GIF)

Outline (Graphics Interchange Format (GIF))

Image Formats [4]
1. Graphics Interchange Format (GIF) [1]
2. Joint Photographic Experts Group (JPEG) [1]
3. Portable Network Graphics (PNG) [2]
Video and Audio [7]

Graphics Interchange Format (GIF) E. Wilde: Multimedia Content

(6) Graphic Interchange Format (GIF)

RFC 2046 [http://dret.net/rfc-index/reference/RFC2046] registers the oldest graphics format on the Web
GIF was subject of a long patent debate
- the compression technique of GIF (LZW [http://en.wikipedia.org/wiki/Lzw]) had been patented by Unisys (1983)
- Unisys wanted to get licensing fees from all commercial online uses of GIF
- Portable Network Graphics (PNG) [Portable Network Graphics (PNG) (1)] was developed as an effort to develop a copyright-free format
- in 1999, Unisys changed its tactics and wanted to collect one-time fees ($5000-$7500) from all users
- all GIF-related LZW expired in 2003/2004, so GIF is freely available now
GIF's poor features make PNG the better choice anyway
- 8 bit color (requires dithering for photographs), binary transparency
- GIF's animation feature is the only thing that is not available in PNG …

Joint Photographic Experts Group (JPEG)

Outline (Joint Photographic Experts Group (JPEG))

Image Formats [4]
1. Graphics Interchange Format (GIF) [1]
2. Joint Photographic Experts Group (JPEG) [1]
3. Portable Network Graphics (PNG) [2]
Video and Audio [7]

Joint Photographic Experts Group (JPEG) E. Wilde: Multimedia Content

(8) Joint Photographic Experts Group (JPEG)

RFC 2046 [http://dret.net/rfc-index/reference/RFC2046] standardizes the second popular image format for the Web
- ISO 10918 [http://dret.net/biblio/reference/iso10918] is the standard for the actual image format
JPEG has been specifically designed for photographs
- it always is lossy (it cannot preserve the complete information from a random bitmap)
- it uses perception-based compression (for example, color precision is sacrificed for brightness)

Q = 50, filesize 15,138 bytes	Q = 10, filesize 4,787 bytes	Q = 1, filesize 1,523 bytes

Portable Network Graphics (PNG)

Outline (Portable Network Graphics (PNG))

Image Formats [4]
1. Graphics Interchange Format (GIF) [1]
2. Joint Photographic Experts Group (JPEG) [1]
3. Portable Network Graphics (PNG) [2]
Video and Audio [7]

Portable Network Graphics (PNG) E. Wilde: Multimedia Content

(10) Portable Network Graphics (PNG)

PNG is registered as image/png and is the third major image format
- PNG was intended to be a royalty- and copyright-free replacement of GIF [Graphics Interchange Format (GIF) (1)]
- image formats need to supported by browsers and thus take a long time until they are established
- IE6 implements PNG in a very rudimentary form, IE7 handles PNG correctly
PNG has some advantages over GIF and JPEG
- lossless, compressed palette, grayscale, or true color images
- 8 bit alpha channel for gradual opacity (blending into the background)
JPEG still is the preferred format for photographic pictures
GIF still is the preferred format for animated images

Portable Network Graphics (PNG) E. Wilde: Multimedia Content

(11) Alpha Channel Effects

Video and Audio

Outline (Video and Audio)

Image Formats [4]
Video and Audio [7]

Video and Audio E. Wilde: Multimedia Content

(13) Download vs. Streaming

Web resources usually are downloaded
- browsers may choose to implement incremental rendering (e.g., HTML or images)
- the resource is completely downloaded and stored
Streaming [http://en.wikipedia.org/wiki/Streaming_media] means that there is no complete download
- TV and phone calls are classical examples of streaming
- any navigable media type can use streaming (iPaper [http://www.scribd.com/tools/ipaper] is streamed PDF)
- some data sources cannot be downloaded (e.g., a security camera)
Streaming often is also used because of security issues
- downloads make it easy to get content and redistribute it
- streaming makes redistribution much harder (content must be destreamed [http://en.wikipedia.org/wiki/Destreaming])
- the data formats for streaming are often undisclosed

Video and Audio E. Wilde: Multimedia Content

(14) Streamed Paper

Video and Audio E. Wilde: Multimedia Content

(15) Video and Audio on the Web

Internet Protocols [Internet Architecture] only provide best-effort connections
- Quality of Service (QoS) requires end-to-end QoS provisioning
- QoS was never implemented on the Internet for economic reasons
Data types and expectations co-evolve with the infrastructure
- faster processors and graphics chips can handle high-resolution video
- faster networks and better compression make high-resolution feasible
Almost all data traffic will eventually move to an Internet
- TV and telephony are two very popular examples
- almost all telephony is handled on a Internet today anyway
The public Internet and an Internet are not the same thing
- companies and the military often have separate networks
- using Internet technologies for building a network is cost-efficient
- security and economics decide how Internets are connected

Video and Audio E. Wilde: Multimedia Content

(16) Content Delivery Networks (CDN)

High-volume traffic is better not routed from one place
- Google [http://www.google.com/] and YouTube [http://www.youtube.com/] only look like a a site
- sophisticated routing and load balancing helps handling traffic
Content Delivery Networks (CDN) [http://en.wikipedia.org/wiki/Content_Delivery_Network] are designed for high-volume low-latency delivery
- clients in different parts of the world will be served by different servers
- the internal data distribution and management is handled by the CDN
CDNs are required when sites start handling large traffic volumes
- CDN services can be bought by site/service owners
- Akamai [http://www.akamai.com/] and Limelight [http://www.limelightnetworks.com/] are two popular services
CDN are usually hidden by other technologies
- DNS responses for CDN hostnames are returned based on the request
- prepackaged video codecs for Flash/Silverlight have built-in CDN support

Video and Audio E. Wilde: Multimedia Content

(17) CDN Request Routing

CDN Request Routing

Video and Audio E. Wilde: Multimedia Content

(18) Audio on the Web

Audio is not very popular on the Web
- the Web is mostly visually oriented
- audio content without playback controls is not user-friendly
- most sites using multimedia use video [Video on the Web (1)] instead of audio
Internet radios such as Pandora [http://www.pandora.com/] often use Flash
- they are standalone applications running in a browser
- content is often delivered via HTTP to circumvent firewalls
Audio formats exist in many different variations
- MPEG1 Layer 3 (MP3) [http://en.wikipedia.org/wiki/MP3] was the first widely supported audi format
- Advanced Audio Coding (AAC) [http://en.wikipedia.org/wiki/Advanced_Audio_Coding] is Apple's preferred format because of DRM [http://en.wikipedia.org/wiki/FairPlay]
- audio streaming formats often use much less bandwidth

Video and Audio E. Wilde: Multimedia Content

(19) Video on the Web

Video formats have been evolving quickly for a while now
- video signals have a lot of redundancy that is hard to compute
Depending on the application, algorithms ideally behave differently
- for playback of recorded content, encoding can be very expensive
- symmetric scenarios (such as video conferencing) better use symmetric codecs
Handling video in Plug-Ins [Web Browsers; Plug-Ins (1)] effectively implements dynamic codecs
1. YouTube [http://www.youtube.com/] started serving better quality a while ago [http://news.cnet.com/8301-10784_3-9817732-7.html]
2. the servers and the Flash plug-in have to be updated
3. browsers reload the Flash code every time they load a YouTube page
Video encoding combines time-enabled Image Formats [Image Formats (1)] and audio [Audio on the Web (1)]
- both signals must be carefully synchronized
- sophisticated encodings use variable bitrates and even vary between video/audio rates

E. Wilde: Multimedia Content

(20) Conclusions

Images are the only supported media types on the Web
Video and audio are not really Web Media Types
Image formats serve different purposes on the Web
PNG for graphics and JPEG for photographic images
GIF should be avoided (still required for animated images)

2009-03-09 Web Architecture and Information Management [./]
Spring 2009 — INFO 190-02 (CCN 42509)