Select the Best Format
Matching the right format to the right image saves valuable download time and makes the image look better.
There are three formats you might want to consider:
GIF and JPEG formats are supported by all browsers. Newer browsers (5x and above) also support the PNG file format, which is specifically designed for web use.
Each of these formats compresses graphic data using different methods. Each method works best with a certain type of graphical data: GIF or PNG for line art with blocks of solid color and JPEG for photos or grahics with continuous tones.
Deciding on the type and amount of compression you need is a balancing act. Too much compression negatively impacts image quality, while too little can slow your site to a painful crawl. The goal is to give readers something pleasing to see within the time they are willing to wait.
This chart shows the three formats and their compression features:
| Format |
Compression Ratios |
Description |
| GIF |
4:1 - 10:1 |
Lossless for images. Works best for flat color, sharp-edged art. Horizontal bands of color compress better than vertical bands. |
| JPEG |
5:1 - 10:1 |
High quality - has little or no loss in image quality with continuous tone originals. Worse results for flat color and sharp-edge images. |
|
20:1 - 40:1 |
Moderate quality - usually the best choice for the Web. |
|
50:1 - 100:1 |
Poor quality - suitable for thumbnails and previews. |
| PNG |
one third smaller than GIFs |
PNGs behave similarly to GIFs and work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best. |