Compression - GIF vs PNG

GIFs compress by removing horizontal redundancy. The more vertical detail or noise in GIF images, the less compressed the file will be. Dithering to "improve" colour is especially bad for compressing.

PNG behaves like GIF in that it compresses horizontal patterns, but it also handles vertical patterns and dithering.

GIF vs. PNG Compression
Type	Horizontal	Vertical	Dithered	Vertical
Pattern
Gif Size	150 bytes	334	514	254
PNG Size	119	122	146	294

Compression Ratios
Format Typical Compression Ratios Description

GIF 4:1 - 10:1 Lossless for images (<=256 colors). Best suited for flat color, sharp-edged art. Horizontally oriented bands of colour compress better than vertically oriented bands of colour.

PNG 10-30% smaller than GIFs PNG's similaiar to GIFs but compresses both horizontally and vertically bands of colour.

JFIF (JPEG) 10:1 - 20:1 High quality - has little or no loss in image quality with continuous tone originals. Poor for flat color, sharp-edge art, and bilevel images.

30:1 - 50:1 Moderate quality - generally the best level for the Web.

60:1 - 100:1 Poor quality - suitable for thumbnails and previews. Marked blockiness and Gibb's effect occur.

Format	Typical Compression Ratios	Description
GIF	4:1 - 10:1	Lossless for images (<=256 colors). Best suited for flat color, sharp-edged art. Horizontally oriented bands of colour compress better than vertically oriented bands of colour.
PNG	10-30% smaller than GIFs	PNG's similaiar to GIFs but compresses both horizontally and vertically bands of colour.
JFIF (JPEG)	10:1 - 20:1	High quality - has little or no loss in image quality with continuous tone originals. Poor for flat color, sharp-edge art, and bilevel images.
	30:1 - 50:1	Moderate quality - generally the best level for the Web.
	60:1 - 100:1	Poor quality - suitable for thumbnails and previews. Marked blockiness and Gibb's effect occur.

Compression - GIF vs PNG

Topics