WordPress WebP Express
You can use WebP, a compressed image format developed by Google, in the WordPress infrastructure with the WebP Express plugin.
Convert Image to WebP On WordPress
While using the WebP image format, the plugin converts the images on the site, as better compressed web images will improve page loading performance. While it converts PNG and JPEG images to WebP format, it also loads JPG and PNG formats in browsers that do not support WebP format with WebP fallback.
WebP Express Installation
After installing the plugin, you can access the plugin’s settings page by following Settings > WebP Express.
There is no need to edit the entire page, editing a few places is sufficient.
Bulk Convert
Convert the images in your library to webp by clicking the “Bulk Convert” button under the Conversion tab.
The duration of the process varies depending on the number of images to be converted, do not close the conversion screen until the process is completed.
Alter HTML
Click the “Alter HTML” field, and select “Replace <img> tags with <picture> tags, adding the webP to srcset”. This option activates the WebP fallback structure (the structure that displays webP in browsers that support WebP, and other visual formats in browsers that do not) by using <picture>, <source>, and <img> elements.
WebP Express Output
<picture>
<source srcset="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-300x172.png.webp
300w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-1024x585.png.webp
1024w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-150x86.png.webp
150w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-768x439.png.webp
768w, https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/ai-tools-for-design-creativity-400x229.png.webp
400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp">
<img width="1200" height="686" src="https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image webpexpress-processed" alt="AI Tools for Design and Creativity" fetchpriority="high" srcset="https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity.png
1200w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-300x172.png
300w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-1024x585.png
1024w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-150x86.png
150w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-768x439.png
768w, https://juniortoexpert.com/wp-content/uploads/ai-tools-for-design-creativity-400x229.png
400w" sizes="(max-width: 1200px) 100vw, 1200px">
</picture>After the above-mentioned configurations are completed, click the save button, if you are using a cache plugin, clear the cache and your images on the site will be converted to webP.