Latest CMS Developer Posts

HubSpot CMS Blog

File Types: Master when to Use JPEG, GIF, or PNG [INFOGRAPHIC]

Written By Sapphire Reels on Apr 7, 2015 10:00:00 AM


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 This fabulous resource will have you picking out the appropriate file type in no time!




Subscribe to Hubspot's Designer Blog

Topics: Infographic

Sapphire Reels

Sapphire is a Northeastern University Alum and a product marketer at HubSpot. By day, she enjoys dabbling in graphic design and storytelling. By night, you can find her watching mockumentaries or being a foodie.

Stay Up To Date 👇

Learn how to code on HubSpot CMS
  • There are no suggestions because the search field is empty.
Join the HubSpot CMS Developer Slack

Ask questions in the CMS Developer Forum

Join the free CMS for Developers Course

View the HubSpot API Documentation

Recommended Posts