Picture Formats

Web Architecture [./]
Fall 2009 — INFO 290 (CCN 42593)

Erik Wilde, UC Berkeley School of Information
2009-10-27

Creative Commons License [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: Picture Formats

Contents

E. Wilde: Picture Formats

(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, 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. Audio and video in many cases are not handled by the browser itself, but are included in this overview of multimedia on the Web.



E. Wilde: Picture Formats

(3) Images vs. Graphics

Vector vs. Bitmap

Image Formats

Outline (Image Formats)

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

Graphics Interchange Format (GIF)

Outline (Graphics Interchange Format (GIF))

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Graphics Interchange Format (GIF) E. Wilde: Picture Formats

(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 … running-wolf.gif


Joint Photographic Experts Group (JPEG)

Outline (Joint Photographic Experts Group (JPEG))

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Joint Photographic Experts Group (JPEG) E. Wilde: Picture Formats

(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)
Average Quality JPEG Low Quality JPEG Lowest Quality JPEG
Q = 50, filesize 15,138 bytes Q = 10, filesize 4,787 bytes Q = 1, filesize 1,523 bytes


Joint Photographic Experts Group (JPEG) E. Wilde: Picture Formats

(9) JPEG 2000

  • JPEG has some problems (for example, it is never lossless)
    • compression technology has advanced since JPEG (DCT → Wavelets [http://www.acm.org/crossroads/xrds6-3/sahaimgcoding.html])
  • JPEG 2000 is a completely new standard
    • it uses wavelets instead of DCT as the compression algorithm
    • it includes support for lossless encoding (JPEG is always lossy)
    • it even comes with its own transmission protocol (JPIP [http://en.wikipedia.org/wiki/JPIP])
    • image/jp2 (JP2 [http://dret.net/glossary/jp2]) and image/jpx (JPX [http://dret.net/glossary/jpx]) are the two JPEG 2000 MIME types
  • Support for JPEG 2000 is good but not universal


Portable Network Graphics (PNG)

Outline (Portable Network Graphics (PNG))

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Portable Network Graphics (PNG) E. Wilde: Picture Formats

(11) Portable Network Graphics (PNG)

png-transparency.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
    • MNG [http://en.wikipedia.org/wiki/Mng] and APNG [http://en.wikipedia.org/wiki/APNG] are two available but not widely supported PNG animation formats


Portable Network Graphics (PNG) E. Wilde: Picture Formats

(12) Alpha Channel Effects

png-transparency.png png-transparency.png png-transparency.png
png-transparency.png png-transparency.png png-transparency.png


Other Image Formats

Outline (Other Image Formats)

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Other Image Formats E. Wilde: Picture Formats

(14) Tagged Image File Format (TIFF)

  • Standard file format format for scanned images
    • none of the limitations of Graphics Interchange Format (GIF) [Graphics Interchange Format (GIF) (1)]
    • ability to represent any kind of bitmapped image information
    • compression is supported but always lossless (not as effective as JPEG [Joint Photographic Experts Group (JPEG) (1)])
  • Popular for scanned images and similar applications
    • native support in browsers is the exception (only Safari)


Other Image Formats E. Wilde: Picture Formats

(15) Icons

  • Original favicon (a.k.a. page icon or urlicon) format
    • the image format used by Windows for its icons (which is identical to the cursor format)
  • Important on the Web only for Web site icons
    • most browsers will display the icons in the address bar
    • most browsers will remember the icon for bookmarks and shortcuts
  • Icons appear as meta information of a Web page
    • standards are not really tight and based on best practices and browsers
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


Graphics Formats

Outline (Graphics Formats)

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Graphics Formats E. Wilde: Picture Formats

(17) Image Concepts



Scalable Vector Graphics (SVG)

Outline (Scalable Vector Graphics (SVG))

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Scalable Vector Graphics (SVG) E. Wilde: Picture Formats

(19) Graphics for the Web

  • Identified as important media type a long time ago
    • W3C work on SVG for a long time
    • complex format with little support and little success on the Web
  • Embedding SVG in HTML is more art than science [http://www.carto.net/papers/svg/samples/svg_html.shtml]
    • using SVG requires browser-specific HTML code
    • backwards compatibility must support bitmapped version of the SVG pictures
  • Support for SVG is provided by many newer tools
    • the SVG code produced not always is a very good version of SVG
    • SVG has not yet been adopted as something that people really care about


Scalable Vector Graphics (SVG) E. Wilde: Picture Formats

(20) Image vs. Graphics

shapes.png

Source: carto.net [http://www.carto.net/papers/svg/samples/shapes.shtml]



Scalable Vector Graphics (SVG) E. Wilde: Picture Formats

(21) SVG is XML

<?xml version="1.0"?>
<svg viewBox="0 0 270 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
 <g>
  <rect fill="red" stroke="black" x="15" y="15" width="100" height="50"/>
  <rect fill="blue" stroke="black" x="150" y="15" width="100" height="50" rx="12" ry="18"/>
  <circle fill="yellow" stroke="black" cx="62" cy="135" r="20"/>
  <ellipse fill="green" stroke="black" cx="200" cy="135" rx="50" ry="20"/>
  <polyline fill="none" stroke="red" stroke-width="2" points="160,200 180,230 200,210 234,220"/>
  <polygon fill="yellow" stroke="black" stroke-width="1" points="49,272 57,297 114,282 63,314 71,339 49,324 27,339 35,314 13,297 40,297"/>
  <path stroke="black" fill="none" stroke-width="3" d="M150 280l19,10 -22,33 40,3c12,43 44,-83 83,20"/>
  <g stroke="green" fill="none">
   <line x1="15" y1="240" x2="30" y2="200" stroke-width="2"/>
   <line x1="30" y1="240" x2="45" y2="200" stroke-width="4"/>
   <line x1="45" y1="240" x2="60" y2="200" stroke-width="8"/>
   <line x1="60" y1="240" x2="75" y2="200" stroke-width="10"/>
   <line x1="75" y1="240" x2="90" y2="200" stroke-width="12"/>
  </g>
  <g font-size="20px">
   <text x="44" y="88">rect</text>
   <text x="140" y="88">rect (rounded)</text>
   <text x="36" y="180">circle</text>
   <text x="170" y="180">ellipse</text>
   <text x="36" y="263">line</text>
   <text x="156" y="255">polyline</text>
   <text x="16" y="363">polygon</text>
   <text x="140" y="363">path:<tspan x="140" y="383">simple + bezier</tspan></text>
  </g>
 </g>
</svg>


Video and Audio

Outline (Video and Audio)

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Video and Audio E. Wilde: Picture Formats

(23) Download vs. Streaming



Video and Audio E. Wilde: Picture Formats

(24) Streamed Paper



Video and Audio E. Wilde: Picture Formats

(25) Video and Audio on the Web



Video and Audio E. Wilde: Picture Formats

(26) Content Delivery Networks (CDN)



Video and Audio E. Wilde: Picture Formats

(27) CDN Request Routing

CDN Request Routing

Video and Audio E. Wilde: Picture Formats

(28) Audio on the Web



Video and Audio E. Wilde: Picture Formats

(29) Video on the Web



Conclusions

Outline (Conclusions)

  1. Image Formats [7]
    1. Graphics Interchange Format (GIF) [1]
    2. Joint Photographic Experts Group (JPEG) [2]
    3. Portable Network Graphics (PNG) [2]
    4. Other Image Formats [2]
  2. Graphics Formats [4]
    1. Scalable Vector Graphics (SVG) [3]
  3. Video and Audio [7]
  4. Conclusions [1]
Conclusions E. Wilde: Picture Formats

(31) Multimedia on the Web



2009-10-27 Web Architecture [./]
Fall 2009 — INFO 290 (CCN 42593)