It seems that ImageGen produces the well known gamma correction bug in the PNGs it processes. Saving a 24-bit PNG, uploading it to Umbraco, and displaying it through ImageGen (even without changing the size) results in the colors looking off in Firefox and Internet Explorer.
ImageGen apparently reintroduces the gamma data that was originally removed from the images using programs such as PNGOUT or pngcrush.
This results in my beautiful full color PNGs looking faded out in Firefox and incorrect in Internet Explorer. Can this be fixed?
I don't have this problem. Can you post a link to a png that looks differently with ImageGen and without?
You are correct that ImageGen does not remove any 'extra' data that programs like pngcrush do. I had toyed with the idea but the performance was dreadful and therefore not appropriate for ImageGen.
The image not passed through ImageGen appears a lot more vivid.
This seems to only happen in Firefox, it's fine in IE and Chrome, most likely due to the fact that they ignore whatever metadata is being created by ImageGen on the PNGs.
I just tested this in the latest Chrome and Firefox for both Mac and Windows7 and see no difference. For a quick comparison, open two tabs in your browser and load each of these images, one in each tab. One is the original image and the other is resized by 1 pixel.
Apart from the slight softening of the edges from the resizing the color tones are identical for me. Are they for you? If not, tell me more about your Firefox setup.
The thing is, in Win7/Firefox 3.6.15 on my color-corrected monitor as well as my laptop display I see zero difference in colors. I saved the original and the resized png, aligned in layers in PhotoShop, set grids and checked the color of various points with the eyedropper tool and no differences. Also saved the resized image as a jpg as follows and it, too, looks like the original in all browsers and Photoshop.
What windows version and firefox version are you using? Does this display problem happen on other machines? I would love to investigate the issue but step one is being able to reproduce the problem so I can tell if I've fixed it.
If you set the format to JPEG, as you did in that URL, then it looks fine. If you leave it as a PNG, it is not. It's whatever library you are using to create the new PNG that is inserting some chunk of metadata to the PNG that is causing this to happen.
Seems to only happen on Windows, does not do this on Firefox on Mac.
Windows 7 with Firefox 3.6 and Firefox 4 exhibits this behavior.
Curious. I have the same browser setup and do not see any difference between browsers, platforms, or output formats (png or jpg). All look exactly the same here.
Any chance you've somehow got a bad image cached in your browser? I'm really at a loss why you see something I don't from the same urls.
For what it's worth, the working image (the resized image) uses the same format as the source image. If any additional information is being added it is done so by .net's routines.
One of my colleagues does not see any difference, but I see a difference on my two different screens, and it's nothing to do with caching, this has been like this the whole time. Might be due to screens supporting some kind of gamma or color profile or something that not all screens support?
The image served from ImageGen has color profile set to sRGB IEC61966-2.1 while the original is set to simply RGB. I remember fiddling around with saving from Photoshop in a variety of ways, and I never got it to work so that the images were the same...
Good clue on the color space; I suspect that is the issue. ImageGen, being for web graphics, uses sRGB and assumes sRGB if the colorspace isn't defined. Wikipedia has a nice discussion at the top and bottom of this page http://en.wikipedia.org/wiki/SRGB.
I would guess that you have a color profile for the image (or your monitors) that uses something other than the standard sRGB curve, which is why you see a color shift. The sRGB gamut is rather small so you'd probably see a lessening of the color intensity, which is in keeping with what you reported.
My recommendation would be to recreate the original image with the standard web color space default of sRGB and get it to look the way you want in that colorspace. Then, when ImageGen resizes it will retain the original file's colorspace and appearance.
I guess I might rather just leave it be, so that those with good screens can see the images more vividly, instead of punishing everyone with the dull sRGB spectrum... :)
I have to say, this still is a bug, and a problem.
I've now tested a PNG that looks the same in Chrome and Firefox when:
- viewed locally on my PC - viewed straight from the file system on the server
Yet when the same image is shown through ImageGen on the server, the color will get duller. ImageGen should not be changing anything to do with gamma, color profile, or anything else when processing an image.
Even if I convert it to sRGB on my computer when saving from Photoshop, it will still have this problem.
I have still not found any way in which to save a PNG so that it will show up correctly processed through ImageGen in all newest major browsers. This makes it practically impossible to use PNGs together with ImageGen.
You're right, George, there has been no work on this issue. I've not been able to reproduce the problem and so far no one else has reported a similar issue. I'm not saying it is "your fault" at all, simply that it doesn't seem to be a widespread problem and not one I can reproduce which makes debugging nearly impossible. As you said before, your colluege doesn't experience the issue.
On a hopeful front, I plan to rebuild ImageGen from the ground up in MVC and will get more control over some aspects of the conversion process than I have with .net 2.0. No timeframe to complete this work but it's in the pipeline.
ImageGen produces incorrect gamma in PNGs
It seems that ImageGen produces the well known gamma correction bug in the PNGs it processes. Saving a 24-bit PNG, uploading it to Umbraco, and displaying it through ImageGen (even without changing the size) results in the colors looking off in Firefox and Internet Explorer.
ImageGen apparently reintroduces the gamma data that was originally removed from the images using programs such as PNGOUT or pngcrush.
This results in my beautiful full color PNGs looking faded out in Firefox and incorrect in Internet Explorer. Can this be fixed?
Hi, George,
I don't have this problem. Can you post a link to a png that looks differently with ImageGen and without?
You are correct that ImageGen does not remove any 'extra' data that programs like pngcrush do. I had toyed with the idea but the performance was dreadful and therefore not appropriate for ImageGen.
Looking forward to seeing your images.
cheers,
doug.
Hi, you can see the difference here. In Firefox, the same image passed through ImageGen does not have the same color space as the original:
http://www.okb.no/media/10921/systemutvikling.png (original image)
http://www.okb.no/umbraco/ImageGen.ashx?image=/media/10921/systemutvikling.png&width=200&height=200&constrain=true (image through ImageGen)
The image not passed through ImageGen appears a lot more vivid.
This seems to only happen in Firefox, it's fine in IE and Chrome, most likely due to the fact that they ignore whatever metadata is being created by ImageGen on the PNGs.
Hi, George,
I just tested this in the latest Chrome and Firefox for both Mac and Windows7 and see no difference. For a quick comparison, open two tabs in your browser and load each of these images, one in each tab. One is the original image and the other is resized by 1 pixel.
http://www.okb.no/media/10921/systemutvikling.png (original image)
http://www.okb.no/umbraco/ImageGen.ashx?image=/media/10921/systemutvikling.png&width=255 (image resized by 1 px)
Apart from the slight softening of the edges from the resizing the color tones are identical for me. Are they for you? If not, tell me more about your Firefox setup.
cheers,
doug.
Those URLs are identical, so I don't see how that helps :)
The correct URL through ImageGen would be:
http://www.okb.no/umbraco/ImageGen.ashx?image=/media/10921/systemutvikling.png&width=255
As you can see, this image doesn't have the same color as the original.
Sorry about the bogus link.
The thing is, in Win7/Firefox 3.6.15 on my color-corrected monitor as well as my laptop display I see zero difference in colors. I saved the original and the resized png, aligned in layers in PhotoShop, set grids and checked the color of various points with the eyedropper tool and no differences. Also saved the resized image as a jpg as follows and it, too, looks like the original in all browsers and Photoshop.
http://www.okb.no/umbraco/ImageGen.ashx?image=/media/10921/systemutvikling.png&width=255&format=jpg&compression=100
What windows version and firefox version are you using? Does this display problem happen on other machines? I would love to investigate the issue but step one is being able to reproduce the problem so I can tell if I've fixed it.
cheers,
doug.
If you set the format to JPEG, as you did in that URL, then it looks fine. If you leave it as a PNG, it is not. It's whatever library you are using to create the new PNG that is inserting some chunk of metadata to the PNG that is causing this to happen.
Seems to only happen on Windows, does not do this on Firefox on Mac.
Windows 7 with Firefox 3.6 and Firefox 4 exhibits this behavior.
Curious. I have the same browser setup and do not see any difference between browsers, platforms, or output formats (png or jpg). All look exactly the same here.
Any chance you've somehow got a bad image cached in your browser? I'm really at a loss why you see something I don't from the same urls.
cheers,
doug.
For what it's worth, the working image (the resized image) uses the same format as the source image. If any additional information is being added it is done so by .net's routines.
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica} span.s1 {color: #1b3dff} span.s2 {color: #2da1bc}
cheers,
doug.
One of my colleagues does not see any difference, but I see a difference on my two different screens, and it's nothing to do with caching, this has been like this the whole time. Might be due to screens supporting some kind of gamma or color profile or something that not all screens support?
Might be a clue here:
http://css-tricks.com/color-rendering-difference-firefox-vs-safari/
The image served from ImageGen has color profile set to sRGB IEC61966-2.1 while the original is set to simply RGB. I remember fiddling around with saving from Photoshop in a variety of ways, and I never got it to work so that the images were the same...
Good clue on the color space; I suspect that is the issue. ImageGen, being for web graphics, uses sRGB and assumes sRGB if the colorspace isn't defined. Wikipedia has a nice discussion at the top and bottom of this page http://en.wikipedia.org/wiki/SRGB.
I would guess that you have a color profile for the image (or your monitors) that uses something other than the standard sRGB curve, which is why you see a color shift. The sRGB gamut is rather small so you'd probably see a lessening of the color intensity, which is in keeping with what you reported.
My recommendation would be to recreate the original image with the standard web color space default of sRGB and get it to look the way you want in that colorspace. Then, when ImageGen resizes it will retain the original file's colorspace and appearance.
cheers,
doug.
I guess I might rather just leave it be, so that those with good screens can see the images more vividly, instead of punishing everyone with the dull sRGB spectrum... :)
I have to say, this still is a bug, and a problem.
I've now tested a PNG that looks the same in Chrome and Firefox when:
- viewed locally on my PC
- viewed straight from the file system on the server
Yet when the same image is shown through ImageGen on the server, the color will get duller. ImageGen should not be changing anything to do with gamma, color profile, or anything else when processing an image.
Even if I convert it to sRGB on my computer when saving from Photoshop, it will still have this problem.
I have still not found any way in which to save a PNG so that it will show up correctly processed through ImageGen in all newest major browsers. This makes it practically impossible to use PNGs together with ImageGen.
Can you please take another look at this?
You're right, George, there has been no work on this issue. I've not been able to reproduce the problem and so far no one else has reported a similar issue. I'm not saying it is "your fault" at all, simply that it doesn't seem to be a widespread problem and not one I can reproduce which makes debugging nearly impossible. As you said before, your colluege doesn't experience the issue.
On a hopeful front, I plan to rebuild ImageGen from the ground up in MVC and will get more control over some aspects of the conversion process than I have with .net 2.0. No timeframe to complete this work but it's in the pipeline.
cheers,
doug.
is working on a reply...