### 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)

<sub>\* With the rise of CSS animation as [a viable option for nearly all browsers][1] 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.</sub>

<sub>\*\* (`.gif` images are restricted to only 256 colors within their palette.)</sub>

[1]: http://caniuse.com/#feat=css-animation