Graphics Formats for Web Pages

A rectangular bitmap image in file ``xxx.png'' is inserted into a web page with the HTML tag <img src="xxx.png">. Browsers can display images in any of several formats, but you should stick with these two:

The formats JPEG and PNG are the best in the sense that they give the best quality image for the smallest file size. JPEG is the best for photographic images, i.e., faces, plants, buildings, natural scenes. PNG is the best for everything else: icons, drawings, diagrams, printed or handwritten text, mathematical or computer-generated images.

1. PNG

For most mathematical or computer-generated images, PNG is the format to use. PNG is the superior non-proprietary replacement for GIF. (There are millions of old GIF files out there on the web, and all browsers still support GIF, but avoid GIF when creating new material.)

PNG compresses images extremely well when they have just a few colors, or large solid-color areas. PNG takes advantage of the color/pattern redundancies in a rectangular image -- a 2-D array of pixels -- to make a highly compressed file. For example, the image at right, a 322×226 pixel array, is compressed into a file of only 1071 bytes (the equivalent GIF file is 1400 bytes). Thus the PNG image takes little storage space, and is transmitted quickly over the Internet to the user's browser.

A file consisting of an image compressed into PNG format should be named with the .png suffix.

PNG is not so good for photographic images, because it loses a lot of space-saving advantage when used for images with over 28 colors. (However, PNG can handle images with more than 28 discrete colors, which GIF cannot!) It cannot not take advantage of ``photographic redundancy'' they way JPEG does.

2. JPEG

For photographs and certain other kinds of complex images, JPEG is a better compression technique. It achieves spectacular compression rates by throwing away tiny details which are unimportant to the human eye, making it a ``lossy'' compression technique. More precisely, it chops the image into 8×8 pixel squares, performs a Fourier Cosine Transform on each square, throws out some of the higher frequencies and chroma changes which are unimportant (or imperceptable!) to the human eye, and encodes/compresses what's left. One can control the degree of compression; the greater the compression, the lower the quality of the image. Often one can squeeze the image down to ``10%'' quality and still have a picture that looks OK to the human eye. JPEG can be used with grayscale as well as color pictures, and works well with image resizing.
PNG file, 90783 bytes
 JPEG (``10% quality'') file, 11616 bytes

The 442×306 pixel image of the house, above, is too complex to compress well with PNG, but the highly compressed JPEG version is plenty good for many purposes.

A file consisting of an image compressed into JPEG format should be named with the .jpg suffix.

JPEG is not good for diagrams, graphs, text, icons, and monochrome images. For such images, the PNG format saves the exact image (unlike JPEG which is ``lossy'') and compresses such files far better than JPEG, taking advantage of the smaller number of colors and regions of solid color. The image at right is the JPEG version of the PNG graph above; its lossiness is clearly noticeable (and annoying) in a diagram of this sort, and its file size is eight times as large as the equivalent PNG file! Note particularly how JPEG files are noisy around sharp edges, especially lines and curves and text. (See JPEG Artifacts, especially ``Ringing Artifacts''.)

 

3: ...and the rest

3a: What about PostScript?

PostScript is designed for printers, not for computer monitors. Netscape and other web browsers cannot display PostScript images, nor do most computers have software which can do so. However, PostScript documents can be converted to PDF (``Portable Document Format'') which in turn can be viewed using Adobe's free PDF viewing software Acrobat Reader (known as acroread on Unix computers). The Unix command "ps2pdf" can convert PostScript to PDF, as can Adobe Acrobat (commercial version). (For LaTeX documents be careful to use the correct options with dvips, or compile to PDF directly with pdflatex.)

Alternatively, documents created with LaTeX can be converted to HTML documents using latex2html. This software converts each formula into a PNG image, and embeds the images into the text of the document in the HTML files it creates.

To compile LaTeX documents using latex/dvips, incorporated images must be in (encapsulated) PostScript format. But if you use pdflatex to compile a LaTeX document, the incorporated images must be in PNG, JPEG, or PDF format. PostScript files are increasingly becoming unnecessary as an intermediate step in producing images and documents for the web.

EPS and PostScript bitmap images

In general, PostScript is not a bitmap image format, but a vector-oriented page description language. However, the PostScript language does provide a method for expressing raster images, and often a file with the suffix ``.eps'' (Encapsulated PostScript) is indeed a single bitmap image. Convert it to PNG if you wish to use it on the web, and don't be the one to create EPS bitmap monstrosities in the first place!

3b: Other graphics formats

Files using older graphics formats (GIF, TIFF, XBM, PICT, BMP) can be converted to the preferred format (PNG or JPEG) using When creating new bitmap images try to save directly to PNG format (except JPEG for photographs) and avoid these older formats.

 

Yet more gory details: