wordpress - How to debug Serve images in next-gen formats

Question

I am trying to speed up the website but got this point to serve images in next-gen formats (4.95s). The site is developed in WordPress I got a suggestion when browsing google to change images in webP. Other than that any other is there any method to solve this?. Because webP is not supported by all browsers. Can anyone help me with this without using a plugin and convert to webP method.

Answer 1

If you're manually coding your site, you'll need to swap all <img> tags for <picture> that include both the next-gen format and the fallback one. Here is what I'm using in one of my sites:

<picture>
    <source type="image/webp" srcset="pictures/h-doctors.webp">
    <source type="image/png" srcset="pictures/h-doctors.png">
    <img src="pictures/h-doctors.png" alt="A picture of the doctor">
</picture>

I checked it at the time and non-webp supporting Safari was using the png correctly.

As an alternative, if you have access to your server configuration and your server is Apache, you can install the pagespeed mod which does the above automatically for all your served images.