Often times when I’m teaching clients how to best utilize their websites they’re confused by the various types of images they can save and upload to their site. Anyone who has ever been taught by me knows I’m a huge advocate of the PNG 
Not so much a fan of the JPG and here’s why… When you design web graphics you want them to appear as clearly as possible and you want the colors to remain intact. A JPG is fine for a photograph, but when you start adding colors and text to that photograph things get a bit fuzzy. Literally. There are, of course, quite a few other file types out there but these are the two main types bloggers and website owners will use. Here’s an example of what a graphic I created looks like when saved as both types, side by side for you to see the difference.
The JPG below has been saved at the maximum quality allowed of a JPG in Photoshop.
Here’s the same side by side comparison saved at medium JPG quality. As some image editing software doesn’t allow for you to choose what quality, this is most commonly seen on the web.
Another comparison of graphics saved as different file types…
and…
Perhaps one of the most obvious examples of PNG vs JPG is when you see text on a photograph. Notice the clarity of the text on the PNG and the blur on the JPG text, as well as the pixelation of the sky in the images below.
The clarity in your graphics is what can set you apart from other websites. Some may argue that JPG files load faster, and they do, but when using graphics like above I’d say the extra few seconds are well worth the wait.
For details on each file type and more, visit this link: http://en.wikipedia.org/wiki/Image_file_formats
February 16, 2012 at 2:02 pm
Thanks! I love using PNG too!!!
February 16, 2012 at 2:09 pm
i was just going to mention your last point. i prefer png’s hands down, but i find they can weigh down a site even with compression applied. do you have any special trick on making them smaller??
February 16, 2012 at 2:12 pm
There are various services available that you can use to compress png files, here’s one: http://punypng.com/
And here’s a fabulous article from Smashing Magazine with tips to optimize them on your own: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
February 16, 2012 at 2:37 pm
Awesome! I thought PNGs were only used for transparent backgrounds. I will definitely be using them more from now on.
February 16, 2012 at 4:08 pm
Thanks so much for the tutorial and the visual examples! I definitely will switch to PNGs for now on. ~Dee
February 16, 2012 at 4:24 pm
thanks for the compression ideas – i will try those out
April 4, 2012 at 9:30 am
PNG is definitely better. I also personally observed that ONG images are better quality. However, for web JPG offers small size.
September 12, 2012 at 1:36 pm
Thanks for the clarification, Lindsey – I’ve only recently started to read about why I should be using .png and not .jpg – I will definitely be looking into going with .png for any images that include text!
December 16, 2012 at 7:10 am
This is great. I love using png’s too
March 12, 2013 at 11:11 pm
I feel this is among the most vital info for me. And i’m satisfied reading your article. But should statement on some basic issues, The website taste is wonderful, the articles is in reality excellent : D. Just right process, cheers
April 9, 2013 at 1:22 am
Any thoughts on what is best for printing?
April 9, 2013 at 9:53 am
I would convert a png to a pdf for printing
April 24, 2013 at 10:47 pm
This paragraph is genuinely a nice one it helps new net
viewers, who are wishing in favor of blogging.