How to use WebP format Images in WordPress?

dailydose

#1

WebP is a next generation image format by Google that drastically reduce the size of images.

image

Which Browser supports?

Chrome, Firefox, Edge, etc. Please see Caniuse website for more details.


What is best way to use WebP?

I will discuss two methods, namely -

  1. Easy
  2. Advanced

Basic Requirement

  • Cache Enabler Plugin in easy method.
  • ShortPixel plugin to generate WebP format images in both method.

Easy Method

Step 1. Generate WebP

  1. Install and activate ShortPixel plugin
  2. Go to Settings > Advanced > Enable WebP

  1. Now, you need to do Bulk Image Optimization

Conclusion: This method will generate WebP for images.

Step 2. Serve WebP for supported browser with fallback to native version

  1. Deactivate your existing cache plugin, instead use Cache Enabler* Plugin
  2. Go to its settings
  3. Enable seperate cache for serving WebP feature in the supported browser.

Conclusion: This method will serve the WebP file format in the supported browser.


Advanced Method intend for tecnically efficient user

What if you don’t want to change your Cache plugin? Well, This is what you are looking for . . .

Prerequisite: You must know about HTTP header.

  1. Accept
  2. Content-Type

Assuming, you already have generated WebP images and it exist at same location. For example …

https://example.com/logo.png
https://example.com/logo.webp

If you are on Apache web server, you can use below .htaccess code to do dynamic serving.

<IfModule mod_setenvif.c>
  # Vary: Accept for all the requests to jpeg and png
  SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Source: Github


Situtation 1. If you are a Cloudflare user …

This information is only for Advanced method. Please ignore if you have followed Easy method.

Caution: If you are a Cloudflare CDN, this is not going to work normally. Because while serving HIT response Cloudflare cannot check your .htaccess rule, instead it will simply serve the HIT response whatever fetched in the first time based on any user-agent which can be either WebP supported or non-supported.

Well, this can be a serious problem … Suppose, someone requested image file in Chrome, now same Cloudflare may end up serving WebP in the non-supported IE. Not cool. How this could be better? If we manage to serve native version in the IE.

Workaround

  1. Bypass Cloudflare cache.

*example.com/wp-content/uploads/*


Situation 2. How to use WebP with BunnyCDN?

BunnyCDN user need to enable Dynamic WebP serving at Cache settings.

BunnyCDN%20WebP


Special offer for the limited time period

  • ShortPixel is offering 150% extra credits for the new user.

I hope this helps.


Conclusion

Serving WebP can reduce the image size and it will improve your site speed. I have tested both methods and works well.

If you consider trying, please do share your experience.


Possibly FAQs

Which method is best for me?

  • If you don’t use any CDN, try second method if possible. It would be easy.
  • Cache Enabler method will change image URL (file extension) while serving in the supported browser.
  • The advanced method does dynamic serving in the response body without changing actual image URL.

I use only Cloudflare CDN, I don’t want to use BunnyCDN. Which one should I try?

  • First, easy method would be better for the performance as you don’t need to bypass cache.

I am using external CDN

  • Prefer second method.

How to check if I am serving WebP/native correctly as per browser support or not?

  • Check with IE & Chrome Developer tool.
  • Please make sure to clear your browser cache your check properly in the incognito.

Any big site who uses WebP?

  • Search Engine YouTube uses for loading video Thumbnail. Indian e-commerce website, Flipkart also uses.

This is latin-greek for me. I couldn’t understand anything. Still want to use WebP, Any shortcut?

  • You may try JetPack photon (It may hurt image quality). Or, Cloudflare Pro plan. It’s a premium services. Or you may contact me, if you can’t do it yourself.

Still have any question? Please feel free to ask below.

Thanks & Regards,
Gulshan


#4

I am curious to know how to implement it properly on NGINX?


#5

In short, the size of the image is waaaay smaller but the quality stays the same. Just implemented this and there’s a little improvement in speed.


#6

Umm… just do a search on the internet.

Refer to Google’s FAQ page on WebP images.


#7

The major advantage is reduced size of image. Hence, in the browser images will appear quickly.


#8

Hey dear,

If you want to serve WebP in the NGINX, you need make some tweaks in Server Config file.

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^(/wp-content/.+)\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $1$webp_ext $uri =404;
}

This above NGINX rule was brought to you by ShortPixel competitor website “Optimus”, a premium plugin that is similar to ShortPixel for optimizing images + generating WebP.


#9

#10

There is also this plugin: WebP Express. It is created just for the purpose, its free, and it makes the whole process a breeze.

I should mention that I am the author of it…