in reply to

Placeholder Images

The size of my images changes fluidly with my responsive layout. Since the browser does not know their heights a priori, the space collapses while the images are still loading. Once the images load the entire page reflows and the rest of the content jumps around to make space for them. It would be much better if the space for the images was reserved from the start and, as a bonus, if some lower resolution version of the images displayed, while the images load. Here is how I do it.

Nice. I do that as well, but with WebP only (WebP's header is smaller than JPEG, I remember that Facebook article about their app reconstructing the JPEG header…).

So WebP-supporting browsers get the tiny base64 preview and the full image loading over it, and JPEG-only browsers get a progressive JPEG (mozjpeg-optimized), with the image's dominant color as the background before the JPEG even starts loading.

Posted a response on your own website? Send a Webmention:

(Even better - implement automatic Webmention sending on your website. And set up indie-config to make reply/repost/like buttons work.)