Scott Hanselman

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

May 21, '14 Comments [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
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Wednesday, May 21, 2014 7:29:43 AM UTC
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.
Wednesday, May 21, 2014 7:34:19 AM UTC
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 :)
Wednesday, May 21, 2014 8:15:06 AM UTC
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.
Wednesday, May 21, 2014 9:06:39 AM UTC
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!
Wednesday, May 21, 2014 9:36:19 AM UTC
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.
Wednesday, May 21, 2014 9:42:38 AM UTC
Like always its another Scott production that came up with an amazing tips. And yes, PNGGauntlet is simply great :)
Wednesday, May 21, 2014 1:09:56 PM UTC
How about the Web Essentials "Optimize Images" feature. Will that accomplish the same as these tools like PNGgauntlet?
Jarrod H
Wednesday, May 21, 2014 2:45:01 PM UTC
.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
Wednesday, May 21, 2014 2:58:07 PM UTC
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
Wednesday, May 21, 2014 3:06:36 PM UTC
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
atul
Wednesday, May 21, 2014 3:18:31 PM UTC
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/
Wednesday, May 21, 2014 3:42:25 PM UTC
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
Wednesday, May 21, 2014 4:05:03 PM UTC
It's deja vu all over again...

Anybody remember 28.8 modems?


Jay
Wednesday, May 21, 2014 6:46:20 PM UTC
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?
Anon
Wednesday, May 21, 2014 9:31:09 PM UTC
One option that I've found for optimizing lots of different types of files is "FileOptimizer". It works really well!
Anonymous
Thursday, May 22, 2014 3:13:54 PM UTC
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
Thursday, May 22, 2014 4:38:11 PM UTC
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.
Friday, May 23, 2014 10:38:13 AM UTC
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
Issa Fram
Saturday, May 24, 2014 6:41:18 AM UTC
Atul - U use http://icofx.ro/ for my icons.
Saturday, May 24, 2014 7:39:00 AM UTC
Thanks Issa, good to know I'm not the only person looking for a good solution.
Anon
Monday, May 26, 2014 1:59:08 AM UTC
Is there any command line option / alternative to PNGGauntlet?
Wednesday, June 04, 2014 8:45:21 AM UTC
https://tinypng.com/

Good=)
Ahmet
Thursday, June 05, 2014 3:45:57 AM UTC
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.
NotVlad
Monday, June 16, 2014 8:35:23 PM UTC
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?
Imaya
Comments are closed.

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