Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • George Gooding 20 posts 42 karma points
    Dec 20, 2010 @ 14:39
    George Gooding
    0

    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?

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Dec 22, 2010 @ 15:04
    Douglas Robar
    0

    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.

  • George Gooding 20 posts 42 karma points
    Mar 14, 2011 @ 10:24
    George Gooding
    0

    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.

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Mar 14, 2011 @ 10:38
    Douglas Robar
    0

    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.

  • George Gooding 20 posts 42 karma points
    Mar 14, 2011 @ 10:49
    George Gooding
    0

    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.

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Mar 14, 2011 @ 11:04
    Douglas Robar
    0

    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.

     

  • George Gooding 20 posts 42 karma points
    Mar 14, 2011 @ 11:47
    George Gooding
    0

    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.

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Mar 14, 2011 @ 12:19
    Douglas Robar
    0

    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. 

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Mar 14, 2011 @ 12:33
    Douglas Robar
    0

    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}

    _workingImg = new System.Drawing.Bitmap(Convert.ToInt32(Math.Ceiling(_finalWidth)), Convert.ToInt32(Math.Ceiling(_finalHeight)), _originalImg.PixelFormat);

     

    cheers,
    doug.

  • George Gooding 20 posts 42 karma points
    Mar 14, 2011 @ 12:56
    George Gooding
    0

    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...

     

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Mar 14, 2011 @ 13:18
    Douglas Robar
    0

    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. 

  • George Gooding 20 posts 42 karma points
    Jul 14, 2011 @ 10:42
    George Gooding
    0

    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... :)

  • George Gooding 20 posts 42 karma points
    Jan 31, 2012 @ 23:43
    George Gooding
    0

    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?

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Feb 01, 2012 @ 11:17
    Douglas Robar
    0

    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. 

Please Sign in or register to post replies

Write your reply to:

Draft