jpg versus png (aka jpeg vs. png)

The Twilight Render Team shares tips, ideas, helpful hints, and more on using Twilight Render
Locked
Fletch
Posts: 12906
Joined: Fri Mar 20, 2009 2:41 pm
OS: PC 64bit
SketchUp: 2016-2023
Contact:

jpg versus png (aka jpeg vs. png)

Post by Fletch » Fri Apr 01, 2011 1:02 pm

:?: A question someone asked us recently:
I thought that the JPEGs lose quality every time they were open.
No.
Opening a .jpg will not make it lose quality. Re-saving (re-compressing) the .jpg with a stronger compression will cause it to lose quality.

Also, the opposite doesn't work either: re-saving a low quality .jpg image with a higher quality compression will NOT regain the lost info. It's just a waste of kilobytes in storage. Once the info is lost, it can not be regained. (However, filters such as Topaz dejpeg work amazingly well for getting rid of .jpg artifacts and simultaneously improving detail and poor image quality)

So, what should I use? I understand PNG is LOSSLESS compression - so it's always better than .jpg, right?

Well, this is easy to answer - keep a png for yourself as a "master" but post images to forums and web pages in jpg. Basically, for sharing non-line-art images on the web, .jpg is king.

Why?! Try this little test yourself:
Take your .png file at full resolution of an image or texture (better to try several test images - take a day shot, a night shot, and a complex texture, so you have a variety of test situations, even try a piece of line art).

In Photoshop there are 12 levels of .jpg quality for some reason, but in other editors (such as the incredibly handy FSViewer) you have 10 levels of quality, let's presume you are using Photoshop.)
  1. Save a copy of it in varying qualities of .jpg like this:
    12, 11, 10, 9, 8, 7, 6, 5 - it is rare for us to go lower than 5 - we use 5 to post tutorial screenshots on the web since the "quality" really doesn't matter for a SketchUp screenshot, and it's more important for us to use smallest file possible so that a person reading the tutorial will be able to open it quickly and easily even with dial up internet)
  2. Now close all .jpg files.
  3. Now in your photo editor or favorite image viewing program, one by one, open and compare the PNG to the JPG, back and forth or mask an area of the jpg to overlay it with the png photo. Be SURE that you are viewing them at 100% resolution when doing the comparison. The important thing is to try to see if you can see any difference between the images, if you think that the difference is important or negligible, and note the size difference in Kb of the PNG vs the JPG image file.
  4. Now Print one full-color copy of each image at full resolution on your favorite printer that you like to use for presentation. Compare the images, and see where you can start to tell the differences. Very lightly in pencil on the BACK of the pages, write which files are which.
  5. Now for a REAL BLIND TEST: show the printed images to a friend with a "good eye" and have THE FRIEND try to put the images IN ORDER from lowest to highest quality. Don't assist them! How did they do?
  6. Try showing the friend the images on your computer screen (or better, use THEIR computer monitor), but try to hide which files they are comparing and simply ask them to identify the highest quality, or any difference at all between the 2 images.
Conclusion:
On this test monitor (an inexpensive ASUS typical nothing-fancy lcd widescreen), there is nearly zero notable difference between the PNG and a JPG at 12 or even 11 quality. But the file size difference is drastic. From something like 5Mb PNG to 1212Kb JPG. In fact, saving the PNG at Photoshop jpg quality 8 was as far as we could go down with out having a visible "jpg artifact". However, even as far down as photoshop .jpg quality 6 the image was still quite good enough for display in an online forum setting, while the file size was from 10x-30x SMALLER, or more, than the PNG. :shock:

The exception to the rule:
In the case of a JPG that has been fully desaturated of color (but left in RGB mode, not turned to a greyscale image). In most cases this type of image will be smaller in PNG than in JPG format. PNG is a good way to save large format architectural black-n-white construction document scans instead of TIF format or even JPG - the size difference there is massive with ZERO quality loss.) PNG is a GREAT format for saving line art images. JPG works more for photos or complex images like textures of stone, etc.

To learn more about this:
Great article>>> http://www.turnkeylinux.org/blog/png-vs-jpg
Also, not bad> http://www.webopedia.com/DidYouKnow/Int ... IF_PNG.asp

Locked

Who is online

Users browsing this forum: No registered users and 3 guests