Wordpress Topics

WordPress WebP Express

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.

WordPress WebP Express Plugin

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.

WebP Express Bulk Convert
WebP Express Bulk Convert Start Conversation

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.

WebP Express Bulk Convertion Done

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 Alter HTML and WebP Fallback

WebP Express Output

 <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">

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.