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