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.
derek says
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 :-)
Jon Peltier says
Derek –
Whenever I think I know something about a topic, someone comes along and teaches me something else.
The original PNG I
swipedborrowed 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.JP says
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.
Jon Peltier says
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!Tim Mayes says
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.
teylyn says
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.
Jon Peltier says
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.
JP says
What about converting existing JPG files to PNG? Is it worth it, or is it better to just redo them?
Jon Peltier says
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.
JP says
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?
Jon Peltier says
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.