Scott Hanselman

Bloggers: Know when to use a JPG and when to use a PNG and always Squish them both

May 21, 2014 Comment on this post [24] Posted in Musings
Sponsored By

The best rule of thumb for bloggers using images in their posts is:

Use JPGs for photographs, landscapes, and faces. Use PNGs for charts, graphs, screenshots and cartoons. Use GIFs only for animations, and sparingly.

As with all rules of thumbs, you should use your best judgment. You should aim to understand how these two image formats work so you can make the right decision.

JPEGs

imageJPGs (JPEGs) are "lossy." That means they lose data. They literally throw image data away that they figure your eyes won't see. A good example would be a landscape with a large blue sky. The image format could hold all the detail of the blue sky, literally millions of pixels saying blue, blue, dark blue, darkish blue, sky blue...or it could say "this is a whole area of mostly blueish." Sure, some detail is lost, but for the most part, it's a big blue sky, right? When you save a JPG in your paint program (like Paint.NET) and there's a quality slider for the JPG, the lower the number the more data you'll throw away.

File from Wikimedia Commons

PNGs

PNGs are "lossless." That means that they don't lose data when they are saved. They are more like ZIP files than like JPGs. PNGs also are known for their ability to have transparent regions. With a JPG you might have a white background, but a similar PNG could have a transparent background and be overlaid on other graphics.

File from Wikimedia Commons

Regardless of which one you choose, chances are that the paint app you use (even Photoshop) haven't removed all the unneeded data from your graphics files. Applications like PNGGauntlet or PNGOut can squeeze 10, 20, even 30% from a already-saved file without any loss in quality. This is especially important given the number of folks browsing on mobile devices. Bandwidth matters, and you do everyone a disservice with every one megabyte graphics file you upload to your blog.

pnggauntlet-screen-a0eadac6[1]

I'm a huge fan of PNGGauntlet. There's also Trimage that optimizes JPGs and PNGs on Linux, and ImageOptim for Mac.

PNGGaultlet works HARD. It will turn your PCs fan on, I'm sure, as it works very hard. But PNGGauntlet tries all of PNGOUT, OptiPNG, and DeflOpt and picks the best result to create the smallest PNGs.

After you've got that blog post perfect, I recommend you add a "squish the graphics" step to your workflow. You'll only gain speed and happier readers.

Related Links


Sponsor: Many thanks to Izenda for sponsoring the blog feed this week. Please do check out their Intuitive Ad Hoc Reporting with Stunning Visualizations - Embed real time dashboards into your ASP.NET applications for easy, custom reports across all devices. Download a FREE TRIAL of Izenda Today!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
May 21, 2014 11:29
Great Post Scott. Thanks for explaining this, I've seen seasoned graphics people who don't apply these techniques to the web.

One thing to keep in mind though, PNGs can be considerably bigger with a less than noticeable improvement in quality. If you have things like fine lines, logos, cartoons, etc. PNGs will be smaller, with better quality. But for a detailed photo like the cat they can be a lot larger.

When optimizing for sites there are many times I will save out to an optimized JPG and PNG, see which is smaller and pick the one that's smallest with the best quality. Sometimes it's JPG and the quality loss is acceptable. Most often it's PNG.

Either way the advice of removing metadata and optimizing output is a step you should do no matter the format, every time.
May 21, 2014 11:34
Looking at my post, I kind of repeated the different words but my point was a lot of people go straight to PNG these days and usually it's right, but not every time, and sometimes a PNG can be twice the size of a JPG for no good reason :)
May 21, 2014 12:15
I use RIOT http://luci.criosweb.ro/riot/ wich has built-in preview and can integrate right into IrfanView http://www.irfanview.com/ (using the well named "File/Save for the web" command).
You can compare the gain & quality between resulting JPEG/PNG and make the right choice for your needs.
May 21, 2014 13:06
Scott, maybe on day you can write on how altering an image using .NET Framework adds A LOT of extra information to it (which can be removed using image optimizers). It adds around 20-30% of extra useless information.

