- 13Sep, 2012
JPG vs. PNG: Do You Know the Difference?
JPG, GIF, PNG, Exif, BMP, TIFF, SVG, RAW*… the list goes on. It seems like there are a lot of options available to content managers for image formatting. The question is, do you know when to use each? Here’s a quick summary of the two formats you’ll likely end up using for your basic image needs on the web: JPG and PNG.
The short answer is JPG, most of the time. JPGs are compressed up to 75% more than a PNG and in some cases, the difference in quality can’t even be seen. That means a JPG takes far less time to load on a page than a PNG. According to studies done by Google and Amazon, half second delays in load times can cause a 20% drop in traffic. “People don’t like to wait. Don’t make them.”
So why aren’t all images in JPG format? There a few reasons and situations to use the PNG. First off, transparency. PNGs can be saved with transparent backgrounds or opaque colors, JPGs cannot. So if you have a great company logo or custom graphic that you want to see all over the web, you’ll have to use a PNG.
Another reason not all images are created JPG is because with great compression rates, comes great data loss. Every time you save that JPG, you lose some of the information. The process is called “lossy” compression. PNGs on the other hand, do not lose data and so use “lossless” compression. If you’re interested, the two compression types are explained in a little more detail a few paragraphs down. For now though, its important to note that PNGs never lose their quality, as long as the resolution remains the same. Where as a JPG will have noticeable differences in quality after only a few saves.
The solution is to use your PNGs as master files and make JPGs out of them to be loaded by the webpage. After you or your designer have created the graphics for your site, you should save copies of the images as PNGs and save them somewhere safe, but don’t put them in your website. DiggsDesign offers an image storage and optimization service. Contact us to find out more.
*Exif and RAW are digital camera formats and TIFF is a high resolution format. Essentially for print. None of them should be used for websites.