Picture Formats

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-10-25

This work is licensed under a CC
Attribution 3.0 Unported License

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.

Images vs. Graphics

Images are bitmaps of pixels that represent a picture
- it takes some kind of scanning process to produce images
- images have a certain resolution based on the quality of the scanning process
- scanning can take place in a scanner, in a fax machine, or in a camera's CCD
Graphics are composed out of graphic primitives
- graphics can be searchable, stylable, and scalable
- the graphics format can have very 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

Outline (Image Formats)

Image Formats [7]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Outline (Graphics Interchange Format (GIF))

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]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Graphic Interchange Format (GIF)

RFC 2046 registers the oldest graphics format on the Web
GIF was subject of a long patent debate
- the compression technique of GIF (LZW) had been patented by Unisys (1983)
- Unisys wanted to get licensing fees from all commercial online uses of GIF
- Portable Network Graphics (PNG) 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 …

Outline (Joint Photographic Experts Group (JPEG))

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]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Joint Photographic Experts Group (JPEG)

RFC 2046 standardizes the second popular image format for the Web
- ISO 10918 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

JPEG 2000

JPEG has some problems (for example, it is never lossless)
- compression technology has advanced since JPEG (DCT → Wavelets)
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)
- image/jp2 (JP2) and image/jpx (JPX) are the two JPEG 2000 MIME types
Support for JPEG 2000 is good but not universal

Outline (Portable Network Graphics (PNG))

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]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

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
- 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 and APNG are two available but not widely supported PNG animation formats

Alpha Channel Effects

Outline (Other Image Formats)

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]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Tagged Image File Format (TIFF)

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

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" />

Outline (Graphics Formats)

Image Formats [7]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Image Concepts

Pictures of the real world are always lossy
- there is no (accessible) underlying model of the real world
- the real world is always pictured as well as technically possible
Graphics start from some model and turn that into an image
- an image of a circle will always appear jagged on close inspection
- a graphical picture of a circle is always perfectly round
Graphics can be customized based on presentation needs
- line and text color can be coordinated with the rest of Web page design
- any information can be used as input to the graphics → image conversion
Graphics can be searched for concepts and contents

Outline (Scalable Vector Graphics (SVG))

Image Formats [7]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

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

Image vs. Graphics

Outline (Conclusions)

Image Formats [7]
Graphics Formats [3]
1. Scalable Vector Graphics (SVG) [2]
Conclusions [1]

Multimedia on the Web

Images are the only supported media types on the Web
Graphics and video and audio are not universally supported
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)