Jpeg colour changes when uploaded to Social Media (Facebook)

[Beck]

Hey all!

First time ever experiencing this! 

For some weird reason, my jpeg files are changing colour when my client uploads it to Facebook. They show completely fine on my computer, only when uploaded they change colour. 

I always use my usual Settings and this is what i've used when testing: 

 

These two files are exported as Jpegs and look normal: 

 

 

But when uploading to Facebook and even onto this forum, they come out like this:

 

When Exported as PNG they are fine but I would like to give JPEG files too. Any pointers? 

 

thanks!

[NotMyFault]

Check the color format and color profile used. 
To avoid compatibility issues, use RGB/8 and sRGB (the default generic one).

Normally it is not required to embed this profile while exporting, which can increase file size especially for small files.

[NotMyFault]

Inspecting the preview I see the export size is 1501 x 801. this lets me assume the layers are not perfectly aligned to integer pixel positions, leading to either blurriness or extra lines at the edges. You may consider correcting this, too.

[Beck]

15 hours ago, NotMyFault said:

Check the color format and color profile used. 
To avoid compatibility issues, use RGB/8 and sRGB (the default generic one).

Normally it is not required to embed this profile while exporting, which can increase file size especially for small files.

Thank you! usually I export in CMYK with colours looking fine online but this time exported RGB and colours not changing, they stay the same.

15 hours ago, NotMyFault said:

Inspecting the preview I see the export size is 1501 x 801. this lets me assume the layers are not perfectly aligned to integer pixel positions, leading to either blurriness or extra lines at the edges. You may consider correcting this, too.

Thanks for this, for some reason this constantly changes when i move around my artboards. I had looked into this and found that it has to do when the X & Y axis have decimal points. Do you know of a way to stop this from creating decimals? Or is this something we just have to continually be aware of and adjust as we design?

[NotMyFault]

43 minutes ago, Beck said:

Do you know of a way to stop this from creating decimals? Or is this something we just have to continually be aware of and adjust as we design?

 

Great to hear the issue is solved.

To avoid fractional positions while moving, activate snapping, and force pixel alignment. Do not activate "move by whole pixel", it will not allow to remove fractional positions via mouse.

[Hangman]

On 11/15/2023 at 6:13 AM, Beck said:

But when uploading to Facebook and even onto this forum, they come out like this:

This is because your document is set up using a CMYK colour space and you are exporting your JPEG as a CMYK file... PNG files don't support CMYK so are subsequently exported as RGB which is why the PNG versions exported display correctly online but the JPEG versions don't...

2 hours ago, madelynntmoses said:

That sounds frustrating! It's odd that your JPEG files are changing color specifically when uploaded to Facebook. It can be quite puzzling when images look fine on your computer but appear differently on social media platforms.

"While the most popular web browsers in use, Chrome, Firefox, Microsoft Edge (Windows 10) / Internet Explorer and Safari all support colour management Chrome and Firefox can set sRGB as the default colour space which means whether your image profile is embedded with an sRGB profile or not, it will be displayed as an sRGB image. Firefox can also show correct colours with the Adobe RGB colour space, though to make your Firefox and Chrome browsers display the intended colours, you need to adjust the browser’s colour management settings first.

Internet Explorer, Microsoft Edge, and Safari sync with the monitor’s colour profile settings. Microsoft Edge can sync with your monitor’s profile correctly whether the image is sRGB or Adobe RGB."

[debraspicher]

It is best to keep a social media/sRGB preset for uploading to web. sRGB is the standard applied when no profile is embedded or the profile is corrupt. Color profiles can get dropped when uploaded to sites which use backend scripts which ignore profiles when reprocessing the image for rescale. Sometimes thumbnails get this treatment and it can cause color shifts between thumbs and uploaded sources.

*Many things can happen also if the client redownloads their imagery from online, as they are apt to do, edit it or resave for themselves someplace and it is very likely to lose a profile that way.

In short: Always use sRGB for web, especially where redistribution is likely (even accidental), unless it is for other artists, ie usually portfolios. Even if most machines can support embedded color profiles and that site supports non-sRGB standards, etc, you don't want a users screenshot of that image showing a terrible color shift floating around in the wild if their particular hardware or third party application accessing that site cannot support displaying it.

CMYK is supported by some browsers but I would not trust it as well-regulated support as CMYK is designed for printers.