JPEG, GIF, or PNG? This classic quandry has riddled us all at one point. Learning how to distinguish when to use a specific file type is key to advancing yourself as a professional designer. I've found that many designers cannot pinpoint the appropriate file type to use when saving out their work. Yet, the implications of using an incorrect file type are vast and have a direct impact on your user's experience.
Knowing the implications of each file type can save you the hassle of fixing a less-than-stellar website experience. Certain extensions are associated with larger file types, which can lag the load time of your website. It's important to keep this in mind, as KISSmetrics has found that not only will 40% of people abandon a website that takes more than three seconds to load, but you will face a 7% reduction in conversions with a 1 second delay in page response.
There are also considerations to be made for the quality of your images. Are you considering a high-resolution hero-image on your homepage? Or maybe a simple logo to represent your service offering? The various uses of your on-site assets will directly affect the type of file you choose, due to compression and loseless formats.
To help you understand the correct file types to use, check out the infographic below, created by WhoIsHostingThis.com. This fabulous resource will have you picking out the appropriate file type in no time!
Source: WhoIsHostingThis.com