Logo in header needs explicit width and height

[keepthebyte]

Expected Behaviour

https://author-p7719-e13203.adobeaemcloud.com/content/experience-fragments/wknd/language-masters/en/site/header/master.html

The WKDN logo in the header is not setting a width and height in the markup - which is causing layout shift as the page is rendering.

Screenshot from Lighthouse:

Actual Behaviour

No layout shift when rendering the page

[keepthebyte]

Solution might be to add the the size - for desktop and mobile breakpoint - into https://github.com/adobe/aem-guides-wknd/blob/master/ui.frontend/src/main/webpack/components/image/scss/styles/_logo.scss

[keepthebyte]

From: @vladbailescu - I quote:

Setting width and height on images goes against the adaptive image component.. - the best way forward is to start using <picture> tag, each <source> will then allow to provide width and height - See whatwg/html#4968 , it should soon be supported by all browsers