I cannot figure out why I cannot see webp images in my angular application. Below is the code:
<picture>
<source type="image/webp" srcset="./assets/4T-dashboard-start.webp">
<img class="shadowed" src="./assets/4T-dashboard-start.png" style="width: 100%; height: auto;">
</picture>
Using developer tools I can clearly see the reference to the webp image is valid, and does in fact contain an image. When I hover over any picture element in my application, I get a strange 0px tall by 21px wide element.
My guess is the picture element is working correctly in that it is serving the image since it is unable to read the webp image. The question is, why is it unable to read the webp image?
<picture>
<source type="image/webp" media="(min-width: 0px)" srcset="./assets/4T-dashboard-start.webp">
<img class="shadowed" src="./assets/4T-dashboard-start.png" style="width: 100%; height: auto;">
</picture>
I have also tried toying with the media query and seeing if that would do anything. To no avail. I made the two test webp images via command line. I am able to open them in their directory, and view them organically in chrome just fine. What do I need to do in order to get this working?
If I build this to a test server, and run an audit log using chrome on the website, I can confirm that Chrome has no current way of knowing that two webp images exist.
Ok, I found the thing that was causing the confusion:
Shortly after switching some images to webp, I started lazyloading all images across the application. One of the lazy loading attributes - [attr.lazyLoad]="'imageURL'" was loading after the image loaded for example
<picture>
<source type="image/webp" [attr.lazyLoad]="'./assets/4T-dashboard-popover.webp'">
<img [lazyLoad]="'./assets/4T-dashboard-popover.png'" style="width: 100%; height: auto;"/>
</picture>
When scrolling to this image in the web app (it wasn't initially visible when the component loaded) everything worked fine. The webp image would load
But, if the image passed the lazyLoad criteria (i.e. it's container element was visible) on page load, the app would lazy load the png image, then load the webp image.
So to work around this, (which I initially thought was a webp error) I ended up using srcset in the source tag to force a webp load like the following:
<picture>
<source type="image/webp" [attr.lazyLoad]="'./assets/4T-dashboard-popover.webp'" srcset="./assets/4T-dashboard-popover.webp">
<img [lazyLoad]="'./assets/4T-dashboard-popover.png'" style="width: 100%; height: auto;"/>
</picture>
For images that were going to be visible to the client the first time they navigated to the component.