Jump to content

Image appears darker in Firefox - sometimes after conversion (e.g. Facebook)


Recommended Posts

Hello!

 

I have some trouble with the brightness with images created with Paint.NET:

 

When I save an image as PNG, Firefox displays it darker than it should be, but Chrome and Windows Image Viewer (XP) display it just like Paint.NET

 

When I save an image as JPG, Firefox, Chrome and Windows Image Viewer show them just like Paint.NET. But when I upload them to Facebook, where the image gets converted, the resulting image is darker than it should be - on Firefox and Chrome, but not on the Windows Image Viewer.

 

A quick research led me to the conclusion that it has something to do with the colour profiles, but I couldn't figure out how to solve this problem.

 

TL;DR: I want to have images created with Paint.NET to show up the same in major browsers, including conversion by Facebook (quality doesn't matter, but brightness does).

 

Thanks in advance!

Link to comment
Share on other sites

https://developer.mozilla.org/en-US/docs/ICC_color_correction_in_Firefox

 

If you use a png compressor, it will remove the color profile info and your image will display the same in all browsers & viewers. A popular one is http://pnggauntlet.com/.

  • Upvote 1

(September 25th, 2023)  Sorry about any broken images in my posts. I am aware of the issue.

bp-sig.png
My Gallery  |  My Plugin Pack

Layman's Guide to CodeLab

Link to comment
Share on other sites

If you use a png compressor, it will remove the color profile info and your image will display the same in all browsers & viewers. A popular one is http://pnggauntlet.com/.

Thanks! Nice to know. I actually use that program quite often, but never noticed that it solves the problem.

 

Regarding the JPEG problem: It seems that Facebook applies another ICC colour profile, and thus the image seems darker. Probably the Windows Image Viewer just ignores the profile - that's why it's displayed correctly after downloading the converted image. Some research led me to the conclusion to add an ICC sRGB colour profile, but it doesn't work. It's simply overwritten by Facebook. Any ideas?

Link to comment
Share on other sites

Regarding the JPEG problem: It seems that Facebook applies another ICC colour profile, and thus the image seems darker. Probably the Windows Image Viewer just ignores the profile - that's why it's displayed correctly after downloading the converted image. Some research led me to the conclusion to add an ICC sRGB colour profile, but it doesn't work. It's simply overwritten by Facebook. Any ideas?

 

I seem to remember reading that Facebook converts all photos to the WebP format upon upload, and doesn't keep your original jpeg. I assume it would also generate thumbnails & other sizes based on that WebP formatted photo.

 

So I'm guessing that that's where you're losing the color profile. I don't use Facebook myself though, so I can't say for sure.

(September 25th, 2023)  Sorry about any broken images in my posts. I am aware of the issue.

bp-sig.png
My Gallery  |  My Plugin Pack

Layman's Guide to CodeLab

Link to comment
Share on other sites

Facebook actually keeps the photos in JPEG. Following your pointer, Facebook also converts them to WebP. The WebP version of public images can be accessed by just changing the file extension in the URL.
 
You can check the ICC profile with ImageMagick's convert binary:

convert -verbose photo.jpg

Facebook automatically attaches its ICC profile to the photo (or overwrites the old one), which makes it seem darker. I've yet to find how to prevent FB from doing that.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...