Raster Image Overview

by Matt Ernst <erns0637@pacificu.edu>

Senior, Computer Science Major at Pacific University

Since the Web first started mixing text and graphics, back in the Dark Ages before Netscape, page creators have used different tools for creating and altering pictures. Some of these tools are expensive. Others are completely free. All of them have particular strengths and weaknesses.

Most pictures that you'll encounter on the Web are based on pixels. A pixel (short for "pixel element") represents a single point sample of image information. A two-dimensional grid of pixels uses a large numbers of these samples to build up recognizable images from simple points of image information, much like a mosaic constructed from hundreds or thousands of tiles. Images constructed in this way are called raster images. Another way of representing images is to maintain mathematical representations of curves, fill regions, and associated colorings, and then draw those colored areas at the desired size each time they are used. This sort of image is called a vector image. Although there are some vector images on the Web (notably in the form of Flash, Shockwave, and Adobe SVG (Scalable Vector Graphics)), rasters are far more common.

GIF

There are three common raster formats on the Web, each with strengths and weaknesses. GIF, which stands for "Graphics Interchange Format," was popular in the pre-Web CompuServe electronic service, where it originated, and bulletin board systems. It was also supported in early browsers and continues to be supported today. GIF files can accomodate a maximum of 256 unique colors per image. They allow for one-bit (just "on" or "off") transparency, and they also allow multiple images to be packed into one file, hence the popular animated GIF. GIF uses a compression scheme called LZW to reduce the amount of storage space occupied by an image. It's the reason GIF was preferred over uncompressed formats such as Windows BMP: GIF images look just the same as their uncompressed counterparts but can travel over networks much faster because of their small size.

LZW compression is also one of GIF's drawbacks: the compression scheme is patented, and software that applies the compression scheme must have royalties paid on it. This would not be remarkable except that Unisys (the holder of the patent) did not say that it would be collecting royalties until 1994, when the format was already ubiquitous from seven years of unencumbered use. The original patent is due to expire in 2003, and Unisys has become more aggressive in squeezing money out of LZW-compression users as that date nears. Although commercial products such as Adobe Photoshop and Jasc Paint Shop Pro will already included properly licensed LZW code, the only compelling reason to use GIF is compatibility with older browsers. As these browsers are replaced with more modern ones supporting PNG, there are fewer and fewer reasons to keep using GIF.

GIF is still good at the things it was good at in 1987: it handles artificial images with a limited number of colors (like logos, maps, and cartoons) very well. It's still bad at the things it was bad at in 1987: it poorly represents images with a large number of colors (such as paintings, photographs, and computer renderings) and doesn't compress such images very well.

PNG

The modern alternative to GIF is called PNG, which stands for "Portable Network Graphics." Reasonably recent versions of Mozilla, Netscape, Internet Explorer, Opera, etc. all support PNG. PNG is a patent-free format with significantly greater capabilities than GIF. It can hold 256 color images, like GIF, or 16.7 million color (photographic) images. Its image compression is usually significantly better than GIF. It allows for an entire range of transparencies between the "on" and "off" of GIF; in graphics parlance, it permits an alpha channel. There is an extension to PNG called MNG (for "Multiple-image Network Graphics") that allows for animation similar to animated GIFs.

JPEG

Both GIF and PNG use lossless compression. Lossless compression retains all of the original information found in an image. This is a feature and a limitation of both file formats: a feature, because it always gives back exactly the picture that was put in, but a limitation because it is difficult to produce really small files representing photographic-type images. The alternative to lossless compression is lossy compression: such a compression scheme permanently discards some information to make the file smaller. DVDs, MP3s, and JPEG files all use lossy compression. Good lossy compression can discard a large amount of information without significantly altering human perception of the file.

JPEG (which stands for "Joint Photographic Experts Group", the group that developed standards leading to the JPEG format) is the most common format for lossy-compressed 2D images. The image creator gets to pick a balance between quality and file size: the smaller the file, the more noticeable the changes made to the image (the compression artifacts) become. JPEG compression artifacts are much stronger in images with large areas of solid color, like cartoons and logos; PNG or GIF should be used for such images. JPEG should only be used as the final delivery format for images. It shouldn't be used to store copies of works in progress. Each time a JPEG file is altered and re-saved, the compression artifacts become more noticeable, even if the compression level remains the same. You should save your master images in a lossless format like PNG or TIFF, and then make JPEGs for the Web from those masters.

Raster Image Tools

There's an enormous variety of programs designed to perform anywhere from a handful to a bargeload of tasks on raster images. If you've previously created graphics for the Web, at least one or two of the programs below should already be familiar. Hopefully you'll still find some of them to be pleasant surprises.

Adobe Photoshop

