How To Use WebP Images On WordPress To Optimize Images
Making your website load as fast as possible is incredibly important. Every fraction of a second that you can cut from your site’s loading time will increase your conversions and make your readers happier.
I’ve talked before about some general tips for speeding up WordPress. I’ve even shared specific things like lazy loading images to make your site even faster.
Now, I have another tip that you probably haven’t heard of:
WebP images are a new image format developed by Google (just like Google’s Accelerated Mobile Pages which I discussed earlier).
Why are they better than other images? Because WebP images are about 25% smaller than comparable quality PNGs or JPEGs. Given that images make up most of the size of a web page, 25% is a pretty significant amount of savings.
In this post, I’ll show you how you can add WebP image support to WordPress to speed up your site by decreasing your images’ sizes. All without lowering the quality of your images.
How Do WebP Images In WordPress Work?
Here’s the only problem with WebP images…
They aren’t supported by every browser yet. While Firefox is working on adding WebP support and Safari is testing WebP, WebP images are only currently supported by Chrome, Opera, and other Chromium browsers.
That means you can’t just convert all of your images to WebP because neither Firefox nor Safari users would be able to see them. Thankfully though, with the right plugins, you can serve optimized WebP images to browsers that support them, and regular PNG or JPEG images to other browsers.
So to add WebP images to WordPress, you’ll need to do two things:
- Create WebP versions of your existing images.
- Only serve these WebP images to browsers which support WebP.
One way to implement this is through the Jetpack Photon service. Since late 2015, Jetpack’s Photon module can serve WebP versions of your images.
If you don’t want to use Jetpack, another method is to use two separate plugins – one to create WebP images, and one to serve the WebP images. After I show you how to configure Jetpack, I’ll show you how to do it this way using ShortPixel and KeyCDN’s Cache Enabler plugin.
How To Add WebP Images To WordPress with Jetpack’s Photon
To add WebP images with Jetpack, you’ll first need to make sure you have the Jetpack plugin installed and activated.
To actually use Jetpack, you need to link it to an existing WordPress.com account. If you already have an account, you need to log in. If you don’t have one, you’ll need to create a WordPress.com account first.
You should see a popup to guide you through linking your accounts after you activate the plugin:
Once your site is connected, you can pick the free plan unless you want some of the advanced features for other reasons:
Then, go to the Jetpack tab in your sidebar and scroll down until you see the “Performance” section.
Activate “Image Performance (Photon)” by clicking the toggle button:
And that’s it! Photon should now start serving optimized WebP images to compatible browsers.
This method seems pretty easy, right? Why doesn’t everyone just use Jetpack for WebP images? Well, some people don’t like the fact that Jetpack serves your images from the WordPress CDN.
Keep reading if you want a different method of serving WebP images on WordPress. It’s slightly more complicated, but it eliminates the need to rely on Jetpack.
How To Add WebP Images To WordPress with ShortPixel and Cache Enabler
For this method, you’ll first need to create WebP versions of your images using an image optimization plugin. I’ll use ShortPixel for this example because it has a free version that supports WebP. But you could also use KeyCDN’s premium Optimus Image Optimizer or any other plugin which supports WebP.
Start by installing and activating the ShortPixel plugin.
To optimize images, you’ll need to get a ShortPixel API key at the ShortPixel website:
Just enter your email and click the “GET API KEY” button:
Copy and paste the API key from the email ShortPixel sends you into the plugin’s settings page.
After you activate the plugin with the API key, you should see a settings screen:
You should configure the basic settings for image optimization.
Then, to activate WebP images, go to the “Advanced” tab and check the box next to “WebP versions”:
The free version of the plugin lets you create up to 150 WebP images per month, which should be enough for most bloggers.
Once everything is configured, go to “Media” → “Bulk ShortPixel” and click the button to optimize your images:
Serving WebP Images To Compatible Browsers
After running ShortPixel, your images should have WebP versions. BUT, WordPress won’t serve those versions to your visitors…yet.
To have WordPress actually use the WebP versions, you’ll need to install KeyCDN’s Cache Enabler plugin. Cache Enabler is a lightweight caching plugin that offers WebP support in addition to its normal caching features.
If you’re already using a different caching plugin which does not support WebP images, you should deactivate that plugin before activating Cache Enabler.
Once you have no other caching plugins active, get started by installing and activating the Cache Enabler plugin. Then go to “Settings” → “Cache Enabler” to configure the plugin:
In addition to configuring the basics of the plugin (I give some good defaults in the screenshot above), you need to check the box that enables WebP support.
Once that feature is enabled, Cache Enabler, in conjunction with ShortPixel, will serve WebP images to compatible browsers.
If you’re already using a caching plugin and don’t want to switch to Cache Enabler, I recommend you use EWWW Image Optimizer. It can serve WebP images in a way that works with existing caching plugins. But, it will cost you more money to do it this way. That’s why I don’t recommend EWWW Image Optimizer unless it’s absolutely necessary.
WebP Images Make Your Site Faster
There you go. Two different ways to add WebP images to WordPress…
WebP images are a great way to speed up your website. And once Firefox adds WebP support (and hopefully Safari, too!), you’ll be able to use WebP images for the majority of your visitors and really speed up your page load times.
Do you have any questions about WebP images? Feel free to ask in the comments.
And don’t forget to share this post!
Subscribe for more videos
Source: https://wpsutra.com/use-webp-images-wordpress-optimize-images/
No comments: