Alternative Image Formats

Zoltan Hawryluk, zhawryluk@sapient.com

A BRIEF HISTORY OF IMAGES on the web

XBM

  • Originally developed for the X-Windows System (icons)
  • Included in NCSA Mosaic due to its UNIX roots
  • A text format (really C source code)
  • Could be written to an image browser image tag with Javascript since Netscape 2 without data URLs (I made the most useless drawing program in the world with it in the late '90s)
  • 1-bit color
  • Compression -- not here!
  • A massive security hole was found with it.
  • Removed from almost all web browsers in the mid 2000's
#define test_width 16
#define test_height 7
static char test_bits[] = {
0x13, 0x00, 0x15, 0x00, 0x93, 0xcd, 0x55, 0xa5, 0x93, 0xc5, 0x00, 0x80,
0x00, 0x60 };

GIF

  • Lossless compression format invented by Compuserve in 1987
  • Officially supports 256 colors (in 1989,  transaparent color was supported)
  • supports multiple image blocks
  • several image blocks together with transparent color can produce more than 256 colors
  • can embed text as text (not used often today)
  • Animation added by Netscape 2.0 as an unofficial extension (and became a de facto standard)
  • Its use of LZW compression was a subject of a patent claim by Unisys.

JPEG

  • lossy compression format introduced in 1992
  • can adjust filesize with more compression
  • can allow slow modems to download low res part first, then increase resolution as file is downloaded (progressive JPEG)
  • truecolor!
  • suitable for photos

PNG

  • Developed in response to the Unisys patent dispute with the GIF format
  • Supports  True Color/Alpha Channel
  • Animation supposed to happen with MNG;  was supported by Firefox (and apparently Opera) for a while.
  • First image format to be supported by W3C

VML

  • Invented by Microsoft, Autodesk, Hewlett Packard and Macromedia
  • Vector Format (not really file format .. embedded in HTML)
  • Internet Explorer only (IE5.5+ (?), dropped after IE8)
  • Was scriptable, CSS stylable
  • Was used a lot in MS Office and the early versions of Google Maps
  • Ideas taken from it and PGML (Sun, Adobe) were combined to make ...

SVG

  • Only one of the older formats that is vector
  • First implemented in Konqueror
  • Took forever for Mozilla to implement it (Firefox 1.5 was the first official release)
  • XML based
  • Can be embedded inside HTML
  • Can be easily scripted without data URLs
  • Can be used with other image formats (fill shapes with an image)
  • Cross-browser issues.

ISSUES WITH THE OLDER FORMATS

  • Animations only with GIF (no alpha channel, usually 256 colors per frame, freakin' huge!)
  • No lossy compression with alpha channel
  • Compression technology has come a long way

JPEG 2000

  • Lossy and Lossless compression format
  • Supposed to be successor to JPEG
  • True Color and Alpha Channel
  • No animation
  • Patent Issues (although the JPEG committee says "Don't worry about it!")
  • Can actually support multiple resolutions in one file (but this is not ideal for the web)
  • Can compress better than JPEG
  • Supported by Safari only
  • Photoshop/GIMP plugins, kdu_compress (from TIFF source), and OSX Preview (!)

JPEG XR

  • Originally called HD Photo (and then Windows Media Photo)
  • Developed by Microsoft
  • Supported by Flash 11+, Internet Explorer 8+ (although an occasional gray border bug was fixed in IE10)
  • Lossy and Lossless
  • Alpha Channel
  • Patents (but Microsoft's  Microsoft Open Specification Promise says "Don't Worry About It!")
  • Photoshop/GIMP plugins, JxrEncApp (part of Jxrlib)

WEBP

  • Lossless/Lossy, Alpha Channel, etc.
  • Way better at high compression levels than the other lossy compression formats
  • Now supports animation
  • Originally a WEBM video frame, which was invented by On2 Technologies (bought by Google)
  • Supported by (surprise, surprise) Chrome
  • Photoshop/GIMP plugins, cwebp

APNG

OMG! What a mess! How can I use this in my Projects?

OPTION 1: MOdernizr

.webp .jpegxr .jpeg2k* .apng

* not yet in there, I have been asked to add support.

PROS

  • Can use <img> tags or background images
  • Can create true color alpha channel animations without JS using CSS animation properties (using the step function)

CONS

  • Background image CSS can be large if using it for lots of images

OPTION 2: <picture>

<picture>
  <source srcset='toronto.jxr' type='image/vnd.ms-photo'>
  <source srcset='toronto.jp2' type='image/jp2'>
  <source srcset='toronto.webp' type='image/webp'>
  <img src='toronto.jpg' alt='toronto'>
</picture>

Pros

  • HTML5!
  • Gracefull degredation/fallback (<img> tag)

CONS

  • Only supported in Chrome (others soon)

OPTION 2a: PICTUREFILL


<picture>
  <!--[if IE 9]><video style='display: none;'><![endif]-->

  <source srcset='toronto.jxr' type='image/vnd.ms-photo'>
  <source srcset='toronto.jp2' type='image/jp2'>
  <source srcset='toronto.webp' type='image/webp'>

  <!--[if IE 9]></video><![endif]-->

  <img srcset='toronto.jpg' alt='toronto'>
</picture>

* Not in yet, but I have been working with them via this fork.

pros

  • Only use JS when needed
  • <img> fallback
  • A small download
  • Can control what image formats to support via grunt

CONS

  • Ugly IE video hack in there.
  • Fallback is a srcset and alt tag in version 3.0 (IE and Firefox don't support srcset)
  • The fallback may change.
  • Can be verbose HTML if including responsive images.

OPTION 4: Server side detection

Made with Slides.com