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.

Learn about Browser SupportBenefitsUse WebP in WordPress via CloudflareImplement WebP with FallbackConvert to WebP

Browser Support

WebP is currently supported in Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and some Android browsers. According to Google Analytics reports you may find that more than 49% people uses WebP supported browsers. So, it’s high time to go with this technique.

Source: Caniuse

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 some blog. So, I thought to share this useful tips with you step by step.

Use WebP using Cloudflare CDN

If you’re a Cloudflare Pro user you can simply enable WebP in one-click from Speed Tab.

Serve WebP using BunnyCDN Optimizer

BunnyCDN offers Optimizer services which comes with On-the-fly WebP serving solution.

Serve WebP using JetPack Plugin

  • Simply install and activate JetPack plugin
  • Enable the Site Accelerator.

You may notice downgrade in image quality that can be fixed using below filter.

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 100;
    $args['strip'] = 'all';
    return $args;
}

Serve WebP using ShortPixel Plugin

ShortPixel plugin can help in bulk image optimization with WebP conversion and serving as per Browser support. The best part this plugin does processing on their server so it won’t slow down your site.

  • If you’re Apache web server user you can use .htaccess rewriting. That’s simple.
  • In case of NGINX you can use below rewriting rule with the help of hosting support
  • This plugin is supported with WP Rocket cache plugin as well.

First, add this block before the server directive:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Add this block inside the server directive:

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

Placement matters. So add it carefully.

Manual method

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.

  1. Go to this website image.online-convert.com/convert-to-webp
  2. Paste your Image Link and click on convert. Your WebP format images will be downloaded
  3. 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://www.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://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://www.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. You may get error “This file type is unfortunately not allowed for security reasons” while uploading .webp images.

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 look at comment section or join my forum. It would be my pleasure to help you.

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

Thanks.

Any question? Please ask at Gulshan Forum.

21 thoughts on “How to Serve WebP Format Images in WordPress”

  1. The problem with the suggested HTML implementation is that Chrome will make two requests, one for WEBP and another one for JPEG resulting in double requests and increasing the page load time.

    Reply
    • Hey dear,

      It doesn’t create two requests(as you are saying) instead it automatically serve only one type image format either WebP or JPEG according to HTTP accept type.

      I’d suggest please try one more time and look carefully at Network Timeline in the browser console. If you see there are double requests, please email me your HTML code and timeline screenshot also. I’d love to review it. I believe it should work fine for you too.

      Thanks & Regards,
      Gulshan

      Reply
      • I installed the code into the functions.php. And as you said it did allow me to upload in my WP theme. The problem is that the image doesn’t allow cropping so it won’t allow me to use it on the site.

        Reply
  2. I haven’t added anything except the last code from your post in function.php to support Webp format on all of future media uploads. Do I need to add any thing else ? or will it create any kind of issue for users whose browsers are yet unsupported to this format?
    anyway keep up the good work 😉

    Reply
    • That’s all. Now you can easily upload webp directly in your WordPress Dashboard. No extra things to do. Just feel free to use it with picture HTML tag. So, it will support for all browsers, without any issues. Thanks

      Reply
  3. Hi Gulshan,

    Even after putting the code snippet in the function.php file.

    I still have the same error message when I try to upload webp format. The message is “sorry this file type is not permitted for security reasons”.

    Can you help fix this?

    Thanks.

    Martin

    Reply
    • Hello Martin,

      At my end it’s working fine. For a demo, I have sent a quick video on your email. Please check and revert back if I can help with any thing else.

      Thanks

      Reply
  4. Hi..Just wondering if i need to edit each image tag or is there somewhere in my theme templates this could be done.
    Any guidence would be great.
    Thanks
    Mark

    Reply
  5. Hello Gulshan,

    Thanks for sharing this article.

    I did follow the steps mentioned in here in this format.

    But the image is not appearing on Firfox, and IE. Did I miss any thing in here.

    Please suggest.

    Reply
  6. Hi,

    I am not quite clear on where this needs to be inserted. I am looking to Optimise my header image to Webp. Is there a video or screenshot based write up on how I can include this?

    Would really appreciate the help

    Regards
    Shwetha

    Reply
  7. It works great in Chrome and Firefox on the PC/Laptop. BUT, the webp images are not displayed on iPhone (Chrome and Safari)

    Reply
    • Safari is not supporting webP. Chrome on iOS is based on Safari, too. So webP won‘t work on iOS at all and you have to serve a fallback image.

      Reply

Leave a Comment