Why is a photo in Pixelmator (or osx) so different then in a webbrowser?

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2020-10-30 07:15:08

Why is a photo in Pixelmator (or osx) so different then in a webbrowser? The colors are so flattened in a webbrowser. How can I make a good workaround to use Pixelmator for web-development?
User avatar

2020-11-02 16:32:41

It depends on the colors you use and the color space your images are in — if you're not using wide color on your website, you'll need to make sure to use sRGB as the profile in Pixelmator Pro to ensure what you see in Pixelmator Pro is reflected in your browser. If you're using, for example, Display P3 in Pixelmator Pro and then use those same images on the web using standard code, the images will probably be interpreted to be sRGB, losing some of their vibrancy.

Of course, something else could also be going wrong, for example, you may be uploading the images on website and that website might be compressing them.

Anyway, first, let's find out what color profile you're using in Pixelmator Pro. To do that, open one of the images you've edited/exported and choose View > Show Document Info. The first line will say something like "8 bpc sRGB" or "16 bpc Display P3", which is the color depth and color profile.

After doing that, could you also let me know how you're using those images on the web, are you uploading them somewhere?
User avatar

2020-11-02 16:49:21

I use 8 bps sRGB. I choose for export 80% jpg. Upload normal to the website and display them normal.
User avatar

2020-11-02 17:05:00

Then the colors you see on the website should be the same as in Pixelmator Pro — have you tried uploading any images not edited with Pixelmator Pro? That way, we could narrow down the issue to the uploading step rather than the editing in Pixelmator Pro step.