I'm not a web-designer, just a self-taught webmaster for my own site, who figures things out by trial and error. Please forgive any stupid mistakes that seem obvious to people who actually know what they're doing!
Using the picture tag, trying to native lazy load responsive webp images with fallback responsive jpegs. Whatever I'm doing it's not working. Images aren't lazy loading. I'm getting 'avoid enormous network payload' warnings in website audits.
Here's the code I'm currently using:
<picture>
<source srcset="portfolio/homepage/webp_images/homepage_06.webp 1x" type="image/webp" media="(min-width: 1200px)" >
<source srcset="portfolio/homepage/webp_images/homepage_06sm.webp 1x" type="image/webp" media="(max-width: 450px)" >
<source srcset="portfolio/homepage/homepage_06.jpg 1x" type="image/jpg" media="(max-width: 1200px)" >
<source srcset="portfolio/homepage/homepage_06sm.jpg 1x" type="image/jpg" media="(max-width: 450px)" >
<img src="portfolio/homepage/homepage_06.jpg" loading="lazy" alt="Vancouver online dating photographer" width="1055" height="700" >
</picture>
What am I doing wrong? Please help! Thank you in advance.