Click to enlarge
Allen Hsu with UX Collective, has put together a funny little info-graphic to help us decide which type of extension we should use when putting images on a website. While this particular info-graphic is meant to be humorous, it actually provides a good source of information for what extensions are best in various circumstances.
If you’re on the fence about which extension is best, the first question you should ask yourself is.. do I have a photograph or not? Photographs are typically going to be larger in size, and JPGs are going to help compress that file down so that it doesn’t take too long for the image to render when the page loads. PNGs are a good option for smaller sized images that have text or other complexities. This is because of it’s lossless compression. PNG’s will usually do a better job retaining data within the file.
On the opposite end, when you’re uploading a logo or icon, you may want to use an SVG as you can scale the image to any size without losing any of the image quality. Furthermore the file size is typically smaller than traditional images which will help with your website’s loading speed.