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.

Most Browsers support WebP

  • According to Caniuse data, WebP is currently supported in 91% browsers include Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and Android browsers.
  • You can still serve JPEG/PNG as fallback for unsupported browser.

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, Images will load faster.
  • Serving Quality Images in few bytes, dramatically save bandwidth.
  • Keep your website updated with latest trend. Don’t loss conversation due to bull-cart slow loading issue.
  • WebP is recommended by Google Developers. Helps you in passing “serve images in next-gen format” recommendation of Google PageSpeed Insight.

This is how you can serve WebP for a WordPress site.

Use WebP Express Plugin in NGINX

  • Install & Activate WebP Express, free plugin. A huge thanks to Dev.
  • Operation mode: Varied image responses.
  • Scope: Upload only.
  • Run Bulk Convert
  • For Apache users, no config requires as .htaccess does all magics.
  • NGINX server user need to modify configuration file with root access.

For better organization of code, I would recommend placing first inside /etc/nginx/ directory with name webp.conf then include in the main server block.

Enter below command

cd /etc/nginx/ && nano webp.conf
  • Paste below code using right click inside nano editor in SSH Terminal.
# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)
  • Press CTRL+O and Enter key to save.

Now visit the main server block.

cd /etc/nginx/sites-available && ls

Highly recommend: Learn To instal WordPress at NGINX (In simple three steps)

Edit your configuration file, and put include webp.conf; as shown below.

# General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .abc.com;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

Reload or restart the NGINX.

service nginx reload

Things to note

  • If you use BunnyCDN, must enable Vary Cache.
  • Cloudflare doesn’t support Vary Cache. Try below alternative approach.

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. It’s one-click solution for $9.5/mo additional cost.

Serve WebP using JetPack Plugin

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

You may notice a downgrade in image quality that can be fixed using the 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 in NGINX 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

This section is for information purposes only.

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 us say, in beginning, your Image HTML code was like this

<img src="https://abc.com/wp-content/uploads/2016/09/webplogo.png" alt="abc" width="186" height="66" />

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

<picture>
	<source srcset="https://abc.com/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://abc.com/wp-content/uploads/2016/09/webplogo.png" alt="abc" 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 the 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 write to me at prospeedguy@gmail.com. It would be my pleasure to help you.

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

Thanks.

Latest Guides