Photoshop is one of the most powerful general-purpose programs for raster image manipulation and by far the most popular. You can use it to alter existing images (like scans of photographs), create brand new images, import artwork created in other Adobe programs, apply various special effects and filters, combine multiple images in a variety of ways, and generally do anything you like to a raster image as long as you're willing to do it manually and one image at a time. Photoshop has strong support for creating and slicing images for the Web through ImageReady, a Web-oriented program bundled with Photoshop. And it integrates nicely with Adobe GoLive.
Photoshop has a few drawbacks as well. Its PNG compression (as of version 6) is unspectacular, so if you care about file size you'll probably want to use a separate program to generate PNGs. It carries a suggested retail price of $609, which is far too expensive for a casual user (educational discounts can help here). Part of the reason for that high price is that Photoshop contains many features that Web image creation will rarely use, such as Pantone and CMYK color support, workgroup synchronization, 64 bit image manipulation, and audio file annotation. Its scripting capabilities are not as accessible and smoothly integrated as the rest of its features.

Jasc Paint Shop Pro

Paint Shop Pro is a Windows-only challenger to Photoshop. It can accomplish most of the tasks that Photoshop can, but its interface is not as polished. It does offer a few things over Photoshop, as well. It has a very nice batch image processing tool and it supports a vast variety of file formats. Unlike Photoshop, you can download Paint Shop Pro to evaluate it before you decide to buy. Paint Shop Pro costs $109, but don't take that to mean it's about one fifth as capable as Photoshop. It just happens to be a bargain.

The Gimp

The Gimp ("GNU Image Manipulation Program") is a completely free tool similar to Paint Shop Pro and Photoshop. It was first developed under Unix, and today it runs on most Unices, Mac OS X, and Windows. It doesn't support very many color spaces, but that shouldn't matter for Web work. It comes packed with filters and scripts, some of them very sophisticated. It has powerful scripting abilities and bindings to a varieties of languages. You can write Gimp scripts in Scheme, Perl, Python, and Tcl. Many example scripts come bundled with the installation, and many more can be found on the Web. Scripts can in fact do practically everything that plugins can, just not as fast.

The UI is somewhat unusual compared to a traditional Windows or Macintosh application. It takes a while to get used to. Sometimes the UI inconsistency introduced by loosely-coupled programmers can be annoying. I wish that every filter had a graphical preview available, for example. But sometimes the UI can beat Paint Shop Pro and even Photoshop. For example, the Gimp will let you simultaneously preview as many image adjustments as you want without executing any of them. The Gimp is not optimized for speed as much as Photoshop and Paint Shop Pro, but for Web-size images that's rarely a problem. If you don't have a general purpose image editor handy, I heartily suggest that you try the Gimp before buying Photoshop or Paint Shop Pro. Did I mention that it's free?

ImageMagick is a powerful suite of tools designed for reading, converting, and manipulating a large variety of image formats. It runs on the Mac OS, Mac OS X, Windows, Unix, even OS/2 and VMS. Most ImageMagick tools are used from the command line, from scripts, or from programming languages. The GUI-less tools can take a bit of getting used to, but they provide powerful image operations and can very easily be used to process thousands of files. One of the nicest things about ImageMagick is that it doesn't need any sort of graphical display to run, so it can be installed on a server and do all of its work there. Its programming language bindings are diverse and powerful. It can even be used from within dynamic content tools like Cold Fusion and PHP. For example, you could have a collection of large, uncompressed photographs in TIFF format that you store from a digital camera and retrieve across a LAN on a local server. At the same time, the server could have a script on it to automatically create shrunken JPEG versions of those pictures with a copyright notice added in the lower left hand corner. The JPEG versions can be freely displayed in a dynamically generated Web gallery while the original TIFFs remain private.

Even if you don't plan to dynamically create images for the Web, ImageMagick is a great program for batch processing images. It has some powerful tools that you won't find in Photoshop, the Gimp, or Paint Shop Pro. Since it doesn't need fast hardware or human intervention between operations, it can be installed even on an old machine past its prime. Need to create uniformly sized and colored versions of 8000 pictures? No problem. Just write the script and let ImageMagick run over the weekend on that obsolete Pentium 166. ImageMagick will even let you convert your old animated GIFs to MNG files.

pngcrush

Pngcrush is designed to do one thing and do it well: crush PNG files down to the smallest size possible. The Gimp and ImageMagick already do a good job of optimizing PNG files, but pngcrush can often improve on their efforts. Photoshop-generated PNG files will experience even more improvement. If you want to have the smallest PNG files possible, pngcrush is the tool for you. It's completely free and runs on Unix (including Mac OS X), Windows, and RISCOS. If you're not using the Windows or RISCOS versions, you'll have to compile it yourself or track down somebody who who's already done so. See the Fink project for a precompiled OS X version.

Lossless JPEG alteration tools

Remember how I said that JPEG images look worse each time you change and save them? While this is true in general, there exists specialized software that will let you crop, rotate, translate, and optimize JPEG files, subject to certain restrictions, with no loss in quality. The above link is the closest thing I could find to an index of these specialized programs. If you need to perform some simple operations on a JPEG file, these tools may save you at least one generation's worth of extra image quality.

Raster Image Overview

November 2002

Volume 2, Issue 9

Feature

Legal

Technology

Tech Corner

Grants and Funding

Life-Long Learning

Book and Site Review

Editorial