How Can WebP Images Speed Up Your WordPress Site

webp images speed wordpress site

You have done an excellent job in optimizing your WordPress website by minifying and compacting your JavaScript and CSS, as well a serving properly sized images and optimizing them to make them lightweight.

Using plugins such as Autoptimize or ShortPixel Image Optimizer have made this process more manageable. However, there is still more that can be done to improve the performance of your website.

Introducing WebP – a next-gen image format developed by Google that offers superior compression than traditional formats such as JPG, PNG, and GIF.

Table of Contents hide
Why WebP images instead of other formats?
Which browser supports WebP images?
How to create WebP images in WordPress?
How can I serve WebP images on WordPress?
Conclusion

Why WebP images instead of other formats?

Google’s study indicates that WebP images offer significant size reduction compared to traditional formats. Lossless WebP images are 26% smaller in size compared to PNGs. Lossy WebP images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. 

webp images logo

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG.

That’s a huge improvement. The reduced file size WebP images offer without having to reduce image quality leads to a faster page speed.

Which browser supports WebP images?

In order for WebP images to be displayed, the web browser used by the visitor must have the capability to support the format. Although browser support for WebP has increased recently, it is not yet a universally accepted format among all browsers.

At the time of writing, WebP images are supported by popular browsers such as Chrome, Firefox, Edge, Safari (full support for macOS 11 Big Sur and later), Safari for iOS, Android Browser, Opera, and so on.

webp compatible browsers

More than 94% of users operate a web browser that supports WebP images.

In the tutorial that follows, we will demonstrate a simple method for creating and delivering WebP images on WordPress, which can enhance the speed of your website and improve the user experience.

How to create WebP images in WordPress?

If you have a WordPress website, you are lucky, because there is a simple solution to create WebP images.

Using ShortPixel Image Optimizer, you can create WebP images alongside the existing formats when optimizing your images. After installing the plugin, navigate to Settings > ShortPixel > Advanced and enable the option.

create webp spio

WebP versions of images are only generated during the optimization process. To create WebP images after the images have been optimized with the plugin, the simplest solution would be to run the bulk optimization by navigating to Media > Bulk ShortPixel, and turning on the toggle to create WebP before following the process.

How can I serve WebP images on WordPress?

Using bult-in solutions of a plugin

You are able to serve WebP versions of the images on your WordPress website using a plugin such as ShortPixel Image Optimizer, which comes with two delivery methods:

Without altering the page code (via .htaccess)

This delivery method will add a new code block to the .htaccess file, which will ensure that the browser supports WebP images. If both the JPG/PNG/GIF and WebP versions of an image are available, the server will deliver the WebP version. This approach has the advantage of serving WebP image files directly without making any changes to the page code.

Altering the page code

Now you can use the WebP image format by simply checking the corresponding “Using the <PICTURE> tag syntax” option in the advanced settings tab of ShortPixel and all your <img> tags will be replaced with <picture> tags that include the WebP images, letting the browser chose the best version according to its capabilities.

The <picture> tag contains also a Generate WebP markup tag for fallback reasons, allowing the styles to remain in place. In some rare cases – when the styling of your images relies on positional queries ( :first, :nth-child selectors or “>” direct child reference ) you might encounter styling problems when activating this option and you will need to use the cache plugin solution below.

The second option can be implemented either by hooking onto WordPress’s own functions (a more limited, but a bit safer method) or by simply analyzing all the code in a page and doing the required changes before serving the page to the browser (this ensures more independence from any third-party tools that might not operate through the official WordPress channels and methods).

Cache plugin solution

Using Cache Enabler

You can also use a cache plugin that is WebP aware. We’ve tested the Cache Enabler plugin and it works out of the box with ShortPixel in delivering the WebP images. You just need to install and activate it, then go to Settings > Cache Enabler and check the option to “Create an additional cached version for WebP image support”.

cache enabler webp

Using LiteSpeed Cache

You can also use LiteSpeed Cache plugin to serve WebP. After creating your WebP files, you can serve them by following the instructions below.

  1. Add this constant in wp-config.php:
define('SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION', true);
  1. Activate the LiteSpeed’s Advanced settings:
Screenshot from 2019 08 29 18 18 58
  1. Activate the WebP delivery options:
Screenshot from 2019 08 29 18 20 08
  1. Do not activate LiteSpeed’s option to generate the WebP images files – ShortPixel Image Optimizer will generate them when optimizing the images (if you already have optimized images and didn’t generate WebP, you will need to run the bulk optimization again by navigating to Media > Bulk ShortPixel.).

Using WP Rocket

If you are using WP Rocket, you can simply create WebP files using ShortPixel Image Optimizer, as previously explained, and deliver them to compatible browsers using WP Rocket.

In order to achieve that, navigate to WP Rocket plugin settings > Add-ons, and turn on the WebP Compatibility feature.

Conclusion

Now that you know what WebP images are and how can they speed up the performance of your website, why don’t you give ShortPixel Image Optimizer a try and start creating and serving them?

You can sign up for a free account here that includes 100 credits per month, which you can spend on compressing your images, as well as generating WebP.

We’d love to hear your thoughts! Drop us a line below and let us know if you have any questions or recommendations about WebP images.

ShortPixel
ShortPixel
Articles: 41

