How WebP images can speed up your (WordPress) site

Share this Tweet about this on TwitterShare on Google+Share on FacebookShare on RedditDigg thisEmail this to someone

 

So you’ve been a brave admin of your website, minified and compacted the javascript and CSS, optimized all your images in order to make them as light as possible, took proper care to have properly sized images or thumbnails loaded everywhere. If you have a WordPress site, using some plugins like Autoptimize or ShortPixel Image Optimizer saved you a lot of hassle in doing that. Now that’s great but what can you do next?WebP Images Logo

Enter WebP – a modern image format created by Google, that provides superior lossless and lossy compression for images on the web.

According to Google, WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. 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.

Now, how can you leverage this new format to improve the performance of your website? Please note that you currently can’t just replace the JPGs, GIFs or PNGs with their WebP counterparts as not all the browsers support it yet. But if you have a WordPress website, you are lucky, there is a simple solution:

Starting with our new 4.1 version of the ShortPixel Image Optimization plugin, we’ve added the possibility to also create a WebP image alongside the existing images, free of charge, when optimizing your images with our service. Just enable the option in the Advanced tab of the ShortPixel settings, in your site’s admin and the WebP images will be created too when optimizing images.

SortPixel Advanced Settings tab contains the generate WebP images option

 

In order to be able to deliver the WebP images only for the browsers that support this format, you will also need 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 “Create an additional cached version for WebP image support” option.

cache-enabler-webp

That’s all, you can now enjoy a faster site that smartly uses WebP images!

UPDATE: you can also check out this post for more speed up insights.

Share this Tweet about this on TwitterShare on Google+Share on FacebookShare on RedditDigg thisEmail this to someone
  • http://www.wpoutcast.com Derek Price

    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.

  • http://www.wpoutcast.com Derek Price

    Wow, no reply to my question

    • ShortPixel Blog

      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.

      • http://www.wpoutcast.com Derek Price

        I’ll hold off. Thanks

  • Nathan

    Does it work with Super Cache?

  • mariolgr

    How to check that the webp photos were generated?

    • ShortPixel

      Hi,
      there are different ways but if you could share with me your site I could have a look and tell you how I checked.

      Thanks,
      Alex

      • mariolgr
        • ShortPixel

          Thanks for the link, I tried to access it but the site seems to be down.
          Could you please check and let me know when I should try again?

          • mariolgr

            My site is online… =p

          • ShortPixel

            Well, there seems to be a country based firewall restriction, I cannot access it from Romania, any chance to change the restrictions?

  • http://camp.pp.ua/ crimeafrend

    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?

    • ShortPixel

      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.

  • wildsman

    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

    • ShortPixel

      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.

  • Zachariah

    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?

    • ShortPixel

      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! 🙂

      • Zachariah

        Thanks! That is workable.

      • Zachariah

        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.

        • ShortPixel

          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%.