How to Use WebP Images in WordPress

Are you experiencing traffic drops due to the slow speed of your WordPress website? If yes, then this post will be your lifesaver.

As we know, image sizes play a vital role in WordPress website speed. Because images make up almost half of the file size of a webpage, even minor changes can be significantly impactful. Hence, if you want to improve your WordPress site speed, you must find a way to reduce the image file size without compromising the quality.

WebP is an upgraded image format that shrinks photos without sacrificing quality. You can reduce the size of your images by 25-34%, keeping the quality in WebP.

Let’s jump straight into the article.

What Is WebP?

WebP is a modern image file format developed by the tech giant Google for displaying images on the web. It was first introduced in 2010 by Google. The primary purpose of WebP image file format is to reduce the image file size without diminishing the image quality.

Here is what Google suggests.

PageSpeed Insights shows how beneficial the WebP format is for your website. (Source: PageSpeed Insights)

According to Google, WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs. WebP is already powering many of the sites of companies like YouTube and eBay.

Pros

1. WebP is a web-focused image format.
2. It is a superior image format compared to PNG and JPEG.
3. Speed up website loading time.
4. Reduce the image file size, but the quality stays the same.
5. Support transparent images.

Cons

1. Not all browsers support WebP.
2. Exporting interface is not good.

Stats on WebP

Based on Google’s WebP compression study, we found:

1. WebP images are 25-34% smaller than the same JPEG image.
2. WebP images are 26% smaller than the same PNG image.

We had run a test on the image below, which had a file size of 2.05MB in PNG format. But it was just 201kb in WebP format. We used a simple Python script to convert the PNG file into that of WebP.

We must keep in mind that the WebP format is not a one-on-one match like any other format. PNG format cannot be equal to WebP format in terms of quality; there must be a sharp drop in WebP format.

Lossless Compression for WebP

Lossless compression never overcomes an image value as lossy does. Lossless compression is a data compression algorithm that reconstructs your files in a manner without losing quality. In other words, it reduces file size without losing any bits of information.

That is why WebP lossless compression has come into existence.

For instance, you can compare the difference among PNG, WebP-lossless & WebP-lossy (with alpha) in Google’s WebP galleries.

Browsers That Support WebP

There are a bunch of pros of WebP. But one drawback that pulls you back from implanting WebP on your website is the browser support issue. A web browser must support WebP images. Unfortunately, even though browser support has increased significantly, WebP compatibility is still not universal. But the good news is, almost all popular browsers support WebP. According to caniuse.com, browsers like Safari (partially), Internet Explorer & KaiOS browsers do not support WebP format.

However, WebP format is available for 95.37% of internet users who are using any browser that supports the next-gen format.

Here is the list of browsers that support WebP format.

• Edge
• Firefox
• Chrome
• Opera
• Safari on iOS
• Opera Mini
• Android Browser
• Opera Mobile
• Chrome for Android
• Firefox for Android
• UC Browser for Android
• Samsung Internet
• QQ Browser
• Baidu Browser

Some software does not support WebP (such as Photoshop). In this case, users can use WebShop to save WebP images directly from Adobe Photoshop.

If you are using Shopify or Wix, there will be no problem converting images into WebP format as both site builders convert images automatically.

WordPress does not support next-gen format directly until your host supports it. To use WebP on WordPress, you will need a WordPress plugin. However, in the case of Drupal, you can use it with WebP modules that add WebP support. Magento is just another example.

Why Should I Use WebP Format?

WebP is a Google-created image format that is still in its development. It was created as a more aggressive and optimized image compression technique than JPG and PNG. The concept is that it lowers file sizes even further while maintaining image quality.

One much use it since it will save bandwidth and help your website run quicker. It will not only please your site visitors, but it will also satisfy Google. As we all know, Google favors websites that perform well and load quickly over those that do not. Although not all browsers support WebP files now, it is still a good idea to utilize these. WebP images are supported by all current versions of Chrome, Opera, Firefox, and Edge. The Safari browser does not support it as yet.

