- 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.
More about compressions.
The reason we compress images in the first place is to reduce the time it takes an image to load. Image compression turns images into code. The code is transferred to the user’s browser and decompressed for viewing. Lossless and lossy compressions are two different approaches to achieve the same goal, make load times faster. Lossy compression attempts to make the image smaller by removing details the human eye doesn’t notice. Over time, it naturally runs out of those minor details to remove and will begin to ruin the quality of the image. So always have a good backup lossless compression image. Lossless compression does not reduce the file size nearly as well as lossy compression, but the quality is never lost. Lossless compression can use patterns in the images and reduce them to symbols or simple expressions.
There are advances in compression and image enhancement constantly. The PNG for instance, is predecessor to GIF. One of the gifts of GIFs, was animation. While animated images have certainly not gone away, GIFs only display 256 colors and would be considered poor quality on almost any modern website. Animation can now be done with CSS and DOM scripting so there is really no need for GIF any more, at least not on websites. Next time, we will take a look at emerging image type that was made for the web: SVG.
Facebook
Twitter
LinkedIn
Google+
RSS