Shameless plug: I created a nice utility to optimize images called imgOptimize. I use it daily!
May 21, 2014 13:36
I used to resize image files to required size ("lossy compression type 2") for this kind of optimization. For me, that will now become a first step rather than the only step.
May 21, 2014 13:42
Like always its another Scott production that came up with an amazing tips. And yes, PNGGauntlet is simply great :)
May 21, 2014 17:09
How about the Web Essentials "Optimize Images" feature. Will that accomplish the same as these tools like PNGgauntlet?
May 21, 2014 18:45
.NET needs to be fixed to do at least a bare bones optimization of png and jpeg. See the most basic optimizations for "optipng" level 1 and jpegtran.

The image codecs for .NET need a decent refactoring, optimization and added intellisense for the codec parameters.

Office save as pdf needs an option to not compress/degrade the images.
Ron
May 21, 2014 18:58
Watch for bugs like tools that switch the color format without your knowledge.

Steps: Windows 7, open ms paint, add line of text to the image, save as a 1 bit black and white bitmap, save it as a tiff file (1 bit black and white), open the 1 bit tiff file, add some text and save it to tiff.

This results in converting the 1 bit black and white tiff to a 24 bit color tiff since the newly added text is antialiased. This is easily verified by using imagemagick's identify on the new tiff image.

Adding text to a 1 bit black and white BMP adds the text as 1 bit black and white and does not change the resulting BMP to 24 bit color.
Ron
May 21, 2014 19:06
Thanks Scott,
This clears up confusion i had for years. One question, how about icons? Which format to use and any tool that you could recommend?

Thanks for the great post.
Atul
May 21, 2014 19:18
For PNGs, I use PNGOut, then run it through 1000 iterations of Zopfli. It takes a while. http://superuser.com/questions/559542/create-a-png-with-zopfli

I'm really excited to see how Mozilla's mozjpeg project will perform. It's a jpeg encoding optimization library. https://blog.mozilla.org/research/2014/03/05/introducing-the-mozjpeg-project/
May 21, 2014 19:42
I just checked and your face is only 8.21KB, Scott. Pretty impressive. The JPG must've only encoded "late 30s white guy" with a few extra details.
Sam
May 21, 2014 20:05
It's deja vu all over again...

Anybody remember 28.8 modems?


Jay
May 21, 2014 22:46
Helpful post as usual.

Would anyone happen to have a good recommendation for an image optimization library in .NET that does the heavy lifting for you like PNGGauntlet?
May 22, 2014 1:31
One option that I've found for optimizing lots of different types of files is "FileOptimizer". It works really well!
May 22, 2014 19:13
I downloaded and tried the PNGGauntlet on some of my image files and the difference in sizes were impressive. I will make sure that I compress all of my images from this day forth. I know that there are many online sites that compress images but I came across this one today and would like to share: Compressor.io
May 22, 2014 20:38
I'm interested in optimizing images on the fly from .NET web applications that can be bin deployed (using something other than System.Drawing). Image Resizer (nuget) looks like it might support that, although I haven't tried it out yet. Since I'm still window shopping, I'm curious what others have used and would recommend.
May 23, 2014 14:38
After reading people's comments, I figured I should steer them in the right direction.

Read my question on SO and look at all the answers. You will notice that there isn't a well known native "image squisher" built for .NET but there can be options.

http://stackoverflow.com/q/7362976/590774
May 24, 2014 10:41
Atul - U use http://icofx.ro/ for my icons.
May 24, 2014 11:39
Thanks Issa, good to know I'm not the only person looking for a good solution.
May 26, 2014 5:59
Is there any command line option / alternative to PNGGauntlet?
June 04, 2014 12:45
https://tinypng.com/

Good=)
June 05, 2014 7:45
Relatively uncommonly known fact about PNGs: they also often compress well with gzip.

So just because you're using a "compressed" image format doesn't mean you shouldn't test a possible size reduction with HTTP compression.
June 17, 2014 0:35
Scott is a mind reader. I was exactly looking for such stuff for the website i am working on, and he writes this blog. .. sigh.. i am tired of seeing this man being so useful. Scott,When will you ever write a useless post? Ever?

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.