KPC
Kevin Powell - Community•2y ago
Moweyy

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>
<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!
1 Reply
Moweyy
MoweyyOP•2y ago
Solved: Chrome version: Version 114.0.5735.198 (Official Build) (x86_64) Turns out that my webp images were being displayed, just that in Chrome's inspector it highlights the img tag instead of my source tag. I only found out by switching my source image for something else. Seems like other people were confused by this as well: https://stackoverflow.com/questions/53598308/webp-and-picturesource-will-not-work-for-me-on-chrome
Stack Overflow
Webp and
I'm facing a problem, I just can't seem to find out what the problem is, I have: <picture> <source type="image/webp" srcset="/images/meh_logo.webp"> <img src="/images/meh_lo...

Did you find this page helpful?