layout shift with img object and lazy loading, despite appropriate html attributes and css, with {width:100%;height:100%}, dimensions and ratio of the object shou Options

[Sentinel166]

I have a linear gradient background and use lazy loading, good. Except that the dimensions of the object and its object ratio, before and after the loading, change, and disregard the attributes I gave to the object, which are Img.width and Img.height, Img being of course the biggest (original) image.
The logic should be simple: Take the width and height of the biggest image fitting the 100, 70 50 or 35vw available, and make a colorful box with it until the image is loaded.
But it doesn't work: I see substantial layout shift when scrolling fast enough so the loading isn't done offscreen. The object has a different size before and after loading. I can also see those dimensions by removing the src and srcset in the DOM tree (developper tools) to see the background behind, and notice the size AND ratio change.
What's wrong ?

Dimensions are all in pixels.
- css object-ratio: "auto 528/1349" -> 0,391401037806
- actual dimensions displayed: 195.688/499.984, giving a ratio of 0,390781563126
- Img.width / Img.height: 549 / 1328 : 0,413403614458
- dimensions if I remove the src and srcset attributes: 141.422 / 361.312: 0,390581717452
this corresponds to no particular image versions, not even the smallest one.

I see that it matches the auto object-ratio css property, supposedly computed with the width and height attributes yet without matching them at all ? This baffles me.
I just want my color background to fill the damn place the image will be half a second after, but instead it occupies a very small surface for no reason. I thought the height and width attributes had the last word ?

html:

CODE

<figure><a href="/Images/meta/shining_parody.webp" target="_blank"><img width="2741" height="1848" loading="lazy" alt="illustration of feedback aping Shining" sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw" srcset="version1.webp 200w, version2.webp 400w, version3.webp 604w, version4.webp 800w, version5.webp 1024w, /Images/meta/shining_parody.webp {{$img-original.Width}}w" src="/Images/meta/shining_parody.webp" style="max-width:2741px;max-height:min(1848px,500px);background:linear-gradient(45deg,#2c2522,#d1cabd,#b89966,#a26335)"></a></figure>

The per-image max-width with the min function has proven the only way to get "intrinsic size whenever it fits". The real code has Golang script instead of specific width and height,
Additional css:

CODE

figure {
  max-width:50%;
  a {display:flex; cursor: zoom-in}
  img{z-index:1;margin:auto;width:100%;height:100%;}
}

Thanks for your help ;-)

[coothead]

Hi there Sentinel166,

test this out...
HTML

CODE

  <a href="/Images/meta/shining_parody.webp">
   <img
      width="2741"
      height="1848"
      loading="lazy"
      src="/Images/meta/shining_parody.webp"
      alt="illustration of feedback aping Shining"
      sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw"
      srcset="version1.webp 200w,
              version2.webp 400w,
              version3.webp 604w,
              version4.webp 800w,
              version5.webp 1024w,
              /Images/meta/shining_parody.webp {{$img-original.Width}}w">
  </a>  

CSS

CODE

a {
  display: flex;
  width: 50%;
  margin: auto;
}
img {
   width: 100%;
   height: auto;
   background: linear-gradient( 45deg, #2c2522, #d1cabd, #b89966, #a26335 );
}

coothead

[Sentinel166]

sorry but no,
without width figure {50%} images take non-sensical sizes, which relate neither to the original picture, nor to the one version currently displayed, nor any max-width or max-height still applied, nor the sizes attribute. Usually it works (keeps at 50%, for some reason ?), sometimes it doesn't.
Also, I tested, removing the inner link makes no difference regards to the moment of loading.

This post has been edited by Sentinel166: Jul 13 2023, 04:53 AM

[Dag]

sorry but no, ...

CODE

... sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw"
srcset="version1.webp 200w, version2.

Sorry but I never saw css unit as w. Maybe this is something new?

But first, always firstly(!), chek out your code in
https://validator.nu/

[Christian J]

sorry but no, ...

CODE

... sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw"
srcset="version1.webp 200w, version2.

Sorry but I never saw css unit as w. Maybe this is something new?

New to me as well. It doesn't seem to be an ordinary length unit:

To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string 450w.
https://developer.mozilla.org/en-US/docs/We...eElement/srcset

[Dag]

sorry but no, ...

CODE

... sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw"
srcset="version1.webp 200w, version2.

Sorry but I never saw css unit as w. Maybe this is something new?

New to me as well. It doesn't seem to be an ordinary length unit:

To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string 450w.
https://developer.mozilla.org/en-US/docs/We...eElement/srcset

Imho, he simple missed v. vw.

[Christian J]

sorry but no, ...

CODE

... sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw"
srcset="version1.webp 200w, version2.

Sorry but I never saw css unit as w. Maybe this is something new?

New to me as well. It doesn't seem to be an ordinary length unit:

To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string 450w.
https://developer.mozilla.org/en-US/docs/We...eElement/srcset

Imho, he simple missed v. vw.

No it seems to be correct, see the linked page.

I will never be able to remember all these syntax special cases they invent.

[Dag]

Yep, '450w' so silly.

I gave to srcset some try but that is big pain in the arse. Never used again.