Images Inside <header> Element Do Not Lazy Load

[kushh23]

Description

A user reported that there is a bug where images placed inside a <header> element are not lazy-loaded, and this issue impacts the scaling behavior of other pictures on the page.

1. Images outside the <header> element are lazy-loaded and scaled appropriately.
2. Adding an identical image inside the <header> element prevents it from being lazy-loaded or scaled.
3. Furthermore, the addition of this image inside the <header> causes the previously correctly scaled image outside the <header> to stop scaling as well.

I am able to replicate the first two steps easily, but their third point do not exist at my end, on my end, if I use same image then it is lazyloaded outside header element too.

Step-by-step reproduction instructions

1. Add an image to the Header element. I used the Twenty Twenty theme and added this piece of HTML code to the Header.html File.
   
2. Change Bypass Lazy Load for First Images settings to 0 to ensure that images are lazyloaded.
   
3. Check on the site, that this image is not lazyloaded at all.

Screenshots, screen recording, code snippet or Help Scout ticket

Reported here - https://secure.helpscout.net/conversation/2764612077/441276
Can be checked here - https://verdantfarmer.s1-tastewp.com/test/

Images provided by user:

Environment info

No response

Is the issue you are reporting a regression

No

[selul]

@kushh23 thats expected, images in header and above the fold and they dont need to be lazyloaded. Let me know if Im missing something

[ineagu]

@selul, this makes sense, but I can see an issue with the fact that we don't do the scaling either, but at the same time, we remove the responsive sizes for those elements.

So if we have a 1000x1000 image in header, it would load at this size, right? Even on mobile.

[selul]

@ineagu do you see the sizes being removed on Kush case ?

[ineagu]

@selul I haven't seen those sizes there from srcset, but they are not usually added to the logo as far as I can see :

<img width="1024" height="585" src="https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a-1024x585.webp" class="attachment-large size-large wp-post-image" alt="" itemprop="image" decoding="async" fetchpriority="high" srcset="https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a-1024x585.webp 1024w, https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a-300x171.webp 300w, https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a-768x439.webp 768w, https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a-1536x878.webp 1536w, https://ionutn.com/wp-content/uploads/2024/01/3c898c94-2146-4d34-bb86-15c247f7216a.webp 1792w" sizes="(max-width: 1024px) 100vw, 1024px">

[selul]

@kushh23 I will be closing this since the behaviour is expected to work like this.