QR Code contains TinyURL of this article.Ogres Have Layers

(Like an onion? No, like Perpetual βeta images.)

diagram: image layers

You may not realise — despite my previous ramblings on the subject — that the majority of images on the Perpetual βeta actually consist of up to six layers, stacked atop each other.

Let’s work through the layers of the image above, to explain why I’ve opted for such a complicated configuration.

From left to right (which is the order the browser will render them in):

№ 1 - Intrinsic Placeholder
This layer defines the width and height of the image and reserves the space to accommodate it in the page. The dimensions are dynamic and fully responsive. The reserved space ensures that content is not displaced when the image has loaded. The magic formula to compute the height of the intrinsic placeholder:
calc((image_height/image_width)*100%)
№ 2 - Fallback Background Colour
This layer contains just a hint of colour — background: rgba(0, 0, 0, 0.04) — to provide a visual clue that an image is loading.
№ 3 - Fallback Low-resolution Placeholder
This layer contains a low-resolution variant of the principal image, with a maximum dimension of just 10-pixels on its longest axis. We then stretch the image to match the dimensions of the intrinsic placeholder. This gives us a hint of the image to come. For performance reasons, the image is base-64 encoded and embedded in the HTML source, negating the need for a network request.
This layer does not have any dependencies, so it is virtually guaranteed to render. If JavaScript is available, we remove this layer from the DOM as we will not need it (see № 4 below).
Unfortunately, aside from Google’s Chrome browser, most clients don’t handle the up-scaling of this image too well, producing some strange effects, as you can see from the screen-capture below (rendered by Safari):
up-scaled low-resolution placeholder image, rendered by the Safari web-browser
№ 4 - StackBlur Layer
A more elegant version of the third layer. This layer requires canvas support and JavaScript. We run the base-64 encoded placeholder image through Mario Klingemann’s StackBlur algorithm, resulting in a more attractive placeholder image, with none of the artifacts of a browser’s up-scaling. Compare the image below with the one above:
up-scaled low-resolution placeholder image, after StackBlur processing, rendered by the Safari web-browser
№ 5 - The Principal Image
When loading of the principal image is complete, we use a CSS transition to smoothly replace the low-resolution placeholder image with its high-resolution counterpart.
carved wooden likeness of the character Shrek
Shrek w Ogród Bajek w MiędzygórzuCredit: . License: CC BY-SA 3.0
№ 6 - (optional) CSS filter
A further layer: in some cases, I use a CSS filter to stylise an image:1
carved wooden likeness of the character Shrek (grayscale)

I’ll admit, one might consider this over-engineering. But the end result is that any visitor — on even the slowest connection and with or without JavaScript — will enjoy image loads without content re-flow and with attractive placeholders that transition smoothly to the principal image upon completion.

It’s all about the user experience.