Srcset not working

Hi! I'm trying to display webp images with fallback for older browsers, but I can't seem to get it to target my webp images on browsers that support them. It always falls back to my jpg images.

According to mdn, I don't need to provide a condition descriptor (eg: 1x, 450w, etc) as it will be assigned a default descriptor of 1x. I have no need for that anyway as I am only using 1 image that doesn't vary too much in size.

Here's the source code:

<picture>
    <source srcset="./assets/home/district-estate.webp"     src="./assets/home/district-estate.webp" type="image/webp" class="d-none d-lg-block img-fluid" alt="mountain hill">
    <source srcset="./assets/home/district-estate-mobile.jpg" class="d-lg-none img-fluid" alt="mountain hill" type="image/jpg">
    <img src="./assets/home/district-estate.jpg" class="d-none d-lg-block img-fluid" alt="mountain hill">
</picture>


Thank you!
Was this page helpful?