The JPEG file format is the right choice for photographs and other images with continuous-tone color gradations. The JPEG format was developed to reduce the file size of photographic images while maintaining quality. It doesn't do a good job on solid blocks of color; its attempt to "smooth out" the colors often results in blotchiness.
JPEGs work with color resolutions of up to millions of colors (also called 24 bit color). When you save an image as a JPEG, it gets compressed, making the file smaller. However, JPEG compression is lossy, so each time you save a JPEG, you lose some data and reduce image quality.
When saving a JPEG, you can choose a compression level from low to high. Low compression give you better quality but a larger file size. High compression gives you a smaller file -- but less quality. As always in Web design, you must find a balance this time between quality and file size.
 |
Here's a photograph saved as a JPEG file. The JPEG format does a great job with smooth color tones. |
|
Here's a text image saved as a JPEG. The JPEG format does a poor job with solid blocks of color. |
 |
PNG Format
PNG was created specifically for the web.
PNG pronounced ping or p-n-g stands for Portable Network Graphics. It is a lossless format, compressing files without losing any quality.
The PNG format was developed a few years ago to replace the older and more limited GIF file format on the Web. PNG is a very flexible format:
- Files can be palette-based, grayscale, or true color images with color resolutions of up to 48 bits.
- In addition, PNG has a number of new features: cross-platform color and gamma correction, and fully variable transparency effects.
Unlike GIF, however, PNG does not support animation.
Although it's a new format, most image-editing programs can read and save PNG images. Macromedia Fireworks, for example, uses PNG as its native file format. Since it uses lossless compression, PNG files retain all information throughout development.
PNG offers several advantages to Web developers:
- File size—Indexed PNG image files are almost always smaller (generally 5-25%) than identical GIF files.
| |
 |
 |
| |
This GIF image uses a palette of 155 colors. The file size is 5,125 bytes. |
This PNG image uses an identical palette. Its file size is 4,253 bytes. |
- Transparency—Unlike GIF, which only lets you to choose a single color to be transparent, PNG provides full alpha transparency. What this means is that you can have images with graduated transparency. Imagine drop shadows and anti-aliasing against any color. In short, much cooler, professional-looking images.
- Gamma correction—PNG files can carry information to compensate for brightness variations between Macintosh and PC monitors.
Despite these advantages, PNG is not yet fully supported by the major browsers. Versions 4+ of Netscape and MSIE (with the exception of MSIE 4.5 for the Mac) will display PNG images, but there are limitations. In particular, gamma correction and alpha transparency are not consistently implemented.
Digg
del.icio.us
Newvine
furl
StumbleUpon
BlinkList
Newsvine
Magnolia
Facebook
Tailrank
Slashdot
Technorati
Google Bookmarks
Yahoo Favorites
Windows Live
Ask
Previous Page: GIF Format
