Conventional wisdom says this: Always publish your screenshots on your blog as PNG. For the most part, this wisdom is still correct. However, sometimes on-balance JPEG has merits you should consider.
OUR IDEAL
Generally, what we want to achieve when putting screenshots in a blog post is to maintain FIDELITY and SMALL FILE SIZES. Fidelity means that our ideal is that the screenshots match pixel-for-pixel what was on our screen. And – of course - in we want keep file sizes as small as possible – readers of the blog don’t always have great bandwidth.
JPEG HATE
As we know it is lossy. The image seen will not look – to various degrees - like the image we captured. That loss of fidelity is visible as the infamous JPEG “artifacts” as shown in the screenshot below
PNG - 51Kb
This is exactly the kind of image PNGs do great at – sharp lines and text. large solid areas of a single color.
JPEG version (60% quality) – 60Kb
Not only is the JPEG version clearly lacking in fidelity, its file size is bigger than the PNG.
CASE 1: RESIZED SCREENSHOTS
Due to the screen real-estate available on blogs and as a convenience to readers, sometimes screenshots are resized.
Here’s the same PNG as above but resized to fit within 600pixels across.
PNG – 100Kb
The resized version substantially larger in file size than the original PNG despite it’s smaller dimensions.
JPEG (60% quality) – 35Kb
The artifacts clearly visible.
JPEG (70% quality) - 41Kb
JPEG (80% quality) - 51Kb
JPEG (90% quality) – 74Kb
It’s hard to see an artifacts at this point, and the file is still 25% smaller than the PNG equivalent.
One of the points I’d like to make here is the scaling the original PNG image down already caused a loss in fidelity – the resulting image is absolutely not the image we started with. This PNG also contains artifacts – the artifacts of that scaling. Therefore we can apply a bit more thinking into our choice of image format.
In the case of resized screenshots, especially if you have many of them, take a look at how PNG the files sizes are. You may find that selectively using JPEG for the resized images, will be a much better experience for your reader and result in only a minor and maybe imperceptible loss of fidelity.
CASE 2: WHERE PNG DOES POORLY
Remember PNG excels in compression certain kinds of images, but not all. If your screenshots feature applications that have complex content – gradient fills, soft shadows, photographic components.
Here’s the PNG version of my Windows 7 Start Menu.
PNG - 202Kb
JPEG (80% quality) – 51Kb
Minor artifacts
JPEG (90% quality) – 78Kb
Tiny artifacts left around the text. .
JPEG (95% quality) – 111Kb
Slight reduction artifacts left around the text. 111Kb. At a little over 50% of the original PNG size, it seems a fair tradeoff to make.
TECHNICAL NOTES
- The screenshots were taken with Hypersnap 6. You’ll see slightly different numbers with different encoders.
- To see more about the variation in encoders take a loot at my analysis of the .Net framework PNG encoder: part 1 | part 2
- using an <img> tag and relying on the browser to do resizing might address case 1. However I’ve never been satisfied how images look when leaving the resizing to the browser.
PARTING THOUGHTS
PNG is a great format. Most of the time it is the right choice for publishing your screenshots to your blog. However, at least under these two cases, especially if you have many screenshots to show, I suggest considering JPEG for publishing. You might achieve a very substantial saving in file size with only minor sacrifices in fidelity.
-Saveen
Saturday, December 31, 2011 at 4:15PM 
