Lighthouse & Multi-format Responsive <picture> tag
I'm a little perplexed and wondering if someone can see what i'm missing. Running a Lighthouse test on one of my sites and it's coming back that I should be using WEBP as my image format of choice. As far as I can tell, I am and have PNG as a fallback.
Below is the code in question.
<picture>
<source media="(max-width: 360px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.webp">
<source media="(max-width: 360px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.png">
<source media="(max-width: 640px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.webp">
<source media="(max-width: 640px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.png">
<source type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh.webp">
<img src="/wp-content/uploads/2023/12/homepage_phone_refresh.png" alt="Background Image" fetchpriority="high">
</picture>
Below is the code in question.
<picture>
<source media="(max-width: 360px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.webp">
<source media="(max-width: 360px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-358x360.png">
<source media="(max-width: 640px)" type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.webp">
<source media="(max-width: 640px)" type="image/png" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh-636x640.png">
<source type="image/webp" srcset="/wp-content/uploads/2023/12/homepage_phone_refresh.webp">
<img src="/wp-content/uploads/2023/12/homepage_phone_refresh.png" alt="Background Image" fetchpriority="high">
</picture>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
