I’m puzzled that Alter HTML doesn’t transform the HTML for the featured image. The HTML looks fine and the image is there.
HTML looking fine (but it has not been transformed):
<img loading="lazy" width="1055" height="700" src="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg" alt="" title="Patricia-80" srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" class="wp-image-191978">
WebP image is there:
https://techpoint.africa/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2021/08/Patricia-80.jpg.webp
I just tried to run the raw HTML through the [alter html library](https://github.com/rosell-dk/dom-util-for-webp). It transforms it, and it does it correctly. It is transformed to this:
<picture><source srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg.webp 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg.webp 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" type="image/webp"><img loading="lazy" width="1055" height="700" src="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg" alt="" title="Patricia-80" srcset="https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80.jpg 1055w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-980x650.jpg 980w, https://techpoint.africa/wp-content/uploads/2021/08/Patricia-80-480x318.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1055px, 100vw" class="wp-image-191978 webpexpress-processed"></picture>
So yes, I am puzzled that the HTML isn’t transformed for that image.
But well, Alter HTML isn’t capable of transforming all image HTML anyway (CSS backgrounds and lazy loaded images are examples). But the .htaccess rewrite rules makes sure that the image are served as webp even then – albeit with the misleading file extension