JPEG is probably the the most common image format. It is an old format. While there are better choices, it is entrenched in many places. JPEG will likely be around for quite a long time. The key aspect of JPEG is that it is a lossy format. This means that it loses information as a trade off for a smaller file size. This is similar to how MP3s work. JPEGs can have various quality settings which allow one to decide how much quality (and file size) the image loses.
GIF is also an old image format. However, unlike JPEG it is lossless. That means that no quality is lost when saving an image as GIF. There are caveats to that though. The biggest problem is that GIF only supports 256 colors. This is fine for things like logos and icons, but any real world image will have a significant loss of color info. Today GIF has largely been replaced by PNG. However, one thing GIF has going for it is animation. If you see an animated image on the web any time soon it's likely to be a GIF.
PNG was created largely to replace GIF, both due to patent issues and just general better quality. Like GIF, PNG is lossless. It overcomes GIF's main downfall by supporting either 24 bit or 8 bit color. This means PNGs can either be smaller than GIF for similar color loss, or perfect color. If JPEGs are MP3s then PNG is FLAC.
BMP is is a lossless and totally uncompressed image format used by MS Paint. It produces huge files, which generally makes it the worst possible choice for anything. Using our audio comparison BMP is a crappy version of WAV.
TIFF is another lossless image format. This one is often used by scanners. Like BMP, TIFF produced huge files and should be avoided unless you have a specific reason for using it.
SVG is different from the other formats described here in that it stores info about how to draw the image rather than what the image is. The result is small file size and an image that can scale up infinitely (since the computer is drawing the image itself). It is analogous to MIDI. The downfall is that it uses more processing power, and isn't universally supported by web browsers. In addition, it will only work for simple images that are collections of lines. Wikipedia likes to use SVG a lot, much to my dismay. Getting this image link crashed Firefox, twice.
Now that we've covered the common image formats it's time to answer the question: Which image format do I use and when?
For real world images (eg images taken with a camera), JPEG is the right choice. PNG or TIFF could be used if you want no data loss at all, but you'll pay for it with a huge file size.
For images that were created on a computer (eg logos and icons), PNG is generally best. If you have a heavily used image and want to minimize file size an 8-bit PNG is most likely going to be the smallest file size. People often use JPEG for these types of images which leads to both greater file size and worse image quality.
To illustrate the differences I made a few example images:
Here is a screen shot of Wikipedia:
 |
| PNG Full 79 KB |
 |
| GIF 58 KB |
 |
| JPEG Low 53 KB |
 |
| PNG 8-bit 37 KB |
The full PNG is a perfect image with no quality loss. It's 79 KB. The GIF and 8 bit PNG both lose some color info in exchange for a lower filesize. The 8 big PNG is the smallest file I could get at 37 KB. I've included a low quality JPEG (setting 15/100 in Gimp) to show the artifacting that JPEGs produce with high contrast changes such as you see in computer graphics. Note in the 8 bit PNG that only the color gradient in the Windows title bar shows color loss. All the color icons are fine.
Here is a computer created graphic:
 |
| PNG 8-bit 37 KB |
 |
| JPEG High 183 KB |
 |
| JPEG Low 46 KB |
In this case the original image was a 47 KB GIF. The 8 bit PNG will never lose color info over an 8 bit GIF and will almost always be smaller (about 25% smaller in this case). The NOAA probably uses GIF for maximum compatibility (IE6 doesn't fully support PNG), and simply out of habit. I recommend you open the PNG and the high quality JPEG in tabs and compare them. The JPEG may look alright to begin with, but looking at the PNG shows the JPEG is quite blurry, losing data near any sharp edges. This highlights why JPEG is a terrible choice for computer graphics. Also keep in mind the JPEG is almost 5x as large.
Now here is an image taken with a camera:
 |
| JPEG High 124 KB |
 |
| JPEG Low 28 KB |
 |
| PNG 8-bit 230 KB |
Really, the only choice here is a decent quality JPEG (85/100 pictured). The low quality JPEG is much smaller but also horrible looking. If file size is a concern you would probably want to go with something in the middle. The 8 bit PNG was the smallest file of the various others I tried, and doesn't look very good. A full quality PNG was 786 KB, with no noticeable improvement over the 124 KB JPEG.
Here are some tables with the files sizes (in KB) of the various formats I tried:
| Format | KB | Notes |
| wiki.png8bit.png | 37.4 | Color Loss |
| wiki.pngbw.png | 45.3 | B/W |
| wiki.jpglow.jpg | 51.7 | Artifacts |
| wiki.gif.gif | 58.3 | Color Loss |
| wiki.gifbw.gif | 65.3 | B/W |
| wiki.pngfull.png | 79.4 | Perfect |
| wiki.jpghigh.jpg | 182 | Slight Artifacts |
| wiki.bmp.bmp | 678 | Huge |
| Format | KB | Notes |
| irene.png8bit.png | 36.7 | Perfect |
| irene.jpglow.jpg | 46.4 | Bad Artifacts |
| irene.gif.gif | 46.9 | Original |
| irene.pngfull.png | 66.1 | 24-bit |
| irene.jpghigh.jpg | 183 | Artifacts |
| irene.bmp.bmp | 627 | Huge |
| Format | KB | Notes |
| catskills.jpglow.jpg | 27.6 | Low Quality |
| catskills.jpghigh.jpg | 124 | Good Quality |
| catskills.png8bit.png | 230 | Color Loss |
| catskills.gif.gif | 275 | Color Loss |
| catskills.gifbw.gif | 500 | B/W |
| catskills.pngfull.png | 786 | Perfect |
| catskills.bmp.bmp | 1671 | Huge |
No comments:
Post a Comment