Description
Image loads → page reflows → 🙀🙈. People are trying to solve this.
Previously, in the newsletter
Facebook* sneaks a 200 byte preview image into JPEG headers:
https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/
And here’s a nifty tool to generate CSS gradients to use as placeholders:
http://gradifycss.com
New stuff:
Stacked background images in CSS (the tiny one data-uri'd and blurred):
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
A simple, gray placeholder (PS this sort of thing should be even simpler and we know it.):
http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/
(still waiting for https://twitter.com/wilto/status/652499619008655361)
*Apps, anyways. This seems impossible on the web? Except maybe with Service Workers...