Skip to main content
1 of 4
Pekka
  • 2.6k
  • 3
  • 28
  • 40

This totally depends on the kind of image you want to store.

  • PNG is a lossless compression format best suited for "vector-like" bitmap graphics (i.e. graphics with large, regular areas with the same colour and clearly defined edges; graphics containing clear text).

  • SVG is a vector format, best suited to contain vector graphics (in short, collections of geometrical elements instead of collections of pixels). SVG is limitlessly scalable, while bitmap graphics lose quality when enlarged.

  • JPG is a lossy compression format (among other things, it removes nuances in the image invisible to the human eye to save storage space). It is best suited for photographs; due to its compression method, it is not well suited for vector illustrations or text.

Browser compatibility:

  • PNG Graphics are supported across browsers, with the exception of IE 6 if the PNG contains alpha transparency (the transparent portions will be rendered as a solid grey), and all versions of IE if the PNG is inside a HTML element with opacity less than 100% (but that's an edge case).

  • SVG is not always an option yet because browser support is not 100% at the moment. There may also be other behavioural differences to a normal <img> tag. Use this only if you know what you're doing.

  • Standard JPG is supported across all browsers as long as saved in RGB mode rather than CMYK (if your program doesn't make the distinction, it probably is the default).

Pekka
  • 2.6k
  • 3
  • 28
  • 40