Noisy background – Static
First published on Ka of Isis 140312
Fig. Test 1. If you see no noise above, your browser probably does not support the canvas element.
When Daniel Rapp authored “Noisy”, a jQuery plugin that adds random static noise to the background of a given element based on the HTML5 canvas element, he targeted high bandwidth cost, slow development speed, and inflexibility. Due to the random nature of background images with a noisy overlay, compression usually is not very efficient. With the 2.5 kB “Noisy” script (see important note below) one shall be able to generate images up to 300 kB without loading for even a second, saving bandwidth cost and loading time. When testing this on Impossiblue using the widest desktop layout, a 960x120 px screendump of the noise created in Test 1, saved as a PNG for web and devices, clocked in at 88.5 kB. Trying out an image with a different noise opacity involves fewer steps by just updating a parameter, saving a file and refreshing a browser window, than changing and saving an image in an application like Photoshop. By generating the background image in JavaScript, one does not need to rely on a web server being able to serve a static file for it – or several for a responsive design. That said, it should not be hushed that what may be gained in shorter loading times for page content overall, may well boomerang if several or large noise creations are specified for the same page. For this particular page, the browser/computer combination needs to generate 5 individual noise patterns, and this takes time, too. Less is more is perhaps a good starting point whenever one leaves all the work to an (always) unknown client.
Rapp has provided a test chamber where we can experiment with script parameters and generate code and fallback images. A few results from my own testing are shown below. Please look at the page source to see the different settings.
Fig. Test 2. Identical to Test 1 except for the (default) transparent background used here.
Fig. Test 3. When observed closely, the script always generates a repeating pattern. On a large canvas with fine-tuned settings or subtle opacities, this may be hard to descern, but with small size values the pattern can be in-your-face and end up visually unpleasing.
Fig. Test 4. Noise with opaque reddish particles.
Fig. Test 5. The default parameters yield a very subtle effect, indeed.
Note: Because the script generates a square “tile” based on the size parameter, it is necessary to specify a size that is at least equal to the width or the height of the canvas element, whichever is the largest, if the image is to be completely random, i.e. with no tiling. In other words, when I wanted to fill a 960x120 px canvas, the script actually generated a 960x960 px tile in the background. This can be taxing on less capable devices.
Important: I ran into trouble using the minified version of the script, jquery.noisy.min.js. The author had not provided a version number, so I can only state that the script I tested initially was downloaded from GitHub in early March 2014. I finally ended up using my own manually minified version (which is larger that Rapp’s original 1.4 kB file).
Update: On 12 March 2014 Daniel Rapp published an updated minified version.