How to Convert Any Image Format into WebP Using Python Script?

If you want to convert an image into WebP format without using any online tool, you can watch the following video.

Not every website builder and Content Management System (CMS) supports the WebP format. Unfortunately, WordPress doesn’t support WebP files by default. This is why we need a third-party WordPress plugin to implant WebP in WordPress. As promised, I will give you four methods to use WebP images in order to develop your WordPress website.

EWWW Image Optimizer

To support WebP images in WordPress, the EWWW Image Optimizer is one of the most suitable choices.

1. First, install the EWWW Image Optimizer plugin and activate the plugin.
2. After activation, click settings > EWWW Image Optimizer to configure the plugin. A setup wizard will appear to greet you. Click “I know what I am doing” to exit the wizard.
   
3. You’ll find dozens of new plugin options on the next screen when you scroll down. Under the ‘WebP Conversion‘, check ‘Convert your images to the next generation for supported browsers‘. After checking the box, click on the ‘Save Changes‘ button to save your changes.
4. After scrolling, you will see some rewrite rules in the WebP conversion section. Now click on “Insert Rewrite Rules” to insert these rewrite rules.
5. The red “PNG” image will turn green for the successful insertion rules.

In case of unsuccessful insertion, copy the rewrite rules and paste them into your .htaccess file manually. Return to the plugin’s Settings page and click the Save Changes button once again when you’re finished. If the display picture becomes green, you are all set up.

Convert Your Old Images to WebP Version

You can quickly convert your previously uploaded image files to WebP images using EWWW Image Optimizer.

1. Switch to the list view from the Media > Library page.
   
2. After that, go to the Screen Options button and set the “Number of items per page” to 999. If you have more than 1000 photos, they will display on the following page. You’ll be able to select a huge number of photos for bulk optimization. Then, at the top, click the Select All option to select all images.
3. Following that, click Bulk Optimize from the Bulk Actions drop-down box and press the Apply button. If some of your pictures have already been optimized, you can select “WebP Only” and tick in the skip box. This allows skipping images that have already been compressed.
4. Then, to proceed, click the ‘Scan for Unoptimized Images‘ option. The plugin will then display the number of pictures it discovered, and you may proceed by clicking the Optimize button. Your photos will now be optimized, and the EWWW optimizer will create WebP versions of them.

ShortPixel Image Optimizer

ShortPixel is a powerful image optimization tool for WordPress that is easy to use, stable and comprehensive. This tool automatically resizes and compresses images for your WordPress website. You can upload and use WebP images through ShortPixel. The best part is, it can automatically convert JPEG, PNG, or any images to WebP format.

ShortPixel is a freemium service. It offers a limited free plan that allows you to optimize 100 photos each month. After 100 photos, you have to pay $4.99/month for up to 5,000 images per credit. Another option is to pay $9.99 one-time for a bundle of 10,000 credits after that.

To use ShortPixel on your WordPress site,

1. First, you need to install the plugin from wordpress.org. While installing, you will get an API key. Add this API key to your website.
2. Then go to the settings > advanced and check the box “Also create WebP versions of the images for free” under the “WebP Images” section.
3. Also, check the box “Deliver the WebP versions” under the same section. Note that this option will appear after completing step 2.
   
4. Select the radio button named “Using the <PICTURE> tag syntax“. Note that this option will appear after completing step 3.
5. Save the changes.

That’s it. You are all set up!

ShortPixel is compatible with all shared, cloud, VPS, and dedicated server. So, you need not be tensed about your hosting type.

Smush – Lazy Load Images, Optimize & Compress

Smush is an award-winning image optimization plugin for WordPress. It is a very popular and 100% free tool for compressing high-resolution images and speed up WordPress websites developed by WPMU Dev. Over 1 million users trust Smush for their website’s image optimization. You can automatically compress your images with this plugin. You can also convert your JPEG and PNG images to WebP format using Smush image optimizer.

