Hacker News Reader

Comment by gshdg | Hacker News Reader

Will lazy-loading images avoid viewport jumping? Because that's a constant headache on mobile Safari.

Now it is recommended to use width and height attributes on img elements. It will help to prevent viewport jumping and will support responsive aspect ratio resizing. https://www.youtube.com/watch?v=4-d_SoCHeWE

That's been recommended since about 1993. That doesn't mean more than 10% of sites have ever actually followed the guideline.

WordPress does this by default and that’s the most common platform to date. I’d dare to say that most websites have those attributes, but most SPAs don’t, because that’s too hard.

If you specify both a width and height, it's not going to be very responsive.

The attributes are overridden by CSS. You should have:

    max-width: 100%;
    height: auto;

What the other user is talking about is a new feature that FINALLY uses the attributes to preserve the ratio before the image starts loading.

Kinda ridiculous that we had to wait 8 years of “responsive design” before they realized that this was always supposed to happen.

Viewport jumping is the scourge of web browsing; if some browser deployed some kind of advanced heuristic to try and get rid of it completely that alone might get me to switch.

I remembered hearing about Chrome doing it a while ago [1] but I still personally experience it fairly often.

1: https://blog.google/products/chrome/taking-aim-annoying-page...

Both Firefox and Chrome have implementations of scroll anchoring which is intended to fix this. The implementations are different and neither is perfect, but in a lot of cases they do help with jumping.

Nearly all image formats have image dimensions in their header, so a hundred-byte prefetch per image should give the browser the image size IF it's not specified in the html or css.

Nope, lazy loading neither helps nor hurts that issue. Devs can fix that by ensuring image elements have a defined size.

I think the biggest cause of this is not regular site images but dynamic ads that come in after the main page loads and never include size information. It’s even worse when the ads change and have a different size that causes the layout to shift while you’re reading an article.

I don't think so.

But both Firefox and Chrome have implemented this: when your img tag contains both height and width attributes, the browsers use those to calculate the aspect ratio, and use those to reserve the correct amount of space when rendering the page.

Reply on news.ycombinator.com