Image Formats for the Web and Elsewhere

by Akkana Peck

Baffled by all the various image formats?  What should you use on a web site, where you want file sizes to be small so it doesn't take too long to download each image?  What should you use to store your photos permanently?  I hope this page will help, by exploring some of the most common image formats, and their strengths and weaknesses.

General Information

When you're choosing a format for putting images on the web, the most important criterion is file size.  Every user who views the image will need to download it, sometimes over a slow modem link.  There are two ways to decrease an image's file size, and you should use both of them.

First, you should present images at a size no larger than necessary.  Most modem users don't want to wait for images larger than roughly 640x480, and a little smaller than that is better still.  This means actually resizing the image before you upload it to your web site.  Don't try to cheat and use width=xxx and height=xxx in the html to pretend the image is smaller than it really is; the poor user will still have to download the full-sized image, and then won't even get the benefit of seeing it at full size!  (The effect to the user is: "Wow, this site takes forever to load, and then it doesn't even look that good!")  Do use height and width tags: they make the page appear to load a lot faster.  But use them to indicate the real size of the image, not a different size.  (Linux users can use a nifty perl script called wwwis to insert image tags into an html file automatically.)

On a web page which presents a lot of images together, consider using "thumbnails", copies of each image resized to be much smaller.  A good thumbnail size could be anywhere from 80 pixels wide to a few hundred, depending on how many images you show on the page at once.  Again, don't just include the full-sized image and use height and width tags to size it down; your page will take forever to load, and users will hate waiting for it.  Make a copy of the image, and resize it (ImageMagick is an easy way of resizing lots of images in bulk after you copy them).

Second, you can make an image fit a much smaller file size without losing quality by choosing an appropriate image format.

For local storage of images, file size is not so important a consideration.  More important are issues like ensuring that no information is lost, or retaining additional information if you've edited the image in a program like GIMP or Photoshop.

To convert an image from one format to another, usually "Save As" from an image editing program (such as GIMP) will suffice.  Linux users can also use the command-line "convert" tool from ImageMagick.

Specific Formats

GIF

GIF (Graphics Interchange Format, pronounced "giff", not "jiff") is an "indexed" format.  This means that it uses a fixed list of colors (usually a fairly small number, like 256 or "8-bit color", or even less).  Indexed formats are very efficient for images with a small number of colors, like a simple logo; they're very inefficient for images with a lot of colors, like a photograph.  Photographs converted to GIF will usually end up looking very poor, because the number of colors has to be reduced.

GIF also offers two options most other formats don't have: "animated gif", which lets you embed a small animation on a web page (this is an inefficient way to show full movies, but it's good for short animation loops) and "transparency", which lets you specify that part of the image is transparent, which is good for putting logos on top of photographs.

Several years ago, many sites avoided GIF because of patent issues: the patent holder threatened to sue anyone who used GIF images without paying.  This is no longer an issue; the patent has expired, so there's no longer a risk of lawsuits.

JPEG

JPEG (which stands for Joint Photographic Experts Group, the group that defines the standard; also written JPG, and pronounced "jay-peg") is sort of the opposite of GIF.  A JPEG image is always in full color, or at least in a full range of greyscale values.  This means that it's a very inefficient way to store a simple 3-color logo; but it's a very good way to store a photograph.

The other important aspect of JPEG is that JPEG images are highly compressed (which means that you can make a good-looking photograph with a small file size) but the compression is "lossy" (which means that every time you read a JPEG, modify it, and write it back to disk, you lose a little bit of information).  Most image editing software lets you change the amount of JPEG compression by adjusting a "quality" setting; higher quality = less compression = less loss and a better image, but a larger file size.  For web images, you can compress a JPEG quite a bit and still have it look good, so it's worth experimenting if you want to be kind to your users (especially modem users) and keep your images small.

So JPEG is an excellent format to use for the web, but it's not a good format in which to save your original images if you want to edit and change them frequently.

Don't try to set quality to 100 when saving a JPEG, by the way: it'll give you a huge file size without any visible improvement in quality. And even with those disadvantages, it'll still be lossy. A web search on jpeg quality 100 will give some links that explain this in more detail.