But how do you convert images into WebP? You can do it by two methods. The first one is using CDN which is a free option, and the paid one is without CDN. First, we will see the free option.

1. Install and activate Smush. To do this, hover on “plugins” from your WordPress dashboard and click “Add new“. Then search for “Smash“, install and activate it.
2. Enable CDN from the Smush menu. To do this, select CDN from the Smush menu > Get started.
3. Now navigate the “WebP Conversion” option and enable it.
4. For bulk conversion, from the top, there is an option called “Bulk Smush“. Now click on the “Bulk Smush Now” button for bulk conversion.

If you purchase a subscription to Smush, you can convert images into the WebP version without using CDN.

1. At first, you need to select your server type. Generally, Smush automatically detects the server.
2. For the Apache server, try the automatic method initially. From the “Enable Conversion” section, select the “Automatic” tab and click the “Apply Rules” button. It will automatically configure for conversion. If the automatic method doesn’t work, go to the “Manual” tab, copy the code and paste it to your .htaccess file.
   
   
3. For the NGINX server, you need to add the required rules to your .htaccess file manually.
   

Imagify

Imagify is a popular and lightweight image optimization plugin developed by WP Media. It is a powerful tool for compressing and converting WebP images for WordPress. Using Imagify, you can automatically upload and convert all your images, including thumbnails, onto your WordPress website. Moreover, WooCommerce and NextGen Gallery support Imagify. Your users can easily view these pictures using a supported web browser.

You can choose an option from the three compression options provided by Imagify. These are Normal, Aggressive, and Ultra. In Normal compression mood, a lossless compression algorithm will work. This algorithm compresses the images, keeping the quality the same. An aggressive algorithm works with lossy compression. Images will be compressed and the image quality decreases a little bit. In ultra-compression, image size reduces a lot as well as the quality of the images. To use Imagify on your WordPress site,

Step 1 – First, install and activate the Imagify plugin from your WordPress dashboard. To install the plugin, go to the plugin from your WordPress dashboard.

Step 2 – After installation and activation, go to the settings > Imagify from the left side of your WordPress dashboard.

Step 3 – After clicking Imagify from the Settings menu, a configuration page will appear. Now you need to create an API to use the Imagify plugin. To do this, click on the “Create a Free API” button, account creation page will appear. Now put your email address in the box. An API key will be sent to your email. Now, go to your email and copy the API key, then paste it in the “Enter Your API Key Below” box.

Step 4 – After adding the API key, click the “Save changes” button to save the key.

Step 5 – After adding the API key, you can access and edit the configuration page. You can choose the image optimization level from the general settings. If you want to optimize images automatically, check “Auto-optimize images on upload” and “Backup original images“.

Step 6 – In the Optimization section, you can set up WebP images for WordPress. Scroll down a bit and you will get the option.

Step 7 – Now click “Save Changes“.

Step 8 – If you want to convert the already uploaded images into WebP format, click the “Save and Go to Bulk Optimizer” button for bulk conversion.

How to Use WebP with WordPress Without Plugin?

If you are a newbie and want to add use WebP images in WordPress without any plugin then follow the video.

Case Study

We have done a simple test to check how effective the WebP format is where we have added 24 images (Jpeg Format) on a webpage and 24 same images (WebP format) on another webpage.

Things we considered

1. 1. We have used no plugin
   2. No lossy image
   3. There is nothing but images
   4. No image optimization or compression
   5. Simply convert Jpeg images into those of WebP using Python script
   6. We compared both web pages using https://web.dev/measure/

And we have found such a result and is shown below. You can easily compare how powerful WebP is and how smooth it makes your website.

Wrap Up

WebP is an outstanding image format for the web. It is very lightweight, and the quality is up to the mark. To use WebP images on your WordPress website, you have many options.

However, these four plugins are the best options. This is our personal experience with all the above plugins and we are not affiliated with any of them.

You can choose one of them and use it for your image optimization tool.

• Do you need the best wordpress hosting? Check out for our recommendations by clicking here.