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.

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
Color photo

use: JPG

Photos need a file type with full color support. JPGs with their lossy compression, will result in smaller files than PNG-24.

Color photo w/ text or color blocks

use: PNG-24 or high quality JPG

Photos need full color support, so you’ll need either PNG-24 or JPG. Lower quality JPGs will leave pixellated artifacts when compressing text or shapes with sharp edges – make sure you use a high enough quality to prevent this. PNGs will always keep edges crisp, but produce larger files.

WordPress login - use your email username & password

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.

Clipart, icons & logos

use: PNG-8, PNG-24, or GIF

If there are very few colors in the image (no gradients), a GIF or PNG-8 will be adequate, but otherwise use PNG-24. All 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.