The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Sentinel166
post Jul 12 2023, 11:50 AM
Post #1


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



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 ;-)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jul 12 2023, 01:21 PM
Post #2


Advanced Member
****

Group: Members
Posts: 216
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sentinel166
post Jul 13 2023, 04:33 AM
Post #3


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 6 2024, 05:47 PM
Post #4


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549



QUOTE(Sentinel166 @ Jul 13 2023, 01:33 PM) *

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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 7 2024, 05:03 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,710
Joined: 10-August 06
Member No.: 7



QUOTE(Dag @ Jul 7 2024, 12:47 AM) *

QUOTE(Sentinel166 @ Jul 13 2023, 01:33 PM) *

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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 7 2024, 03:59 PM
Post #6


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549



QUOTE(Christian J @ Jul 7 2024, 02:03 PM) *

QUOTE(Dag @ Jul 7 2024, 12:47 AM) *

QUOTE(Sentinel166 @ Jul 13 2023, 01:33 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 8 2024, 02:04 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,710
Joined: 10-August 06
Member No.: 7



QUOTE(Dag @ Jul 7 2024, 10:59 PM) *

QUOTE(Christian J @ Jul 7 2024, 02:03 PM) *

QUOTE(Dag @ Jul 7 2024, 12:47 AM) *

QUOTE(Sentinel166 @ Jul 13 2023, 01:33 PM) *

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. wacko.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 15 2024, 02:38 AM
Post #8


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549



Yep, '450w' so silly.

I gave to srcset some try but that is big pain in the arse. Never used again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th July 2024 - 02:02 AM