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
use: PNG-24 or JPG
Photos need a file type with full color support.
Photo w/ text
Photos need full color support, but JPGs make text fuzzy.
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 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.