All About LJ/Web-friendly Image File Formats
As most (if not all) of you already know, GIF, JPEG and PNG are the image file formats LJ allows for icons. These same formats are, of the various formats web browsers will render, also the most common and accepted out on the Web at large. Every once in a while someone will post asking about which type of file is the best. When this happens many of the responses contain unsupported opinion ("JPEG rules, PNG drools!") or misinformation ("PNG doesn't support transparency."). What follows is an attempt to address this problem by bringing together in a single post all the basic information on the features of each image format, along with recommendations on the uses for which each format is best suited.
Using the table below we can see what each image format is capable of, and through comparison of features we can also figure out what each image format does well or poorly.
GIF JPEG PNG Compression Lossless (lossy compression option available in Photoshop/ImageReady) Lossy Lossless Number of Colors Up to 256/8-bits Up to 16 million/24-bits Up to 16 million/24-bits (PNGs can exceed 24-bit color, but for practical purposes 24-bits is the maximum.) Indexed Color Yes No Color is indexed at up to 8-bits (maximum of 256 colors). Color is not indexed at greater than 8-bits (257 to 16 million colors). Transparency Yes, single color No Yes, alpha (variable) transparency Animation Yes No No Color Management No Yes Yes More About GIF
One obvious thing GIFs are good for is animated images. If your heart is set on making a mini-movie or a loop of Master Shake moshing to Kelis, GIF is your only option (until MNGs are supported by LJ). GIFs make decent still images as well, and the size in bytes of a still icon in GIF format is very small, but with the restriction on the maximum number of colors GIFs are best for line drawings and other kinds of simple graphics where photorealism isn't needed. A photorealistic icon might contain thousands of colors (if every pixel in a 100x100 icon were a different color from every other pixel, the icon would contain 10,000 colors), and if you want to keep the detail you've got to go with either JPEG or PNG.
In the table I note that there's a lossy compression option for GIF in Photoshop/ImageReady. I never use it because in my experience too much quality is lost even when it's applied lightly. Other folks here have had better luck with it, so if you use Photoshop and ImageReady don't be afraid to experiment with it (and the other GIF optimizing options).
More About JPEG
JPEG is the format you're likeliest to encounter when looking at someone's online photo album, getting an archive of movie screencaps from cap_it, or surfing for pr0n. ^_~ JPEG is a decent format for photorealistic icons, but with one caveat: If the JPEG is highly compressed you'll get a nice small file, but you'll also get an ugly icon. Due to its use of lossy compression, JPEGs degrade in appearance as the file size is reduced. If you want to save your icons as JPEGs, try to use as little compression as possible. Another compression-related problem is degradation over time due to repeated compression. If you open a JPEG, edit it a bit and save it, then edit it more and save it again, then edit it even more and save it a third time, each time a save happens the file gets a fresh round of compression, causing a bit more information to be lost. If you want to save your icons as JPEG, save a master copy of the icon in either your image editor's native format, or as a PNG. Always go back to that master copy to edit and save your JPEG copy just once, and always as a separate file from the master. Even if you set your compression level to 'none' in your image editor, some teensy little bit of compression will still be applied and some teensy little bit of information will be lost. Lossy compression is inherent in the JPEG standard and it cannot be turned completely off.
Referring back to GIFs, if your icon is simple, like line art or other styles of imagery with clean lines and relatively few colors, saving as JPEG is not a good idea. The compression artifacts that may be very hard to see in a photorealistic image stand out like hundreds of tiny sore thumbs on a line drawing. GIF and PNG are both much better suited to low color, simple icons.
More About PNG
For still, photorealistic icons, I think PNG is the best format, and it also works for low color line drawings and the like. The lossless compression used by PNG will generally get an icon in at under 40K and do it without compromising the quality of the image. PNG is not as good for making larger images like headers in that the lossless compression may not get you enough reduction in file size to make the image friendly for download on a slow connection (although if a large file size doesn't bother you or your audience, go ahead and make your headers PNG). OTOH, PNG is fine for large images to be used in other ways, especially for screencaps. Few capping programs will save to PNG, but many will save to both BMP (Windows Bitmap) and JPEG. If the capping program only saves to JPEG, stick with that. If the capping program offers a choice between BMP and JPEG, Do What I Do and save your caps as BMP, then use another program to convert from BMP to PNG. BMP files are huge because they're not compressed, which is why most folks cap to JPEG. However, BMP caps are higher quality than JPEG caps due to that very same lack of compression. If you convert your BMP caps to PNG, you get a good amount of compression while keeping the quality, which means you can more reasonably archive better quality caps. (For image conversion, try IrfanView on Windows or GraphicConverter on Mac.)
It's possible you might run into an instance where you save a photorealistic icon to PNG and it doesn't manage to be smaller than 40K. If this happens, switch to JPEG and use the lowest amount of compression necessary to get the icon under 40K.
Transparency: GIF or PNG?
Both GIF and PNG support transparency, but GIF is less sophisticated than PNG. In a GIF, one color in the color index can be set to render as transparent when displayed in web browsers and image viewers capable of acknowledging that setting. The edges of the transparency in a GIF will not be anti-aliased, which means if you want a GIF to look like it has smooth edges against a background you'll only be able to make the GIF compatible with one color for the background.
PNG supports alpha transparency, which means that any color in a PNG may have an alpha channel associated with it which can be set to a variable level of transparency. This makes it possible for a PNG to have anti-aliased edges that look good against any background color. The problem is that alpha transparency isn't universally supported by web browsers, with the main faulty browser being Internet Explorer 6. PNGs with anti-aliased edges can look ugly in IE6. The beta of IE7 correctly renders alpha transparency.
PNG can also do single color transparency like GIF, and that transparency is universally supported since no alpha channels are involved.
If you're making an animated icon and need transparency, use GIF. If you're making a still icon and need smooth edges that look good against any background, use PNG. If you're making a still icon and don't need smooth edges, either GIF or PNG will work.
Color Management for JPEG and PNG
icon_tutorial gets posts on a regular basis from users that read something like this: "My icon looks fine in Photoshop, but when I save to JPEG/PNG the icon looks too dark (or light). Why is this happening?" The answer to this question is...
JPEG and PNG can both contain color management information which may be interpreted by a web browser to adjust how the colors in that image are displayed. This is intended to insure that images in these formats look good on a variety of displays, but spotty implementation in both image editors and web browsers can cause problems.
If you use Photoshop and haven't done it already, you should calibrate your display and set up color management. After this is done it's decision time. You can edit your color management policy to either embed a color profile in your images or discard pre-existing color profiles and not embed a new profile. At the present time I'm recommending the following for web graphics like icons and headers: set color management to discard pre-existing color profiles from source images and not embed a new profile in a finished image. This will give web browsers no information with which to modify the display of an image. If, however, the image you're working on is a photo for display in an online gallery, you may want to consider embedding a color profile. Much will depend at this point on personal preference and whether or not you're color-correcting images professionally. If you do this for a living you may already have a preferred way of doing things that's different from my suggestions, or you may have to adhere to a standard set by an employer. Whatever the case, do what you think best or necessary. My recommendations are not absolute rules, just guidelines for the general situations most graphics amateurs will find themselves in.
Summary
PNG format is in general the best format for making icons, with exceptions for animation (use GIF), the possibility of needing additional compression (use JPEG), and transparency concerns (single color or alpha, alpha support in current web browsers). PNG is also good for headers and larger graphics but the file size may be excessively large if the image has high detail (use JPEG to get a smaller file, but take care to maintain quality). Try PNG for archiving screencaps, too. Since PNG and JPEG are subject to color rendering weirdness, make sure your software is managing color well.
The End Is Near?
Though I've gone into a fair amount of detail about each of the three image file formats more detail is available, especially where GIFs are concerned. If all goes well and I can compose it sooner rather than later, look for a post that will help you get the best results possible when optimizing GIFs (both animated and still) and tell you more about why in certain cases GIF beats JPEG.