(5) JPEG, GIF and PNG

• To recap [Media Types (MIME); Image Content Types (1)]:
• JPEG is the format of choice for photographic images
• GIF was the original format of choice for drawn images such as logos or diagrams
• PNG is the new format of choice, though there are still more GIF images on the Web
  • PNG supports alpha transparency [http://www-archive.mozilla.org/start/1.0/demos/eagle-sun.html]
  • GIF supports animation [http://people.ischool.berkeley.edu/~ryanshaw/gucci/], which accounts for its enduring popularity
  • recent versions of Firefox have support for animated PNGs, which are superior [http://animatedpng.com/index.php/samples/samples-by-codadude/]

(6) JPEG 2000

• There are no new Web image formats on the forseeable horizon
• One contender was the next generation of JPEG: JPEG 2000 [http://en.wikipedia.org/wiki/JPEG_2000]
• JPEG 2000 allows for progressive transmission
  • when viewing very high-resolution images, more detail can be downloaded and added to the image as the user zooms in
  • something similar is offered by Microsoft's (proprietary) Seadragon [http://www.seadragon.com/showcase/chris-jordan/#skull-with-cigarette] technology
• But support for JPEG 2000 on the Web seems to have stalled

(8) Scalable Vector Graphics (SVG)

• JPEG, GIF and PNG are raster [http://en.wikipedia.org/wiki/Raster_graphics] formats
  • they represent pictures using a grid of pixels
• SVG is a vector [http://en.wikipedia.org/wiki/Vector_graphics] format
  • it represents pictures as combinations of lines and shapes
  • the lines and shapes are defined using XML
  • cannot be used for photographic images
• SVG has been a W3C recommendation since 2003 but only recently started getting widespread browser support

(9) SVG Demos

• Web-based SVG editor [http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html]
• PNG tiger [http://www.w3.org/1999/09/SVG-access/tiger.png] vs. SVG tiger [http://codinginparadise.org/projects/svgweb/samples/demo.html?name=tiger&svg.render.forceflash=false]
• Population graphs [http://vis.uell.net/gsvg/poppyr.html]
• Voting maps [http://vis.uell.net/gsvg/electionAtlasGermany.html]
• Animated lyrics [http://svg-wow.org/audio/animated-lyrics.svg] (Safari & Chrome only)
• Light table [http://svg-wow.org/photoAlbum/light-table.svg]
• Embedded browser [http://people.mozilla.com/~prouget/demos/svg/foreignobject.svg] (Firefox only)

(10) Canvas

• Canvas not a format, it is a new HTML element
• It creates an area in an HTML page which can be drawn on using Javascript commands
• Demos:
  • Drawing pad [http://htmlfive.appspot.com/static/draw.html]
  • First-person gifter [http://htmlfive.appspot.com/static/gifter.html]

(11) SVG vs. Canvas

• SVG and Canvas are complementary technologies
• SVG:
  • import and export from tools like Inkscape [http://inkscape.org/] and Illustrator [http://www.adobe.com/products/illustrator/]
  • easier to create interfaces that can be interacted with via the mouse (such as charts and graphs)
  • basic animation is easy, advanced animation is hard
• Canvas
  • can do sophisticated animation (such as video games)
  • no mouse interaction, just keyboard
• It often makes sense to combine the two
  • Firefox stats [http://www.mozilla.com/en-US/firefox/stats/]

(13) Codecs and Containers

• A codec is an algorithm used to compress a digital audio or video signal
• A container format is a particular file format used to deliver compressed audio or video
  • An audio container usually just contains one compressed audio track, plus metadata
  • A video container may contain multiple video and audio tracks, captions or subtitles, plus metadata
• Note that we don't make a distinction between codec and container for digital images [Images on the Web (1)]
  • for example a PNG file can only hold PNG-compressed image data

(14) Codecs and Containers

(15) 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
  • some data sources cannot be downloaded (e.g., a live web cam)
• 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

(16) Audio on the Web

• 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 audio format
  • audio streaming formats often use much less bandwidth

(17) Video on the Web

• Unlike audio, where MP3 quickly became standard, video codecs and containers proliferated without a clear standard
• Until a few years ago (2005-2006) it was still common for sites to offer video in multiple formats, or to exclude certain operating systems
• In 2002, Macromedia added video support to Flash
  • The widespread availability of the Flash plugin (99% of browsers) made it a good choice for distributing video on the Web
  • In 2005, the phenomenal success of YouTube made Flash video the de facto standard

(18) Audio & Video in HTML5

• HTML5 added audio and video elements
• Browsers that support these (Firefox, Safari, Chrome, Opera) can play video and audio without Flash
• The browser must also support the container and codec used
  • Firefox only supports the free Ogg [http://en.wikipedia.org/wiki/Ogg] container and its free codecs
  • Safari only supports what can be played through Quicktime (i.e. not Ogg)
  • HTML5 authors can specify multiple source files for an audio or video element to handle this situation
• Now there is finally a credible alternative to Flash for audio and video on the Web

(19) HTML5 Video Demos

• Basic video playback [http://htmlfive.appspot.com/static/video.html]
• Filtering, clipping and transforming video with CSS and SVG
  • demo 1 [http://people.mozilla.com/~prouget/demos/mashup/video.xhtml]
  • demo 2 [http://people.mozilla.com/~prouget/demos/round/index.xhtml]
• Injecting content into video [http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml]