Web Graphic File Types

Only certain types of images are widely supported by browsers, and can be directly embedded into web pages: PNG, JPG, and GIF.

We recommend the PNG format.

The format you choose can affect:

  • maximum number of colors allowed
  • file size
  • image data loss (lossy vs. lossless compression)
  • image blurriness & pixelation
  • transparency support

File type comparison

Type Best for Bad at Color Compression Transparency
JPG photographs maintaining crisp lines/edges (e.g. text or clip-art), compressing blocks of color full color lossy, adjustable levels **  no
GIF vector graphics, text, art with crisp edges and blocks of solid color color gradients, subtle shading, photographs up to 256 colors lossless partial
PNG images with both subtle colors & crisp edges (e.g. text over a photo) nothing full color lossless yes

** : each time you re-save a JPG at anything less than 100% quality, the picture will degrade. Make sure to keep a full size, 100% quality version of the file around!

Examples – when to use what

Save a basic photo as a JPG
Basic photo

use: PNG-24 or JPG

Photos need a file type with full color support.

meerkat-pack
Photo w/ text

use: PNG-24

Photos need full color support, but JPGs make text fuzzy.

WordPress login - use your email username & password
Screenshots

use: PNG-24

Screenshots often contain a mix of subtle background gradients and text. GIF is bad at gradients (limited number of colors), and JPGs turn text fuzzy, but PNG does both well.

ems
Clipart, icons & logos

use: PNG or GIF

If there are very few colors in the image (no gradients), a GIF will be adequate, but otherwise use PNG-24. Both will preserve sharp lines and crisp text.

If you think you might ever want to use your image on multiple background colors (on a page and in a sidebar, for example) use a PNG-24 with a transparent background.

Last modified on May 13, 2014