Post Reply 

Saving images for web without colors changing

May 1, 2011, 08:04
Post: #1
Question Saving images for web without colors changing
Hello,

I probably overlooked something in the documentation, but I have a hard time saving an image with the exact colors I want:
1- I have created an image with a specific shade of blue in background: #e4eaef.
2- If I use the GIMP color picker, I can see that the background is exactly #e4eaef.
3- I save the image as a png.
4- I open the png in the browser (Firefox), and I measure the color of my background with a system tool (Digital Color Meter), and it has changed to #dde5ea, which is not cool, because it doesn't blend on my web page.

I also used Digital Color Meter to measure the color directly on Gimp, and I have also #dde5ea.

What am I doing wrong?
Find all posts by this user
Quote this message in a reply
May 1, 2011, 08:25
Post: #2
RE: Saving images for web without colors changing
Did you specify any color profile (sRGB, AdobeRGB or else) anywhere?

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
May 1, 2011, 08:33
Post: #3
RE: Saving images for web without colors changing
(May 1, 2011 08:25)ofnuts Wrote:  Did you specify any color profile (sRGB, AdobeRGB or else) anywhere?

Yes, when I opened the original image, I had a dialog letting me chose between:
- RGB workspace (sRGB IEC61966-2.1)
- Open from disk...

Since I don't have anything on the disc, I chose sRGB.

Now that you mention it, I realize that I could have clicked on 'Cancel'. And now that you mention it, I realize that Gimp doesn't me ask this same question when I reopen my saved image with shifted colors.

I read somewhere that sRGB was like no color profile.
Find all posts by this user
Quote this message in a reply
May 1, 2011, 11:55
Post: #4
RE: Saving images for web without colors changing
To verify if the sRGB color profile was the culprit, I just did the following test:

1- Created a new image, with transparent background, and color space RGB.
2- Just to be sure, opened Image > Mode > Assign color profile... and I could see in the dialog the "Current color profile: none"
4- Painted all the layer with uniform color #e4eaef
5- Saved the image as PNG.
6- Opened the image in another program.
7- Measured the image color.
8- And I read #dde5ea

This time I've paid attention not to load any color profile:
- In step 2 I could see that 'Current color profile' was set to none.
- However, when I reopen again the image, Gimp doesn't ask me if I want to assign a color profile. And I can see the 'Current color profile' now set to sRGB.

So I'm still wondering:
- Am I doing something silly?
- Is there any way not to have a color profile loaded?
- How people is doing? I mean: I can't be the only one who wants to create an image with a precise color.
Find all posts by this user
Quote this message in a reply
May 1, 2011, 12:59
Post: #5
RE: Saving images for web without colors changing
- I create a 200x200.png with #e4eaef
- open in Firefox
- can see any difference with same image in Gimp
- copy image to clipboard from FF, create image from clipboard in Gimp
- explore image with pointer: still #ea4eaef

Next step:
- create HTML with:
Code:
<div style="background-color: #e4eaef; padding: 50px;"
<p>some text</p>
<img src="e4eaef.png" />
<p>some more text</p>
</div>
- can't distinguish the image from the background
- do a screen capture (not from Gimp...)
- load the screen capture in Gimp, still #e4eaef everywhere.

I do websites for a living (as developer, not as web designer) and it's rather usual to mix colors from images with colors from style sheets and expect them to match if they have the same value.

Attached is my e3eaef.png file. How does it display for you?

Can you attach yours?

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
May 1, 2011, 17:23 (This post was last modified: May 1, 2011 17:29 by jmgonet.)
Post: #6
RE: Saving images for web without colors changing
Hi,

Well, I'm feeling dumber and dumber, but I still don't get it:
- I've just measured your attachment, and its color is #dde4ea, which is similar but not quite the same as #e4eaef.
- Then I've downloaded it, and created besides it a e4eaef.html page by copy/pasting your code.
- And I've made a screenshot, which I'm attaching. The color is slightly different, at least on my computer.

Is it only on my computer?

