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
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.
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.