Use GIF only for animations
Use PNG when you need: a transparent background, to keep photos high resolution and fast loading is not an issue, simple graphics with few colours such as logos
Use JPG for most photos and for graphics with complex colours (like gradients)
If you need a lot of technical details about which file type to use, Google has an excellent article about image optimization. Also, there are newer file types, like SVG, WebP or JPEG XR which may become common in the future, but for the moment, the average website owner only needs to know the three rules of thumb above.
Here’s a handy infographic to lead you through the process of choosing an image file type.
What's Your Take?