I complain about this a lot:

https://movq.de/v/e7cb49eefb/hiccupfx

But to be honest, my blog did the same thing – to some degree.

This is fixed now. The trick is to add width and height to all <img> tags. That way, modern browsers know how much space to reserve for the image. Without this, they just reserve zero space, so when the image finally loads, you get jumpy layout.

This effect is even worse when you use <img loading="lazy"> – which I can finally use, now that the jumpy layout has been fixed. 🥳

@movq@www.uninformativ.de Good idea, I should probably do the same for my photo galleries.

@lyse@lyse.isobeef.org I noticed that loading="lazy" might not be so great after all.

This is without lazy loading:

The total page load time is around 400-500 ms. Okay.

Now this is with lazy loading:

It finished much quicker, after about 250 ms. Sounds good.

But notice this gap right here?

This wasn’t there before. With lazy loading, it now takes something like 80-100 ms until the browser even starts loading images. This is Chromium, but Firefox shows a similar gap.

The net result is that there is a very noticeable delay/flicker when you open a page, because it takes so long until the images have loaded. Yes, the layout doesn’t shift around, but that has nothing to do with lazy loading.

How odd. 🤔