If you want to serve WebP Images in WordPress with Cloudflare Free Plan, you are at the right destination. In recent days, all the page speed testing tools suggest serving WebP images on your website to boost loading speed. Here in this post, I have shared how to serve WebP Images in WordPress with Cloudflare Free Plan.
Benefits of using WebP images on website
WebP is an image format that is created for the web. WebP images are smaller in size without reducing the quality of the original image. Instead of serving jpeg/png images to the web visitors, if you serve WebP images it will reduce the page size. Hence it will load faster. As of 2023, all the latest web browsers are fully compatible with WebP image rendering by default.
Does Cloudflare support WebP images?
In the Cloudflare paid plan, the Polish tool of Cloudflare automatically converts images to WebP before serving to users. But in the free plan directly we can’t have this feature. Apache/nginx rewriting also does not work with Cloudflare free plan. But with the help of some tricks, we can do the same for free.
How to convert WebP Images in WordPress
Before serving WebP images to the users, we need to convert them to WebP from png or jpg format. For that, there are multiple plugins available for free. Some of them do the conversion on the remote cloud. On cloud conversion, there are some limits on the free plan. So we will use shelf hosting conversion, which will be limitless & free. You have to install the following plugin on your WordPress website.
After installing you may see some warning to activate the “exec” function of PHP. Please go to the hosting panel & activate this function by removing it from the disallowed extension/function.
After that go to the EWWW Image Optimizer settings page from the Setting button in the side panel of WordPress & enable Ludicrous Mode.
After that select checkboxes of the following options inside the basic & advanced tab of the page & click save changes.
- Remove Metadata
- Lazy Load
- WebP Conversion
- JS WebP Rewriting
- Force WebP
- Include Media Folders
- Include Originals
From now onwards all future image uploads will automatically create a WebP version of the main image & both images will be in the same folder with the extension of “.webp“.
For example, if your uploaded image name was “pic.png“, it will create another image with the name “pic.png.webp“.
How to convert old images to WebP
From the media option click Bulk Optimize to convert old images to WebP on your WordPress website.
How WebP images will load in Browser
In the JS Rewriting method, it will add an inline javascript to detect browser compatibility. On successful detection, it will just replace the jpg/png file link by adding webp file link & starts loading the images via lazyload method.
Will Cloudflare Cache WebP images?
Yes, of course. Cloudflare will cache your WebP images in the edge servers & serve images from CDN in the free plan. Just auto conversion is not included in Cloudflare free plan. That’s why we used the free plugin of WordPress to convert the images to Webp.
Here in the above image, you can see the HTTP response header “cf-cache-status” as HIT. That means our WebP images are being served from Cloudflare CDN.
Will WebP JS Rewriting method work with WordPress Cache plugins?
Yes, it will work. It will be an inline javascript code that will be added to the header of every page. But if anyone disabled javascript in their browser, this will serve jpg/png images instead of WebP.
To support non-javascript-enabled browsers, enable the “Picture WebP Rewriting” option in the settings of the EWWW Image Optimizer settings page.
Video Tutorial
Find out the video to watch the WebP Images in WordPress with Cloudflare Free Plan.
In this way, you can serve WebP Images in WordPress with Cloudflare Free Plan.
