Common graphic formats
Posted: Wed Apr 13, 2005 8:22 pm
This is to answer some questions about the strengths, weaknesses, and usage of some of the more common image formats.
PNG:
PNG comes in 2 flavors, truecolor and indexed.
Truecolor PNG:
Should not be used on the web due to large file sizes. Great for archiving, master copies, or any other situation where perfect quality is more important than filesize. Has excellent compression for a lossless format (only exceeded by JPEG2000), excellent compatibility, good speed.
Indexed PNG (aka 256 color PNG, aka paletted PNG):
Best format for graphical images (images with sharp edges and large areas of solid color), and screenshots. Excellent compatibility, excellent filesize, great speed. Perfect for web use.
Note: There is a lot of confusion about whether PNGs are a good format to use on the web due to compatibility questions. These only arise with internet explorer, all decent browsers have full support for PNGs. In addition, MSIE -can- handle PNGs (both true color and indexed) just fine, the only problem is with alpha and gamma chunks. The only time most people need to think about alpha or gamma chunks is when dealing with transparency. PNGs have 2 different types of transparency; alpha transparency (allows for partial transparency and shadow effects), and single color (GIF-like) transparency. MSIE can handle single color transparency with no problems, but can't handle alpha transparency.
In short, stick to single color transparency or no transparency, and you'll be fine.
JPEG/JPG:
Should be used with photographic-type images, using with images that contain areas of solid color and sharp edges will result in "echos" and artifacts, plus a bloated filesize. Should -not- be used for archiving or master copy purposes since it is a lossy format (some image data is thrown away every time you save the image). Is best for putting photographic images on the web, as it results in a file approx 1/10th the size of lossless formats, but with little/no visible quality loss. Excellent compatibility, excellent compression for truecolor and greyscale images, excellent speed. One weakness of JPG is that it handles red very poorly.
GIF:
Should only be used on graphical images. Can be used on the web. Best choice for tiny images (approx 40x40px images or less), best format for animated images due to compatibility reasons. Excellent compatibility, excellent speed, good compression (although indexed PNGs are much smaller on any image over 40x40px).
Note about animation: There is also the flash/SWF format for animation, but most progs that can create SWF files are commercial. There is also MNG (a variation on PNG), but there are few programs that can read MNGs, and only a paltry handful that can create them.
JPEG2000:
A good choice for photographic images. Has both lossy (for better filesize) and lossless (for perfect quality) settings. Lossless JP2s are good for archiving and master copy purposes, their size tends to be noticeably smaller than truecolor PNGs. Lossy JP2s get the best balance of quality and filesize for photographic images out of all the available formats.
JPEG2000/JP2 files have 2 major problems: 1) Speed: JP2s take a long time to compress, and a long time to decompress. 2) Compatibility: No browser can view JP2s without a plugin. There are a handful of programs that can create JP2s, but many of these are commercial, and some of the freeware ones have limitations on the dimension of the image.
TIFF:
A lossless format that is no longer of much use. You can get most of the same features, plus better filesizes by using lossless JP2s or truecolor PNGs. The one advantage TIFF has is that you can have multiple "pages" within a single image. Should not be used on the web.
TIFF is a complex format with many options. You can choose from a variety of colorspaces (if you don't know what a colorspace is, don't worry about it), many different compression formats (The TIFF format itself (and most (all?) of the other formats mentioned here) is what's called a "wrapper". Wrappers bundle the information, but don't actually compress anything. Each format has one or more compression formats available for actually compressing the data.), and many color depths to choose from. This has made it very popular over the years for professional level photography and document imaging. It also creates compatibility issues. Most imaging programs claim TIFF support, but most of these can only handle certain types and features of TIFF. The basic types/features can be handled by any TIFF compatible prog, but you never know whether a prog can handle the more advanced features or not until you actually try it.
One other potential (but limited) advantage of TIFF is that it has slightly higher maximum color depth than other formats. Most max out at either 8bit or 24bit, both TIFF and PNG max out at 64bit. However, TIFF's 64bit is slightly better than PNG's 64bit because TIFF uses all 64 bits for color, whereas PNG uses 1/4th if it for the alpha channel. This is rather a moot point though, since the human eye can only percieve a number of colors approximately the same as a 24bit or 32bit image.
BMP:
A common format on windows. Lossless, truecolor or indexed, no compression to speak of (RLE is available, but doesn't compress much), poor compatibility on non-windows systems. Should NEVER be used on the web due to the MASSIVE filesize.
LWF:
Nearly identical to JPEG2000, but is a proprietary format owned by luratech.
DJVU:
Lossy format, good for images that contain both text and photos (think catalogs, comic books, etc). Can be used on the web, but requires a plugin to view in any browser. DJVU achieves good compression by splitting the image into layers. The bottom layer contains the photographic portion of the image, the second layer contains all the black lines and sharp edges, the top layer is like the second one but includes colors. The fact that the different types of data are sperated allows them to be compressed using different methods, this results in a good balance of quality and size. DJVU also includes the ability to have multiple "pages" in a single image. There are only about 2 or 3 programs that can create DJVU images.
You can download a copy of DJVU solo HERE, this is the only freeware prog I know of that can create DJVU files.
LDF:
Nearly the same as DJVU, but is a proprietary format owned by luratech. Several programs can create LDF images, but most limit the number of "pages" you can have.
DJVU and LDF both result in a rather odd mix of blurrinees and sharp edges at high compression, see this example: http://allspark.net/cypherswipe/cover-LDF.png (example is a lossless PNG of the LDF, since browsers can't display DJVU and LDF files) Here's the original PNG so you can see exactly what high LDF/DJVU compression does: http://allspark.net/cypherswipe/cover-color.png
A note about progressive and interlaced images:
Both PNG and GIF formats have the option to create an interlaced image. Both JPEG and JPEG2000 formats include a similar option to create progressive images.
The filesize of an interlaced image will usually be noteably larger than that of a non-interlaced image. The filesize of a progessive image will usually be noteably smaller than a non-progressive image (unless the image is VERY large, then non-progressive will usually be smaller). Choosing interlaced/progressive has no effect what-so-ever on the quality of the image. PNGs/GIFs/lossless JP2s are always lossless, and JPGs/lossy JP2s do not lose more nor less quality because of the progressive option. The only affects interlaced/progressive have are a small change in filesize, and the way the image displays as it's loading.
A note about lossY and lossLESS formats/settings:
LossLESS formats will never lose data when you save them. (GIFs and indexed PNGs will be reduced to 256 colors -before- saving, but are otherwise lossless.)
LossY formats throw away some data every time you save them (this does not include downloading them, or saving them from a website, only when you open them and then save them from within an image editor). This data is usually not visible to the human eye (unless you set the compression level too high). However, this is not a good choice for an image that you plan to reopen/edit/resave often, since it will throw away more data each time.
Some examples of photographic images vs graphical ones:
Graphical:
http://allspark.net/cypherswipe/real-fantasy.png
http://allspark.net/cypherswipe/dragonsbane.png
http://allspark.net/cypherswipe/wise-ass-sig.gif
http://allspark.net/cypherswipe/SK-hawk03.png
http://kmeleon.sourceforge.net/gfx/kmelogo.gif
Photographic:
http://allspark.net/cypherswipe/spideygrab.jpg
http://allspark.net/cypherswipe/thunder-tiger-1.jpg
Some images can be hard to tell which they should be. In these cases, you just have to rely on trial and error. Examples:
http://allspark.net/cypherswipe/IoDsigSM.jpg
http://allspark.net/cypherswipe/SK-hawk01.png
Be sure to check out my related FAQS: What format should I use? ... Common image formats ... Lossy vs lossless vs color reduction
If you have a an improvement suggestion for this (or any of my other FAQs), or an additional question you think should be added, feel free to message me.
PNG:
PNG comes in 2 flavors, truecolor and indexed.
Truecolor PNG:
Should not be used on the web due to large file sizes. Great for archiving, master copies, or any other situation where perfect quality is more important than filesize. Has excellent compression for a lossless format (only exceeded by JPEG2000), excellent compatibility, good speed.
Indexed PNG (aka 256 color PNG, aka paletted PNG):
Best format for graphical images (images with sharp edges and large areas of solid color), and screenshots. Excellent compatibility, excellent filesize, great speed. Perfect for web use.
Note: There is a lot of confusion about whether PNGs are a good format to use on the web due to compatibility questions. These only arise with internet explorer, all decent browsers have full support for PNGs. In addition, MSIE -can- handle PNGs (both true color and indexed) just fine, the only problem is with alpha and gamma chunks. The only time most people need to think about alpha or gamma chunks is when dealing with transparency. PNGs have 2 different types of transparency; alpha transparency (allows for partial transparency and shadow effects), and single color (GIF-like) transparency. MSIE can handle single color transparency with no problems, but can't handle alpha transparency.
In short, stick to single color transparency or no transparency, and you'll be fine.
JPEG/JPG:
Should be used with photographic-type images, using with images that contain areas of solid color and sharp edges will result in "echos" and artifacts, plus a bloated filesize. Should -not- be used for archiving or master copy purposes since it is a lossy format (some image data is thrown away every time you save the image). Is best for putting photographic images on the web, as it results in a file approx 1/10th the size of lossless formats, but with little/no visible quality loss. Excellent compatibility, excellent compression for truecolor and greyscale images, excellent speed. One weakness of JPG is that it handles red very poorly.
GIF:
Should only be used on graphical images. Can be used on the web. Best choice for tiny images (approx 40x40px images or less), best format for animated images due to compatibility reasons. Excellent compatibility, excellent speed, good compression (although indexed PNGs are much smaller on any image over 40x40px).
Note about animation: There is also the flash/SWF format for animation, but most progs that can create SWF files are commercial. There is also MNG (a variation on PNG), but there are few programs that can read MNGs, and only a paltry handful that can create them.
JPEG2000:
A good choice for photographic images. Has both lossy (for better filesize) and lossless (for perfect quality) settings. Lossless JP2s are good for archiving and master copy purposes, their size tends to be noticeably smaller than truecolor PNGs. Lossy JP2s get the best balance of quality and filesize for photographic images out of all the available formats.
JPEG2000/JP2 files have 2 major problems: 1) Speed: JP2s take a long time to compress, and a long time to decompress. 2) Compatibility: No browser can view JP2s without a plugin. There are a handful of programs that can create JP2s, but many of these are commercial, and some of the freeware ones have limitations on the dimension of the image.
TIFF:
A lossless format that is no longer of much use. You can get most of the same features, plus better filesizes by using lossless JP2s or truecolor PNGs. The one advantage TIFF has is that you can have multiple "pages" within a single image. Should not be used on the web.
TIFF is a complex format with many options. You can choose from a variety of colorspaces (if you don't know what a colorspace is, don't worry about it), many different compression formats (The TIFF format itself (and most (all?) of the other formats mentioned here) is what's called a "wrapper". Wrappers bundle the information, but don't actually compress anything. Each format has one or more compression formats available for actually compressing the data.), and many color depths to choose from. This has made it very popular over the years for professional level photography and document imaging. It also creates compatibility issues. Most imaging programs claim TIFF support, but most of these can only handle certain types and features of TIFF. The basic types/features can be handled by any TIFF compatible prog, but you never know whether a prog can handle the more advanced features or not until you actually try it.
One other potential (but limited) advantage of TIFF is that it has slightly higher maximum color depth than other formats. Most max out at either 8bit or 24bit, both TIFF and PNG max out at 64bit. However, TIFF's 64bit is slightly better than PNG's 64bit because TIFF uses all 64 bits for color, whereas PNG uses 1/4th if it for the alpha channel. This is rather a moot point though, since the human eye can only percieve a number of colors approximately the same as a 24bit or 32bit image.
BMP:
A common format on windows. Lossless, truecolor or indexed, no compression to speak of (RLE is available, but doesn't compress much), poor compatibility on non-windows systems. Should NEVER be used on the web due to the MASSIVE filesize.
LWF:
Nearly identical to JPEG2000, but is a proprietary format owned by luratech.
DJVU:
Lossy format, good for images that contain both text and photos (think catalogs, comic books, etc). Can be used on the web, but requires a plugin to view in any browser. DJVU achieves good compression by splitting the image into layers. The bottom layer contains the photographic portion of the image, the second layer contains all the black lines and sharp edges, the top layer is like the second one but includes colors. The fact that the different types of data are sperated allows them to be compressed using different methods, this results in a good balance of quality and size. DJVU also includes the ability to have multiple "pages" in a single image. There are only about 2 or 3 programs that can create DJVU images.
You can download a copy of DJVU solo HERE, this is the only freeware prog I know of that can create DJVU files.
LDF:
Nearly the same as DJVU, but is a proprietary format owned by luratech. Several programs can create LDF images, but most limit the number of "pages" you can have.
DJVU and LDF both result in a rather odd mix of blurrinees and sharp edges at high compression, see this example: http://allspark.net/cypherswipe/cover-LDF.png (example is a lossless PNG of the LDF, since browsers can't display DJVU and LDF files) Here's the original PNG so you can see exactly what high LDF/DJVU compression does: http://allspark.net/cypherswipe/cover-color.png
A note about progressive and interlaced images:
Both PNG and GIF formats have the option to create an interlaced image. Both JPEG and JPEG2000 formats include a similar option to create progressive images.
The filesize of an interlaced image will usually be noteably larger than that of a non-interlaced image. The filesize of a progessive image will usually be noteably smaller than a non-progressive image (unless the image is VERY large, then non-progressive will usually be smaller). Choosing interlaced/progressive has no effect what-so-ever on the quality of the image. PNGs/GIFs/lossless JP2s are always lossless, and JPGs/lossy JP2s do not lose more nor less quality because of the progressive option. The only affects interlaced/progressive have are a small change in filesize, and the way the image displays as it's loading.
A note about lossY and lossLESS formats/settings:
LossLESS formats will never lose data when you save them. (GIFs and indexed PNGs will be reduced to 256 colors -before- saving, but are otherwise lossless.)
LossY formats throw away some data every time you save them (this does not include downloading them, or saving them from a website, only when you open them and then save them from within an image editor). This data is usually not visible to the human eye (unless you set the compression level too high). However, this is not a good choice for an image that you plan to reopen/edit/resave often, since it will throw away more data each time.
Some examples of photographic images vs graphical ones:
Graphical:
http://allspark.net/cypherswipe/real-fantasy.png
http://allspark.net/cypherswipe/dragonsbane.png
http://allspark.net/cypherswipe/wise-ass-sig.gif
http://allspark.net/cypherswipe/SK-hawk03.png
http://kmeleon.sourceforge.net/gfx/kmelogo.gif
Photographic:
http://allspark.net/cypherswipe/spideygrab.jpg
http://allspark.net/cypherswipe/thunder-tiger-1.jpg
Some images can be hard to tell which they should be. In these cases, you just have to rely on trial and error. Examples:
http://allspark.net/cypherswipe/IoDsigSM.jpg
http://allspark.net/cypherswipe/SK-hawk01.png
Be sure to check out my related FAQS: What format should I use? ... Common image formats ... Lossy vs lossless vs color reduction
If you have a an improvement suggestion for this (or any of my other FAQs), or an additional question you think should be added, feel free to message me.
{ - this "shock" smiley zoomed up from 15x15 to 30x30 : NN algo - > GIF: 300 Bytes PNG: 244 bytes | Lanczos algo - > GIF: 414 Bytes PNG: 424 bytes 
Drahken and DOS386
