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