Browsers don't color manage!
Convert images to sRGB to display them correctly!
Digital photography is about digits. Numbers. That's why it is called digital.
When you take a picture, your digital camera takes all of the colors that you have presented to it in that brief flutter of the shutter, turns them into numbers and stores them somewhere. When you get home and look at the image that your camera has made, your computer then takes all of those those numbers and turns them back into colors for you to see.
Then you tweak this or that, adjusting the contrast, color correcting and adjusting the white balance. When you are happy with what you've produced, you might transmit it out across the internet to your favorite printing service to be made into a digital print. Like your monitor, the printer that you've sent the image to is now tasked with turning those numbers into colors with their device.
Through this whole process, wouldn't it be convenient if each number represented exactly one color, always, without exception, to every device on Earth? Unfortunately, this is an impossible dream. We do have absolute references like the Pantone colors where one number is exactly one color, universally. And that is very helpful for many applications, but there is no practical way that every camera, monitor, printer and scanner could ever call the exact same color the same number. Even if every device across the planet were in perfect agreement with each number being exactly one color, one device might have a greater ability to reproduce a wider range of certain types of colors than another device, and we'd have to take that into account somehow.
So digital photographers have to know how their devices turn color into numbers or vice-versa.
I know how my monitor will turn numbers into colors. I know how my printer will turn numbers into colors. And I know the opposite - how my scanner will turn the colors into numbers. When I say "know" it isn't like, "my monitor displays things a bit warm, and the printer that makes my big prints for me tends to be cooler" That is an impossible way with dealing with color. One could never get the colors of what one sees on a monitor to match a print this way.
Instead, I rely on color profiles. A color profile is a set of instructions stored in a file about how a device (a monitor, a printer, a scanner, a camera) turns a number into a color or vice-versa. A color space is similar to a color profile. A color space, however, doesn't necessarily correspond to a particular device like a profile does. A color space serves as a convenient container to put all those colors in while working on the image in image editing software. You can think of a color profile and a color space as a big sack that we fill with tennis balls each of a different color. The bigger the sack, the more colors we can fit in!
I have software and a device that builds a color profile of how my monitor displays colors. It works like this: The software says here's this number: 220000 and tells the monitor to show a big square of the color that the monitor recognizes that 220000 to be. Then, I stick a device not too different from a digital camera right to the monitor and it records how the monitor displays the color and says back to the software, "the monitor displayed 220000 like 221010". And the software says, "that's great information, now how does the monitor display this color?" And so on. With enough cycles of this with different colors, the software builds a profile of how the monitor turns numbers into colors.
I can go through the same process for discovering how my printer turns numbers into colors. And then, once I have all these profiles, and know how each device interprets or outputs color, I can be sure that what I see on the screen will be what I see on a print.
But, what if now I want to put an image on the web? I haven't a clue about how the thousands of monitors that will view my image will turn those numbers into colors. We can never hope to profile all those monitors, but we can take a good guess. sRGB is a color profile proposed by Microsoft and HP as an approximation of the color profiles of the most common computer displays. sRGB, like most monitors, is described as having a very "narrow color gamut". Returning to the sack of tennis balls analogy, sRGB is a tiny sack. There is a lot of color information that the monitors and sRGB simply can't display.
We run into problems when we work on images in image editing software in a huge "wide gamut" color space like ProPhoto RGB, and then export the images as JPEGs to show on monitors with a tiny color gamut that cannot possibly display all the colors in the color space we were working with.
When we make this mistake, the images look perfect in our image editing software, but when we export them as jpgs and view them through a web browser, the colors are very desaturated and look strikingly different. Here's why: Browsers do not color manage the way image editing software does. Even though our jpg explicitly states in its metadata that its color information only make sense in the ProPhoto RGB color space, the developers of browsers are concerned with developing pop-up blockers and security features, not figuring out ways to extract color space information from images and converting them to look perfect on everyone's monitor. The developers of browsers have ignored color management.
Image editing software, in contrast, is good with color management. It knows that I am viewing my images through a monitor, and it knows the profile of the monitor, so even though I am working in the ProPhoto RGB color space, my image editing software picks and chooses what colors to take out of the enormous sack of my ProPhoto RGB color space and pack it into the tiny sack of my monitor profile so that the image looks like it should.
So the browsers, not color managing, just assumes that every image is made custom for display on the tiny color space of the monitor. If you give a browser an image with a wide range of color information from an enormous color space like ProPhoto RGB, the color information will be essentially clipped - thrown out. What you end up seeing is a strikingly desaturated image.
To solve the problem, we need to do the color management for the browsers by converting the image to sRGB, our best guess at how monitors are going to reproduce colors. In Photoshop there is a "Covert to Profile" feature. In Lightroom, we can choose the destination profile when we export. Only by converting the profile can we can export as a jpg and expect to display our photos on the web the way that they look to us in our image editing software.
This is a ProPhoto RGB colorspace image. If the image looks desaturated compared to the image below, it is because your browser doesn't color manage to convert this image to your monitor's profile. When viewed in image editing software, the software is "color managing" - taking into account the profile of my monitor, and it converts the ProPhoto RGB color space into a profile appropriate for my monitor. Web browsers, however, do not color manage. So when this ProPhoto RGB colorspace image is presented on a monitor through a web browser, colors are essentially clipped, and we end up with a desaturated image instead.
Same photo but now manually converted to sRGB to do the color management for the browsers. To deal with the fact that browsers don't color manage, do the color management for them and convert images to sRGB. Much better!
Check this page in a few years. Perhaps by then, web browsers will be color managing, and the two images above will look pretty darned identical.