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 |
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 |
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 ;-) |
coothead |
Jul 12 2023, 01:21 PM
Post
#2
|
Advanced Member Group: Members Posts: 234 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Sentinel166,
coothead |
Sentinel166 |
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 |
Dag |
Jul 6 2024, 05:47 PM
Post
#4
|
Advanced Member Group: Members Posts: 122 Joined: 24-October 06 Member No.: 549 |
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 |
Jul 7 2024, 05:03 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
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. |
Dag |
Jul 7 2024, 03:59 PM
Post
#6
|
Advanced Member Group: Members Posts: 122 Joined: 24-October 06 Member No.: 549 |
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. Imho, he simple missed v. vw. |
Christian J |
Jul 8 2024, 02:04 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
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. 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 |
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. |
Lo-Fi Version | Time is now: 4th December 2024 - 02:40 PM |