I have a website that I have made responsive and utilise the <picture> element to serve up webp, avif and have a png fallback for older browsers. It should look like this (Chrome/Safari):
For some reason, certain browsers (Firefox 94 on desktop and mobile, Safari on iOS 14< as examples) will load the AVIF format of the image, but will use the explicit width and height from the fallback <img> tag I have inside the <picture> element, resulting in a warped image.
The site in question is: https://blah.cloud/now (pull the browser to <768px wide to see the problem).
The code I'm doing the image selection with is as below:
<picture>
<source media="(min-width: 768px)" srcset="/images/logo-title.avif" type="image/avif" alt="logo" width="245" height="34">
<source media="(min-width: 768px)" srcset="/images/logo-title.webp" type="image/webp" alt="logo" width="245" height="34">
<source srcset="/images/logo.avif" type="image/avif" alt="logo" width="65" height="65">
<source srcset="/images/logo.webp" type="image/webp" alt="logo" width="65" height="65">
<img src="/images/logo-title.png" alt="logo" aria-label="logo" width="245" height="34">
</picture>
The reason for the explicit width and height is for Google PSI to avoid CLS.
I'm kind of at a loss here as to why this behaviour happens - if it is pulling the avif/webp image, and I've confirmed that it is, it should use the width and heightassociated with that` element?
Any ideas greatly appreciated.
