« Visio: Reset the Page Grid Origin to (0,0) | Main | VisioAutomation: Moving Forward to Visio 2010 »
Wednesday
Dec282011

Advanced Screenshots for your Blog: JPEG has its Place

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.

image

 

JPEG version (60% quality) – 60Kb

Not only is the JPEG version clearly lacking in fidelity, its file size is bigger than the PNG.

0601-60

 

 

 

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.

0601-600pix

 

JPEG (60% quality) – 35Kb

The artifacts clearly visible.

0601-600pix-60

 

JPEG (70% quality) - 41Kb

0601-600pix-70

 

JPEG (80% quality) - 51Kb

0601-600pix-80

 

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.

0601-600pix-90

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

image

 

JPEG (80% quality) – 51Kb

Minor artifacts

0604-80

 

JPEG (90% quality) – 78Kb

Tiny artifacts left around the text. .

0604-90

 

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.

0604-95

 

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

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>