Why You Should Use PNG and not JPEG
by Jon Peltier
Monday, November 17th, 2008
Peltier Technical Services, Inc., Copyright © 2010.
Licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
Unfortunately, it is all to common to see improper image formats used in web and blog pages. Even people who should know better are stuck in a JPEG rut, when JPEG encoding severely degrades the quality of the image. In Export Chart as Image File and Image File Type Comparison of Exported Charts I have tried to explain why PNG is a better image format for Excel charts.
JPG is for photographic images, and for art with continuously varying color gradients. PNG is for line art, screen shots, text; in short, for most anything computer-related. Even the ancient GIF format is usually better than JPG.
To the rescue comes Louis Brandy. In My First and Last Webcomic Louis cleverly shows the difference between the two image formats, in xkcd style.
Thanks to Karl Peterson for the link.
Related Posts:
- Export Chart as Image File
- Image File Type Comparison of Exported Charts
- Enhanced Export Chart Procedure
- Legend Entry Tricks in Excel Charts
- File Name Functions
- Hide Series Data Label if Value is Zero
- LOESS Utility for Excel
- Contour and Surface Charts in Excel 2007
- How to Build a Simple Panel Chart
- You Say “Pie”, I Say “Bar”
Posted: Monday, November 17th, 2008 under Formatting.
Comments: 11
Comments
Comment from derek
Time: Monday, November 17, 2008, 7:20 am
The game isn’t over when you’ve chosen PNG: you can also check you’ve got an appropriate color depth. 24 bits, or even 36 bits per pixel are frequently used for drawings that have hardly any colors in them, or sometimes are just black and white!
Louis Barandy has used eight bits, which is not a bad choice, but I can do better than his file size of 24K. My preferred picture-compression utility– the Optimiser in Paint Shop Pro 8– has it at 18K for 8-bit median cut, and 13K for 4-bit, i.e. 16 shades of gray. I can get down to 8K if I choose web safe colors only, but then you wash out the grays and lose the full horror of the JPEG artifacts. Of course, in most cases that’s a feature not a bug :-)
Comment from Jon Peltier
Time: Monday, November 17, 2008, 7:38 am
Derek -
Whenever I think I know something about a topic, someone comes along and teaches me something else.
The original PNG I swiped borrowed from Brandy is 23.2 KB (8-bit), and using IrfanView (Image menu > Decrease Color Depth) I converted it to 13.8 KB (4-bit), and I’ve replaced the original by the smaller file. From now on I should process all of my image files. I just checked and IrfanView includes color depth among its batch process operations.
Comment from JP
Time: Monday, November 17, 2008, 8:30 am
I’ve been inconsistent in this regard. Sometimes I use a screen capture program, but in general I’m only posting pictures of dialog boxes, not charts. For my purpose it doesn’t seem mission critical. But I’ll try it and see how it goes.
Comment from Jon Peltier
Time: Monday, November 17, 2008, 9:35 am
Even if it’s not “mission critical”, it’s better if the screen captures look good. Since dialog boxes have substantial amounts of text, stick to PNG. Which of these looks better?
The PNG image looks better, and it’s smaller, 6839 vs 7789 Bytes. Doh!
Comment from Tim Mayes
Time: Monday, November 17, 2008, 2:45 pm
Jon, that’s a dramatic comparison. For some reason, when I right click on the JPG and choose Properties in Firefox it shows the size as 6141 bytes, not the 7789 bytes that you report. Weird.
The one “downside” to PNG that I’m aware of is that IE 6, and earlier, don’t support the transparency feature without some fixes by the webmaster. Lot’s of businesses still use IE 6 for whatever reason, but I still post PNGs without the script to make them look right in that browser. They look a little strange, but I figure that the fix isn’t worth the effort. Nobody has complained yet.
Comment from teylyn
Time: Monday, November 17, 2008, 2:54 pm
quote Jon: Even the ancient GIF format is usually better than JPG.
Right. Absolutely correct.
And in some cases the ancient GIF format is even better than PNG. Especially when using transparency and tartetting an audience that may still be using Internet Explorer 6. This browser, which is still very common out there, does not fully support transparency in PNGs and has some other issues with the format, too, so sticking to good old GIF gives you a higher probability that your page will show up on their browser the way you intend it to look.
So despite all the wonderful things that you can do with PNGs, there’s a slight risk that your viewer won’t see it.
Comment from Jon Peltier
Time: Monday, November 17, 2008, 3:20 pm
Tim -
My bad. I must have been looking at an older image file, which never got uploaded. The JPG image is 6141 bytes.
Tim & Teylyn -
I rarely use transparent images in my web site anymore. My pages are white, my image backgrounds are generally white. On the rare occasions I need a transparent image, I rely on the trusty old GIF format.
I’ve never had a problem with a PNG not being visible in my browser (I’ve switched to Firefox, but used IE6 until about six months ago), and no readers have complained about it.
Comment from JP
Time: Tuesday, November 18, 2008, 12:11 pm
What about converting existing JPG files to PNG? Is it worth it, or is it better to just redo them?
Comment from Jon Peltier
Time: Tuesday, November 18, 2008, 1:20 pm
Jimmy -
Once it’s encoded in JPG, the damage has been done. Your choices are to leave it as a JPG, or recreate it from the original as PNG.
Comment from JP
Time: Wednesday, November 19, 2008, 10:55 am
Okay. If I have a PNG image at 800×500 and want to shrink it while maintaining the aspect ratio (so the picture doesn’t distort), what tools can I use to do that?
Comment from Jon Peltier
Time: Wednesday, November 19, 2008, 11:47 am
Jommy -
If I don’t have access to the object that was turned into the PNG in the first place, I do the following:
Open the image file in IrfanView.
Go to Image menu > Resize/Resample.
Pick a percentage for a new size that changes the image by a number that’s the quotient of two small integers.
For example, 75% (3/4) or 80% (4/5) are better than 78%. This isn’t as critical as it once was.
Use the resample not resize method.
Then I save the new image with a new name. I always retain the original without adulterating it.
It may take some experimenting to get it to look okay.
Write a comment
I welcome comments from my readers. If you have an opinion on this post, if you have a question or if there is anything to add, I want to hear from you. Whether you agree or disagree, please join the discussion.
If you want to include an image in your comment, post it on your own site or on one of the many free image sharing sites, and include a link in your comment. I'll download your image and insert the necessary html to display the image inline.
Read the PTS Blog Comment Policy.