How to Serve WebP Format Images in WordPress

WebP is a modern format for serving images faster than ever. If you are using WordPress, you can easily serve all images in WebP with some basic tweaks. So be ready for hard work with patience.
webp

Learn about Browser Support • Benefits • Implement WebP in WordPress with Fallback • Convert to WebP

In this article, I will show that without using any plugin how I have implemented WebP images to serve automatically on supported web browser. WebP is currently supported in Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and some Android browsers. According to Google Analyticsreports you may find that more than 49% people uses these supported content type browser. So, it’s high time to go with this technique.

What are the major Benefits of using WebP format Image?

In comparison to the size of normal JPG or PNG image, same dimension image WebP can serve in small bytes. Hence, your Images will load faster.
Serving Quality Images in small bytes, means dramatically saving bandwidth in a smarter way.
Keep your website updated with the market trend. Don’t loss conversation just due to bull-cart style loading problem.

I love to serve website faster as possible as, so I have also started implementing this technique on my blog. So, I thought to share this useful tips with you step by step.

Step 1 : Adding WebP format in HTML Document

First, you need to convert your all images in WebP and along with your previous image format as the fall-back. There is some plugin like Optimus which can do this job automatically. But, I will show an another easy to do this manually.

Go to this website
Paste your Image Link and click on convert. Your WebP format images will be downloaded
Now edit the raw HTML code where your normal Image is appearing.

Let say, in beginning your Image HTML code was like this

<img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

You need to wrap above code with little more HTML markup.

<picture><source srcset="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" /><img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" /></picture>

Now, Your HTML document is ready to serve images in WebP format.
Step 2 : Configure server settings
Just one more step, you need to configure some Apache Webserver settings via .htacccess so browser and web server can treat it properly like all other images.

Your Web Hosting server may don’t know from which mime type this kind of format images they need to serve. So must add proper mime type. Also, it would be worth to setup expiry header for caching.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Kindly note: WordPress by default do not support uploading of WebP format image. So, must fix this issue by adding this code in your theme functions.php It would be helpful in case if you will upload your images directly from WordPress Dashboard > Media option.

function webp_upload_mimes( $existing_mimes ) {
 // add webp to the list of mime types
 $existing_mimes['webp'] = 'image/webp';

 // return the array back to the function with our added mime type
 return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Done.

If you need any help, please feel free to ask me in the comment section. It would be my pleasure to help you. In future, I will continue to share some more useful tips on optimizing WordPress. You may subscribe to my blog for more cool updates.

Further readings
If you are curious to learn more about WebP, please refer these links.