When to use JPG
- photographic imagery
- when compression doesn't matter
When to use PNG
- when you need transparency
- when you have patterning (backgrounds)
When to use GIF
- when you need backwards compatible animation*
- when an image is primarily comprised of just a handful of colors (2-16)**
- when you don't need transparency and have patterning (although png is preferred)
When to use SVG
- whenever you can as it's typically the smallest file size and resolution independent meaning it can handle any device pixel ratio (retina screens, for example)
- when your art is suitable for vector file formats (icons in particular)
- when you have the luxury of only having to target modern browsers (SVG support is relatively new for some browsers)
When to use icon fonts
- when you need an extensive set of icons
- when, like SVG, you want the benefits of vector file formats
- when you have the luxury of only having to target modern browsers (web font support is relatively new for some browsers)
* With the rise of CSS animation as a viable option for nearly all browsers the use of the .GIF format is less and less the go-to format for web animation. .jpg, .png, and .gif can all be set to have an "animated" feature with the use of CSS. Although animated gifs may be used attractively in web design in certain case scenarios, exceptions are rare, so it tends to be best to just avoid them.
** (.gif images are restricted to only 256 colors within their palette.)
