Why do images look different in different software and in different formats

Question

Example:

It seems like the colors on the right are the "true" colors, but the PNG file contains some sort of "filter" that enhances the saturation but only gets recognised by certain software including Photoshop.

Point is, I'd like to work with Photoshop and see the actual final result, and I'd like to make it so that the result is consistent across different softwares as much as possible (of course different computers or devices are going to change the colors ever so slightly, but when it happens on the same PC, and even in two different views of the same software, there's something going on!).

The above images are screenshots.

Answer 1

It's called a color profile. It tells the computer how the color should actually be interpreted so that the color is consistent from machine to machine and system to system. In fact the other software are wrong and Photoshop and image viewer are right.

For the color profile to work as meant your monitor needs to be profiled and/or calibrated by a hardware calibrator. All monitors will otherwise show different color*. On top of this all other applications need to be profile aware. This is not often the case.

Dealing with non managed imaging systems. Most systems assume sRGB by default so if the images profile is something else you should do a profile to profile conversion to sRGB (either use save for web or edit convert to profile). Photoshop can in fact emulate the other applications but its best not to go there since that would defeat the point. Quite literally non manged systems mean random color.

*: It's best not to get very pedantic about this. Most monitors in existence are not calibrated so color comes out rather randomly. So don't spend too much time fighting this thing. Just understand that the color variance is in that range.

Answer 2

For getting as consistent color as possible, in a world where Color Management is absent from a large portion of viewing devices, I would advice the following.

1. Invest in a color calibrated system. Buy a color calibrator (aka spectrophotometer). Calibrate monitors. Recalibrate a couple of times per year. You can find a lot of valuable information on the subject online, for instance here: http://xritephoto.com/learning
2. Finish your images in an application that supports color management. Make sure you have your application set up properly in regard to color management. Honor (do not discard) ICC-profiles. If needed, convert images to the color space you work with. Use AdobeRGB or sRGB as working color space. If you have a high end monitor, favor AdobeRGB or even larger color spaces as working space. If you have a mid or low end monitor, use sRGB.
3. Export all output to sRGB using Perceptual rendering. Include ICC-profile in target files that support it. Do not discard the profile when saving files.

This ensures your files are in good shape and that they can be viewed with intended color on calibrated systems and all systems that assume sRGB. For large gamut uncalibrated/non-color-managed systems, like some smartphones, the images will be over saturated. You can't correct for this.

I hope this helps.

Answer 3

Depending on how you exported the images, some compression algorithms will darken the image due to a misunderstanding of how gamma correction works.

Some reading on the subject can be found here, but image manipulation programs generally assume that RGB values are linearly mapped but they are not.