WordPress WebP Express
You can use WebP, a compressed image format developed by Google, in the WordPress infrastructure with the WebP Express plugin.
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.
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.
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.