I have my LCD's calibrated using an i1 Display Pro with Color Eyes as my calibration software. The images I create look fine in Photoshop/Lightroom/Preview/Etc... but the problem that I'm having is that they look very different in a web browser when I use sRGB.
Converting the image to sRGB and imbedding the profile in Photoshop looks fine. Looking at the JPEG Photoshop/Lightroom/etc. looks fine, but as soon as I look at the image in a web browser I get a much more saturated image with a red color shift.
I found that if I change my LCD display profile to the sRGB profile then the images will look the same in Photoshop and using a web browser. So... does anyone have an idea on what is going on here? And do I trust the calibrated profile, or use the sRGB profile for my monitors?
(FYI, if I look at the images on my Apple Laptop or iPad the images look fine on the web. And if I download an image from the web (not mine) it looks the same in the browser and in Photoshop.)
You have a wide gamut monitor.
You need to use a web browser that reads and converts to the monitor profile. Firefox, Safari and Chrome will do that (but not IE); as long as there is an embedded document profile to convert from. If the image is untagged, it will pass straight through without color management.
However, Firefox has an option that the others don't have: with color management set to mode 1 (not the default mode 2) it will assign sRGB to any material that is untagged (does not have an embedded profile). This allows the color management chain to operate and the proper conversion to your monitor profile to happen. With this setting, everything displays correctly.
To do this, type about:config in the adress bar, and scroll down to gfx.color_management.mode.