Graphic Formats

The web would be horribly boring without graphics, so you'll definitely be using them at one time or another. But how do you know what format to use? Currently there are three common image formats that will work on your web pages; lets have a look at them in detail so you'll know when to use what.

  JPG GIF PNG
Color 24-bit (16 million colors) 8-bit (256 colors) 24-bit and 8-bit
Use it Photographs, images with lots of colors, gradients. Logos, images with few colors or solid blocks of color. 24-bit - same as JPG.
8-bit - same as GIF.
Extras Supports neither transparency nor animation. Supports both transparency and animation. Supports transparency and semi-transparency but not animation.
Pros Preserves all colors up to 16 million. Can choose 1%-100% compression. Crisp lines and colors, no blurring or distorting. Preserves detail. Better quality than JPG, better compression than GIF.
Cons Loses lots of detail and gets blurry the more it's compressed. The more colors, the bigger the file size. Requires a license. Only supported by browsers version 4 and up. 24-bit: large file size.

The Rundown

  • JPGs are best for images with lots of colors, however can get blurry and distorted when compressed.
  • GIFs preserve detail when compressed and don't get blurry, but only support up to 256 colors.
  • GIFs support transparency and animation, while JPGs do not.
  • 24-bit PNGs preserve quality better than JPG, but have a larger file size.
  • 8-bit PNGs support the same amount of colors as GIFs and have a smaller file size.
  • PNGs do not support animation, but do support transparency and semi-transparency.
  • PNG doesn't come with licensing issues GIF does.

Got it? :)