Even lazier loading of images

[citrusui]

So far, lazyload seems to be working well in reducing page load times. However, using lazyload also means experiencing frequent page reflows. As a result, reading long paragraphs of text on these pages becomes a pain for the user.

Two considerations:

• generate smaller “thumbnail” versions of images (will consume more develop time and increase page load time)

• add a basic placeholder image, ideally a transparent (white) background with a camera or picture glyph in the middle

Idea number 2 seems the most ideal. However, the placeholder will need to exactly match the dimensions of the original image once it has finished loading. Perhaps the placeholder could be placed inline, as a PNG with alpha transparency. Or, it could be placed inline as a base-64 encoded SVG. Either way, the issue remains: how do I ensure the placeholder matches the original image dimensions? Specifying the dimensions manually is tedious and unrealistic. It is crucial that the loading of page content does not cause the page to “jump up” or scroll up unexpectedly -- especially when the page is reloaded. Could this be resolved through extra styling of <img> or <div>?

[citrusui]

Progress has been made; see c58b511