Recently, I was planning to post a photo online and I wanted it to look its very best. The JPEG file format uses a lossy compression algorithm which means that some image quality degradation typically occurs when saving an image as a JPEG. The tradeoff for this loss of image quality is smaller file sizes and quicker downloading from the web. But I knew that the PNG file format uses lossless compression which means that there should be no loss of quality. Still, I wanted to be sure that this was the case, so I did a test in Photoshop.
What I discovered surprised me—my test showed that there was a difference between my original image and the file I saved in the PNG file format. Further testing revealed the problem and confirmed that you can save a PNG with no loss of quality. I’ll demonstrate my testing technique and also give some tips on saving both PNGs and JPEGs. Here’s the procedure I used to determine whether or not there was a difference between the original and the copy:
- Create a new RGB 8-bit file in Photoshop with the Adobe RGB (1998) color space.
- Create a rainbow gradient
- File -> Save for Web as PNG-24
- File -> Place Embedded the PNG file just saved back into the original file
- Change the PNG layer blend mode to Difference
If there was no difference between the original file and the PNG layer, the appearance should be solid black. What I found was that it wasn’t. There were very noticeable areas that were non-black which meant that the PNG file wasn’t the same as the original. This perplexed me because if PNG compression is truly lossless, then the two images should be identical.
Color Shift
Further testing showed that the problem was not in the PNG compression. Instead, the problem was that there was a color space shift. The original image was in the Adobe RGB color space, but the PNG file was saved as sRGB—even though I hadn’t clicked the Convert to sRGB checkbox on the Save for Web dialog. But Photoshop did the conversion anyway (more on this below). Since some of the colors in the original rainbow couldn’t be contained in the sRGB color space, there was a color shift.
There’s a solution/workaround, but the correct approach depends on your needs. The first question is whether you plan to post your photo on the web or not. If so, you may be best off accepting the sRGB conversion because that’s the web standard color space. If not, you may still want to use the PNG file format in order to take advantage of the lossless file compression. A compressed PNG file can be a fraction of the size of a PSD, TIF or raw file. This can save upload/download time when emailing or otherwise sharing files online.
Saving for the Web
The latest versions of some of the major web browsers are capable of recognizing an embedded color profile and displaying the image correctly. This means it’s possible to embed a color profile like the Adobe RGB profile in a PNG file to be displayed on the web and not experience the color shift you’d see with sRGB. However, support for embedded profiles depends on the specific browser and platform (PC, Mac, mobile device).
If you’re sharing files with other photographers or pros who are using a color-managed workflow, it’s well worthwhile to embed a color profile such as Adobe RGB or Pro Photo.
Color Settings in Photoshop
Earlier, I mentioned that Photoshop converted my PNG to sRGB even though I hadn’t checked the Convert to sRGB checkbox on the Save for Web dialog. A little more sleuthing uncovered the reason. I checked my color settings (Edit -> Color Settings) and it showed that I had sRGB as my Working Space. I subsequently changed my RGB Working Space to Adobe RGB (1998). Having sRGB as the default setting won’t cause a problem when opening photos containing an embedded Adobe RGB or Pro Photo profile, but it will affect what happens when you save a PNG or JPEG without checking the Convert to sRGB option.
JPEG for the Web
I also tested saving JPEGs using the Save for Web Maximum quality preset. I found that for my sample files there was no loss of quality when using Maximum as long as I avoided color shifts. You’ll generally get better compression with JPEG than with PNG, but if quality is your priority you may want to stick with PNG since it’s guaranteed to be lossless.
Conclusion
Using Difference blending mode can be a useful technique for comparing any two layers to see where differences exist. If you use the PNG-24 format and avoid color shifts, you can be sure of getting the maximum image quality in a compressed file format.
