{"id":4229,"date":"2016-02-19T06:40:56","date_gmt":"2016-02-19T12:40:56","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=4229"},"modified":"2016-02-23T16:47:30","modified_gmt":"2016-02-23T22:47:30","slug":"a-png-puzzle","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/a-png-puzzle\/","title":{"rendered":"A PNG Puzzle"},"content":{"rendered":"

Last post<\/a> was too long, covering too much terrain. Here’s a puzzle instead which whittles it all down.<\/p>\n

What values do you store in an sRGB PNG to display a perceptually half-gray color, with an alpha of 0.5?<\/p>\n

If you’re an absolute expert on PNG and perception and alpha, that’s all the information you need. Just in case, to make sure you don’t break any rules, here are the key bits:<\/p>\n

    \n
  1. A perceptually half-gray color on the screen is (187,187,187), not (128,128,128). See the image below to prove this to yourself, which is from John Hable’s lovely article<\/a>.<\/li>\n
  2. Your PNG is saving values in sRGB<\/a> space. No extremely-rare\u00a0gamma = 1.0 PNG<\/a> for you.<\/li>\n
  3. Alpha is coverage. The PNG spec<\/a> notes, \u201cThe gamma value has no effect on alpha samples, which are always a linear fraction of full opacity.\u201d<\/li>\n
  4. PNG alphas are unassociated<\/a>, they do not\u00a0premultiply the color. To display your sRGB PNG color\u00a0composited against black, you must multiply it by your unassociated alpha value.<\/li>\n<\/ol>\n

    So, what do you store in your PNG image to get a half-gray color displayed, with an alpha of 0.5? A few hints, then the answer, is after the image below.<\/p>\n

    Horizontal fully-black and fully-white lines combine to a half-gray, represented by 187. That’s sRGB in action:<\/p>\n

    \"SmallLines-WithNumbers\"

    John Hable’s image<\/a><\/p><\/div>\n

    Hint #1: a half-gray color with an alpha of 1.0 (fully opaque) is stored in a PNG by (187,187,187,255).<\/p>\n

    Hint #2: if a PNG could store a premultiplied color, the answer would be (187,187,187,128).<\/p>\n

    Hint #3: to turn a premultiplied color into an unassociated color, divide<\/em>\u00a0the color by the (fractional) alpha<\/a>.<\/p>\n

    And just to have something between you and the answer, here’s this, from I wish I knew where.<\/p>\n

    \"d424a80f76e16bf552a09fae02fee808_59445\"<\/p>\n

    The answer is (255,255,255,128), provided by Mike Chock (aka friedlinguini), who commented on my post – see the comments below. My answer was definitely wrong, so I’ll explain why this answer works.<\/p>\n

    The PNG spec notes<\/a>, “This computation should be performed with intensity samples (not gamma-encoded samples)”. So, to display an sRGB-encoded PNG, you must do the following:<\/p>\n

      \n
    1. Convert the sRGB color to linear space. For (255,255,255,128) this gives (1.0,1.0,1.0).<\/li>\n
    2. Now multiply in the alpha, to get a linear premultiplied value. Times (128\/255) -> 0.5 gives (0.5,0.5,0.5).<\/li>\n
    3. Convert this value back to sRGB space and display it. This gives (187,187,187) as the color to display.<\/li>\n<\/ol>\n

      Me, I thought that PNGs with sRGB values and alphas were displayed by simply multiplying the sRGB by the stored alpha. Wrong! At least, by the spec. How could I think such a crazy thing? Because every viewer and every browser I tested showed this to be how such a PNG was displayed.<\/p>\n

      So, I’m very happy to find PNG is not broken; it’s simply that no one implements it correctly. If you do know some software that does display this image<\/a> properly (your browser does not<\/a>), let me know – it’ll be my example of how things should work.<\/p>\n

      Update: as usual, Jim Blinn predates my realizations by about 18 years. His article “A Ghost in a Snowstorm<\/a>” (collected in the book\u00a0Notation, Notation, Notation<\/a><\/em>; most of this article can be found here<\/a>) talks about the right way (linearization) and the errors caused by the various wrong ways of encoding alpha and sRGB. Thanks to Sean Barrett for pointing it out.<\/p>\n

      My conclusion remains the same:\u00a0if you want fun\u00a0puzzles and you’re near a big city, check out The Puzzled Pint<\/a>, a great free social puzzle event each month.<\/p>\n

      For the record, here’s my original wrong answer:<\/strong><\/p>\n

      The answer is (373,373,373,128). To display this RGBA correctly, you multiply by the alpha (and divide by 255, since the value 128 represents 0.5) to get (187,187,187).<\/p>\n

      And that’s the fatal flaw of sRGB PNGs\u00a0in a nutshell: you can’t store 373 in 8 bits in a PNG. 16 bits doesn’t help: PNGs store their values as fractions in the range [0.0, 1.0].<\/p>\n

      No linearization or filtering or order of operations or any such thing involved, just a simple question. Unfortunately,\u00a0PNG fails.<\/p>\n

      Wrong answers include:<\/p>\n