1. 19

  2. 9

    Technically, generating the noisy image on the client is a form of lossy compression which only preserves the “distribution” of an image. :)

    1. 3

      Huh I never thought about it like that. Nice :)

    2. 4

      The question that popped into my head is:

      “While you can’t compress white noise in general (because it’s random), is it possible to find an image that visually reads as white noise but also compresses well?”

      Whatever gives us the visual “feel” of white noise can’t be a truly robust measure of randomness, but some sort of simpler test. So an image could have some sort of patterns that the compressor can take advantage of that slips below our detection. How to find such an image and whether the benefits would be worth it would be harder questions, so this idea is probably just an idle curiosity.

      1. 2

        I remember trying to exploit formats’ limitations to simulate something close enough; I compressed a JPG to very low quality (didn’t work) and created a GIF with very few colors (as that format contains a palette of the colors used, which I assume takes space within the file). None helped.

        In retrospect, maybe resizing a compressible pattern using background-size would’ve created the right illusion.

        In any way, the illusion that worked here was a combination of the image being semi-transparent and, well, a noise, so repeating a smaller noisy tile wasn’t noticeable.

        There might be other interesting answers that are above my math/optics skills :)

      2. 4

        Damn, that’s a lot of effort for “a design where the background was a just-slightly-grainy grey”. A cool technical solution, but maybe a case where compromising on the design would’ve been more appropriate?

        1. 6

          Sometimes, compromising the design is the right solution. If I wouldn’t have found this solution quickly, we might’ve ended up doing that :) However, finding this solution was quick enough for us to deliver at time (as well as a fun and educational experience).

          1. 5

            Fun and education are top-tier reasons to do something! :D

        2. 1

          Did you end up generating a new swatch on every client? Could you have pre-generated the swatch once and then tiled it?

          1. 1

            I ended up generating a smaller tile, as it took considerably less time. Pre-generating it would’ve meant having an image file to load, and then we’d be back to our initial problem :)

            1. 2

              There’s probably a point at which loading, parsing, and executing the JavaScript is slower than loading a small image file, certainly? Not to mention code complexity. JS engines and computers are fast these days, but I wonder where the balance lies.

              1. 1

                There is, and if this would’ve happened in the last few years (at least in countries with good Internet) we would’ve done that. This was at 2011, and was meant to run on mobile devices. Both connection and speed were a far cry from what we’ve got now.