4 ms·

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

by gshdg 7y ago

Analemma_ 7y ago
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.
- drampelt 7y ago
  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-jumps-chrome/ https://blog.google/products/chrome/taking-aim-annoying-page...
  - staktrace 7y ago
    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.
- eps 7y ago
  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.
butz 7y ago
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 https://www.youtube.com/watch?v=4-d_SoCHeWE
- gshdg 7y ago
  That's been recommended since about 1993. That doesn't mean more than 10% of sites have ever actually followed the guideline.
  - bfred_it 7y ago
    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.
- zeroimpl 7y ago
  If you specify both a width and height, it's not going to be very responsive.
  - bfred_it 7y ago
    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.
Tomte 7y ago
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.
robertoandred 7y ago
Nope, lazy loading neither helps nor hurts that issue. Devs can fix that by ensuring image elements have a defined size.
Tagbert 7y ago
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.

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

by gshdg 7y ago

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

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.

drampelt 7y ago
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-jumps-chrome/ https://blog.google/products/chrome/taking-aim-annoying-page...
- staktrace 7y ago
  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.
eps 7y ago
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.

butz 7y ago

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 https://www.youtube.com/watch?v=4-d_SoCHeWE

gshdg 7y ago
That's been recommended since about 1993. That doesn't mean more than 10% of sites have ever actually followed the guideline.
- bfred_it 7y ago
  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.
zeroimpl 7y ago
If you specify both a width and height, it's not going to be very responsive.
- bfred_it 7y ago
  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.

Tomte 7y ago

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.

robertoandred 7y ago

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

Tagbert 7y ago

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.