(Edit: I'm also using Firefox, by the way)


Attached File(s) Thumbnail(s)
   
Find all posts by this user
Quote this message in a reply
May 1, 2011, 17:57
Post: #7
RE: Saving images for web without colors changing
Your attachment, copy/pasted to Gimp: the PNG area is indeed #e4eaef but the rest of the DIV is #eaeff3

If I save to disk and load in Gimp, gimp tells me it has an embedded color profile called
"Color LCD Calibrated". If I let Gimp convert, I get an image with #e4e9ef and #eaeff3. If I keep it as it, thne PNG is #dde4ea and the DIV is #e4eaef

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
May 3, 2011, 05:21
Post: #8
RE: Saving images for web without colors changing
Mmmhh.... well, the "Color LCD Calibrated" seems to be an Apple thing. I can't be sure, but since the original png downloaded from you hadn't this profile, I guess it can only come from my screenshot tool, which is an Apple system tool. Which makes things worse because I can't be sure of anything.

Color LCD Calibrated reminded me that I did calibrate my screen when I first installed the computer. So I went to the Gimp Preferences, and deactivated the color management (Mode of operation: No color management). I also set Monitor profile to 'none', and unchecked the 'Try to use the system monitor profile'. All this to no avail. The output image is the exact same color as before; not the one I want.

Is there any other place where I can deactivate things related to colors?
Find all posts by this user
Quote this message in a reply
May 3, 2011, 06:32 (This post was last modified: May 3, 2011 06:33 by jmgonet.)
Post: #9
RE: Saving images for web without colors changing
As all screenshots programs are suspicious, now I've just put online an html file whose contents are:

Code:
<div style="background-color: #e4eaef; padding: 50px;"
<p>some text</p>
<img src="http://gimpforums.com/attachment.php?aid=351" />
<p>some more text</p>
</div>

The file is available here: http://www.a-v-c.ch/e4eaef.html

I haven't done any manipulation on the embedded image: it's the uploaded png by ofnuts, taken directly from the forum.

At least to me, it looks like the png example uploaded by ofnuts is not #e4eaef, but another similar color. Which means that ofnuts has the same problem as me: GIMP is messing with the colors.

Am I the only one seeing a difference?
Find all posts by this user
Quote this message in a reply
May 3, 2011, 06:38
Post: #10
RE: Saving images for web without colors changing
Not me.... uniform screen throughout. What system & navigator do you run?

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
May 3, 2011, 14:45
Post: #11
RE: Saving images for web without colors changing
I have a Mac OSX:
- With Firefox: the image (#dde4ea) is clearly different than the background.
- With Safari: The image is still visible (#dde5ea), but not quite the same color as in Firefox.

The background, though, is exactly #e4eaef for both navigators

Then I've tried with another Mac OSX of a colleague:
- In Firefox the difference of color is barely visible, but still exist.
- In Safari the image and the background are the exact same color.

So the color of the image you uploaded as an example varies from computer to computer. At least on Mac computers (the Mac OSX has a native color calibration)

My interpretation is the following: there is a color profile embedded in the image, and every browser makes some cooking based on the color profile in the image and the color profile of the system.

Now, in my opinion, there is a big problem: I can't generate images with Gimp, because every rendering system interprets the embedded color profile as it finds best, and you don't have control over it.

Or is there some kind of secret?
Find all posts by this user
Quote this message in a reply
May 3, 2011, 15:33
Post: #12
RE: Saving images for web without colors changing
Just as another data point to throw out there for whatever its worth, I'm on Windows XP SP3 and I also have a color calibrated monitor (using a Pantone Colorvision Spyder). Using Chrome, Firefox, and Internet Explorer with the web page you posted all show a uniform e4eaef color throughout.

[Image: viragogimpforumssig.png]
Find all posts by this user
Quote this message in a reply
May 3, 2011, 16:22
Post: #13
RE: Saving images for web without colors changing
(May 3, 2011 14:45)jmgonet Wrote:  I have a Mac OSX:
- With Firefox: the image (#dde4ea) is clearly different than the background.
- With Safari: The image is still visible (#dde5ea), but not quite the same color as in Firefox.

The background, though, is exactly #e4eaef for both navigators

Then I've tried with another Mac OSX of a colleague:
- In Firefox the difference of color is barely visible, but still exist.
- In Safari the image and the background are the exact same color.

So the color of the image you uploaded as an example varies from computer to computer. At least on Mac computers (the Mac OSX has a native color calibration)

My interpretation is the following: there is a color profile embedded in the image, and every browser makes some cooking based on the color profile in the image and the color profile of the system.

Now, in my opinion, there is a big problem: I can't generate images with Gimp, because every rendering system interprets the embedded color profile as it finds best, and you don't have control over it.

Or is there some kind of secret?
On Firefox, in about:config what do you see for the various gfx.color_management.* values? (mine all have the status "default").

Now answering your questions on
https://Gimp-Forum.net
Visit this user's website Find all posts by this user
Quote this message in a reply
May 3, 2011, 18:45 (This post was last modified: May 3, 2011 18:46 by jmgonet.)
Post: #14
RE: Saving images for web without colors changing
Here are my configuration values:

gfx.color_management.display_profile=(empty string)
gfx.color_management.mode=2
gfx.color_management.rendering_intent=0

Just to have a test, I've switched gfx.color_management.mode=0, and yes! this is it! With this configuration I see a perfect uniform e4eaef color.

Checked here what is the meaning of this configuration value, and it is:

Quote:Enable color management for tagged graphics only. (Default)

So I guess the png produced by Gimp is tagged (whatever this can mean). Now at least I know I'm not just dumb. There is something with the colors in the png file.

I also found this thread: http://www.gimptalk.com/index.php?/topic...-question/ with a guy in my exact same situation, which is:
- Gimp adds some color profile (which may or may not be wrong) in the PNGs.
- In Mac OSX, Safari and Firefox are using (or misusing) this profile to make appear the same shade of blue on all monitors on earth (and beyond).
- Sadly, Safari and Firefox are not trying to do the same with the colors declared in html / css.
- So, in the end, I have a unmatched shade of blue.

What I find a bit strange is that everyone seems to be happily using Gimp to create web graphics...
Find all posts by this user
Quote this message in a reply
May 3, 2011, 19:11
Post: #15
RE: Saving images for web without colors changing
After the hints from ofnuts, I went google again, and this is my harvest:

- http://blog.jiffle.net/post/99636502/png...r-matching

Yes, it's a common problem. I'm not the only one having it. Proof is that there are nice people that wrote nice applications to solve it:
- In Windows, a Gimp plugin called Separate+: http://cue.yellowmagic.info/softwares/se...index.html
- In Mac OSX, a separate application called ImageOptim: http://imageoptim.pornel.net/

As I have a Mac, I cannot test Separate+. I did test ImageOptim, with the same configuration as mentioned in jiffle:
- Deactivate all tools except PNGCrush.
- Configure PNGCrush with: sRGB and gAMA.

After saving the image with PNG, you have to process them with ImageOptim (jiffle warns to only process the images once, I haven't tested this)

I'm a bit surprised by this solution. Gimp is a widely used program, waaaay simpler to use than other expensive monsters like Photoshop, but I don't understand how this color matching issue is not more widely known and addressed via some kind of official plugin.

Anyway, thanks to ofnuts, who leaded me to the solution (and made me discover about:config at the same time), and virago for testing.
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  best tutorial for changing someone's head to another body JaDan 19 8,735 Jul 20, 2017 05:07
Last Post: ythgilb
  How to overlap two images? ferguson1951 1 124 Jul 4, 2017 07:10
Last Post: ythgilb
  Putting two images side by side chrisj 3 6,796 May 30, 2017 11:45
Last Post: blighty
  Changing a silhouette to line art Tropdoug 3 293 Oct 7, 2014 07:51
Last Post: rich2005
  Layering + erasing with two images, no outline crap? VXVO 1 218 Sep 29, 2014 18:07
Last Post: VXVO

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS