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.

Rainbow Test Image
Test image created in Adobe RGB (1998) color space and saved in PNG-24 format with an embedded Adobe RGB (1998) color profile

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:

  1. Create a new RGB 8-bit file in Photoshop with the Adobe RGB (1998) color space.
  2. Create a rainbow gradient
  3. File -> Save for Web as PNG-24
  4. File -> Place Embedded the PNG file just saved back into the original file
  5. 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.

This image shows the result of importing a PNG-24 format file in the sRGB color space on top of the test image above and changing the layer blending mode to Difference. The fact that the image is not solid black shows that there are differences between the original and the PNG file.
This image shows the result of importing a PNG-24 format file in the sRGB color space on top of the test image above and changing the layer blending mode to Difference. The fact that the image is not solid black shows that there are differences between the original and the PNG file.

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.

In some cases, Photoshop will convert to sRGB even if you don’t click the Convert to sRGB checkbox. Also, embedding a color profile will help get the best color.
In some cases, Photoshop will convert to sRGB even if you don’t click the Convert to sRGB checkbox. Also, embedding a color profile will help get the best color.

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.

Test image exported as PNG-24 with an embedded Adobe RGB (1998) color profile
Test image exported as PNG-24 with an embedded Adobe RGB (1998) color profile
Test image exported as PNG-24, converted to sRGB with an embedded sRGB color profile. The differences are most obvious in the reds and purples. Note: the differences are visible on Windows PCs using the latest versions of the Chrome and Firefox browsers. Differences may not be visible on other platforms or other browsers.
Test image exported as PNG-24, converted to sRGB with an embedded sRGB color profile. The differences are most obvious in the reds and purples. Note: the differences are visible on Windows PCs using the latest versions of the Chrome and Firefox browsers. Differences may not be visible on other platforms or other browsers.

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.