JPEG can also store "meta information" about an image, using a format called EXIF ("EXchangeable Image File Format").  Most digital cameras use JPEG as their primary image format, and they add a considerable amount of EXIF information to each image.  Some of this EXIF is very useful, containing camera details like date, aperture, shutter speed and so forth; but it can also contain unneeded information, such as a thumbnail version of the image, which makes the image quite a bit larger than it needs to be.  A program like jhead can trim off this extra EXIF, sometimes as much as 10kb.

BMP

(I don't know how it's pronounced.  Bee Em Pee?)  Lots of Windows users use the Windows Bitmap format, or BMP.  This is a format which retains all information (it's not lossy like JPEG, or indexed like GIF) but it's not compressed at all.  So BMP images are huge.  Don't ever put a BMP image on the web, or in a downloadable package.

PNG

PNG (originally meaning "PNG's Not GIF", though it's often referred to as Portable Network Graphics format, and pronounced "ping") is a somewhat newer format.  It can operate in indexed mode or full-color mode, and their uses are different.

Indexed PNG: this is a good replacement for GIF, which can be just as small, yet have more colors than GIF allows.  It allows transparency, like GIF, and also allows partial transparency (you can make part of the image translucent, so that some of the background shows through).  The catch is that Windows Internet Explorer still doesn't support partial transparency in PNGs, so if you want IE users to be able to see your image properly, you have to use no transparency or full transparency. (If you're worried about this, also consider setting the background color to the background color you plan to use on the web page when you create the PNG. This isn't a guarantee, but it makes it more likely that users will see the image as you intended it.)

Full color PNG: This is an excellent way of storing your original images locally.  Full color PNG does offer compression, but the compression is non-lossy, so you can make your images smaller without fear of losing any details in the image.  The only disadvantage of high PNG compression levels is that it takes more CPU to read and write them.  However, PNG compression is never as efficient as JPEG compression, so a full color PNG will be much larger than a JPEG of the same image.  Full color PNG is therefore not a good web format.

Converting between Full-color and Indexed: Simply using "Save As" to save a full color file as PNG will usually save a full-color PNG.  To save an indexed PNG, you may need to tell your image editing program to convert the image to indexed color first.

Animated PNG: There's a format called MNG which is intended as a replacement for animated GIF, but without the limitations imposed by GIF (for instance, MNG animations can have full color depth and either partial or full transparency).  However, almost no browsers support MNG (some versions of mozilla do, but most don't, and IE doesn't) so MNG is not useful (yet) as a web format.

TIFF

TIFF (Tagged Image File format, also written TIF and pronounced like it looks) is another full-color, non-lossy format intended primarily for storing original images.  It's okay for that, but the catch is that there are lots of different implementations of the TIFF spec, so a TIFF written by one program may not read properly in another program.  If you're tempted to use TIFF for something, full color PNG is probably a better bet.  Tiff file sizes are large, so it's not good for use on the web either.

Other Formats

Some other formats which aren't appropriate for web use, but might be useful for storing images locally or for other uses:
PCD: Photo CD, from Kodak, uses this format.  It includes several resolutions within one file (so files tend to be very large) and is non lossy.  It usually requires special reading software.  You'll need to convert a PCD to some other format (specifying which resolution you want) before you work on it.  On Linux, a program called pcdtoppm can do that, or there's a PCD gimp plugin.
PBM/PPM/XBM: Unix-specific format used in programming.  Some programs, such as pcdtoppm and the netpbm scripts, will only deal with these files, but you probably won't want to use them for anything directly.
PSD: Photoshop's proprietary format.  There are at least two versions of this; the older version was an open format and can be read by a few programs other than Photoshop (for instance, there's a gimp plugin); the newer version is super-seekrit and can only be read by Photoshop.  Use this only if you're using Photoshop to edit an image and you want to save it with information such as layers or paths for further editing.  You'll usually need to convert the image to another format to share it with anyone.
XCF: The GIMP's version of PSD, which saves editing information such as layers and paths.  Files tend to be very large.  Use this only if you're editing files with the GIMP and need to save editing information.

Summary

A summary of what formats to use, when:

Application: Format
A logo with only a few colors: GIF or indexed PNG
A photograph: JPG
Anything with transparency: GIF
Short animations: GIF
Local storage of original images: full color PNG
Edited images with layers: the native format for your image editor, XCF or PSD or whatever.

Some other links

The Bandwidth Conservation Society has tutorials on making images small and efficient for the web.
A webcomic illustrating of why JPG isn't ideal for everything


Linux Imaging
Linux Links
Shallow Sky Home