Dithering

As colour depth decreases, dithering processes a pattern that simulates the presence of a wider range of hues to deceive the eye even if they physically do not exist. Once a technique widely used when screens and graphics cards had a limited capacity for colour reproduction, it has now fallen into disuse in favour of more realistic image formats.

As in other fields, photography for example, high fidelity is not an automatic guarantee of an image evaluated/perceived as better, it is only synonymous with greater 'technical' precision. The wide adoption for the web of jpegs compressed to 60% or 75%, virtually indistinguishable from the original file to a distracted eye (and the eye of the Internet visitor is constantly distracted), shows how the highest possible quality is not necessarily needed to display an image.

For this reason, Norma has been adopting dithered compressed pngs wherever possible since 2018: while the visual perception remains mostly the same, the weight savings in many cases, especially for monochrome images, are up to 90 per cent. The considerable weight reduction, once indispensable on slow connections, combined with today's high download speed greatly improves the web page experience, saving whole seconds of waiting time when viewing images.

image compression quality web design how to dithering image website
Two images side by side, a 75% compressed, 1080x1629 jpeg displayed at 540px width (saved at double size to avoid blurring on high definition screens) weighs 532.8KB. Further compression via CDN can be up to 150KB if transferred as webp. On the right, a dithered png, 540x814 displayed at natural width (and thus with zero graphics card calculations required to resize it), weighs 127.5KB. Bonus: limiting the colour palette also removed the excessive magenta cast of the film.

Dithering for Instagram

After the experience with the AR filter for Tangenze Botaniche, which unlike other 3D materials could not be processed by dithering, it was natural to experiment with alternative methods to achieve at least a visually similar result with the limited shaders available on Spark AR for Instagram.

Since November 2020, the Dithering filter (click to open in Instagram) is thus available on Norma's Instagram page, which simulates a monochrome visualisation with dithering via pre-rendered patterns.

spark ar instagram dithering shader dither filter instagram facebook
Two images taken with the Instagram filter