43 Comments

  1. I have cometcache PRO plugin. Don’t think there is an option for this. I don’t want to enable this new setting till I know it’ll work with this caching plugin. Please let us know If it’s ok to enable this new format with the cometcache PRO plugin installed. I’d love to use this new feature.

    • Hi Derek,

      Sorry for my slow reply, somehow the alerts for comments on this post were not arriving to my inbox. As of now, Comet Cache does not support WebP, as far as I can see. So if the cache is not able to use the WebP images, it doesn’t make sense to activate the option in the ShortPixel Plugin.

      Regards,
      Simon.

  5. Why Cache Enabler page mentioned not compatible with ShortPixel? It stated: “Convert your images to WebP with Optimus.” And whether that means working ShortPixel possible only with the specified plugin cache Cache Enabler? What about those who have installed other plugins Super Cache, W3 Total Cache? You can read more will explain the situation using caching plugins together with ShortPixel (on the use of image expansion options WEBP). I am as hundreds of people are unclear about whether abandons conventional caching plugins in favor Cache Enabler, which would be able to use WEBP image on your site or are alternatives?

    • Hello,

      Cache Enabler has WebP support. This means it’s taking into consideration the .webp images found and generates different cache files with src’s containing the found .webp images. Then, the specific cached files are served to Chromium browsers, instead of the regular ones.
      Any other cache plugin that does that would do the job just fine. You need to look into the cache plugin specifications and see if it mentions that it has WebP support and then it should work. So far we investigated some other cache plugins as Comet Cache or the ones that you mention, but they currently do not offer this feature.
      Regarding the fact that Cache Enabler mentions Optimus – I would say that this is because it’s from the same author. 🙂 But we tested it and it works flawlessly with ShortPixel.

      Regards,
      The ShortPixel team.

  6. Just a quick question:
    How do I check if the WebP images are working? I’ve tried downloading them and they download as png/jpg.
    Our site is: grabamile.boardingarea.com

    • A quick way to do it is to use a WebP aware browser (e.g. Chrome) and check that the images loaded there are WebP instead of -let’s say- JPEGs.
      On your site I did a quick test and from what I see the results are mixed: some of the images are JPEGs and some are WebPs.

  7. If I already have uploaded images and they have been optimized by ShortPixel, what happens if I check the webp checkbox? Will re-optimizing the images create the webp versions?

    • Hi,
      the way to have ShortPixel generate the WebP files if you already optimized all the images is like this:

      1) change your current optimization setting to Lossy/Lossless to Lossless/Lossy. Make sure you select WebP to be created
      2) Re-run Bulk ShortPixel
      3) when done, change back the optimization setting
      4) Re-run Bulk ShortPixel

      I realize that this is a bit cumbersome but, currently, it is the only way to do it.

      If you need further assistance please contact us directly here:
      http://shortpixel.com/contact

      Thank you! 🙂

      • Just to clarify, if I change it to lossless and then back again to lossy, will that use up my credits for each conversion step? Basically, would require 3x as many credits: initial optimization, lossless optimization, then back to lossless optimization.

        • It depends. If you don’t have many pics (say hundreds) and the optimization can be done as lossless and then back as lossy within an hour then you only be charged once. Also please note that we do not charge anything if we cannot optimize an image by at least 5%.

  8. I’m using Cache Enabler and ShortPixel, I’ve turned on webp within ShortPixel and have verified that webp images have been created, and I’ve followed the steps in this blog. However, when browsing my website on an up-to-date version of Chrome, all images are loaded as either gif or png. Any ideas on what’s going wrong? I’ve tried manually clearing the cache, but no luck. Thank you.

  9. Hi, I used and even paid for Shortpixel to compress all my images with webp enabled. (I chose glossy). However using Cache enabler in the way you described, just a few images are webp . How can that ratio be increased? My site is malimo.co (Malimo)

    • Hi, sorry for the slow reply!

      As far as we tested it, it works only with Cache Enabler, being
      the only cache that has the WebP feature so far. This is the
      reason we developed the checkbox to replace tags with
      tags, in order to provide an alternative to those
      users that use a different cache plugin.

  12. I see WebP is only supported in certain browsers… Does the images automatically revert to the original format if WebP is not supported? Thanks

    • Yes Nathan, WebP is only served on the browsers that support it, on the rest the original (JPEG or PNG) version of the file will be served.

  13. I have enabled wp. how can I check it. simplylifetips.com. wp super cache is installed. Can I use it cache enabler or should I remove super cache?

  14. Hi, I noticed that this does not appear to provide the WebP format for ‘Featured Images’ in wordpress… Is this a normal behaviour?

    • Hello,

      If you are using ShortPixel Image Optimizer, then the answer is ‘yes’. You just need to create the WebP images with SPIO, without activating its WebP delivery option. Instead, deliver the WebPs through WP Rocket (through the WebP Compatibility add-on).

      If you need additional information, please send a message at help@shortpixel.com.

      Best regards,

  17. Hello,i use shortpixel to my wordpress,But why did MY purchase of 30,000 images run out in a few days when my website only has 2,000 images

  19. If a webp images was created, will I be able to delete the jpeg images using my server’s file manager? This is because I am running out of space and would not want to have duplicates of jpeg and webp at the same time.

    • Hello,

      You are technically able to do this, but then our WebP delivery solution will not work, as ShortPixel needs the original to be available as well in order to deliver it to browsers that don’t support WebP.

      So, please proceed only if you understand the consequences and you plan on using another plugin to deliver the WebP files.

      For further information, please contact us at help@shortpixel.com

      Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts