Brendan Tully0 Comments
June 29, 2022
In this post we’re going to show you a super simple way to use .webp images in Wordpress without needing a complicated technical solution or web developer.
Webp images are usually significantly smaller than the .JPG or .PNG they originated from AND by implementing .webp files you check the “Serve Images In Next-Gen File Formats” in Google PageSpeed Insights and Google LightHouse.
Contents
Most blog posts that cover image optimization and compare image optimization tools and plugins focus mostly on how well they compress images. In these articles you’re often going to stumble upon: “is tool X (WP Smush for example) better at compressing JPG and PNG files than tool Y (like Imagely or Ewww)?”.
In reality, that’s not the issue you should be addressing.
The fact is that most of these tools use the same compression algorithm, which means that the difference in their performance is going to be pretty insignificant – up to 5% at most, when it comes to file size.
And while discussing the benefits of using plugin X over plugin Y, 99% of these articles completely miss out on the fact that there are better, much smaller file size formats aka NextGen Image File Formats.
The most commonly known nextgen format is the .webp format. How is it better? Well, the beauty of the webp format is that it can actually make the original jpg or png image 25%, 50% and sometimes even up to 75% smaller…with NO reduction in image quality!
However, not all browsers can support this format, which means that it will need to either be injected by a CDN or a cloud service, or using the HTML <picture> tag.
Google PageSpeed Insights (PSI) has been recently updated and now probes for nextgen file format support – if you’ve recently run your website through Google Lighthouse or PSI, you’ll probably have been given the recommendation “serve images in nextgen format”.
And if you’re wondering how to do it – that’s precisely the purpose of this article – to show you how to implement .webp images in Wordpress.
So what exactly is webp?
Webp is an image format that was developed by Google. Its main strength is that it uses both lossy and lossless image compression in order to create images that are smaller and richer, but without significantly affecting the loading speed of your website.
According to Google, by using the webp image format, you can get lossless images that are 25% smaller in size when compared to the png image format, and 25%-34% smaller in size than jpeg images.
This format is highly convenient for people who have a visually-oriented website or a web-commerce (shopping) website that has a lot of images. Changing to the webp image format will significantly drop the size of your website, which will also result in much faster loading times for your customers and an overall better user experience of your enterprise.
If you want more info on this, check out Google’s page here.
We’ve been running our Wordpress Speed Optimization Service, WPSpeedFix.com since 2015 and have tried pretty much every tool on the market.
Shortpixel.com is the tool we use – it’s fast, it’s easy to use and it’s particularly easy to compress images in bulk (most tools suck at this) AND it’s supports .webp file formats integrated using the picture tag so we check the “serve nextgen images” box in PageSpeed Insights.
It also allows us to serve .webp images without the need for an ongoing, paid cloud service.
Other features we love:
Speed – Overall, it’s an easy-to-use tool that’s also pretty fast, which can make all the difference when you’re optimizing images in bulk (many image compression plugins are just awful at bulk optimization and will waste a lot of your time).
PNG to JPG conversion – a lot of sites use PNG images where actually JPG would be a much better and smaller option. What Shortpixel does is automatically convert PNG images to the JPG formats – without PNG transparency – which will also result in a smaller page size.
WEBP file format support – As we said, webp images are often 2-5x smaller than images in PNG or JPG format, while managing to maintain the same image quality.
Here is how we configure the settings on ShortPixel so that we can serve images in the next-gen format and get the most out of it.
ShortPixel is a paid tool – for 10000 images it’ll set you back 10 bucks so not exactly expensive. There’s a free version too that gives you 100 free images a month so if you want to try it first give that a go.
You will need an API key, but you can get this from ShortPixel; it’s very easy to get – you just need to sign up for free on their website. They have several one-time and monthly plans, but also a free plan where the first 100 images per month are free of charge, which means you can basically get this tool for free unless you’re a heavy user.
Click here to try ShortPixel and get 100 images optimized for free.
What we want to do is compress thumbnails, since it’s very likely they’re in use; we also want to backup the original images, just to be on the safe side, and we also want to make sure we keep the EXIF tags on them. The EXIF data or tags is valuable because it can sometimes contain information that might give us a little bit of an SEO boost (why not?).
Important note:
Please remember to use LOSSLESS compression and NOT lossy compression.
Lossless = the quality remains, the file size gets smaller
Lossy = smaller file size than lossless, but it does come with reduced image quality. We recommend that you don’t sacrifice the quality of your images over a negligible speed boost, because images are an important asset in e-commerce and sales.
In this section, we enable the PNG to JPG feature as often we can get a size reduction in PNG files that are not using transparency by converting them to JPG and convert to RGB format, since these are much smaller than CMYK files.
In some instances, our theme files will contain images that are uncompressed; that’s why we usually add that into the Additional Media Folders field and select theme folders.
When you finish with the bulk optimization, you can proceed to enable the .webp <picture> tag markup.
Once we’re done we want to test to make sure that the page is actually serving up the .webp files.
You’ll first need to clear any cache that you have enabled and then follow the steps in the video below to test and make sure it’s working.Click play on the video below and I’ll walk you through a simple process for checking your image file formats.
Important note here – some lazy load plugins are not <picture> tag aware and may break or conflict with this lazy load integration.
We use the free WP Rocket Lazy Load plugin which IS compatible with this implementation. If you’re not currently using Lazy Loading it’s worth checking out as it will speed up your pages even further AND will also check the “defer offscreen images” box in Pagespeed Insights too.
In *some* cases this Shortpixel method doesn’t work or if there some unusual customization or integrations in Wordpress it may not optimize all images.
In those instances and edge caches we use the paid, Pro version of Cloudflare. It’s $20 USD/month and offers .webp Next-Gen image implementation using a different method. It detects the device accessing the website and if the device or browser is webp compatible it’ll serve up a .webp file instead of .jpg/.png
WPSpeedFix.com – WP Speed Fix is our Wordpress Speed Optimization Service
SiteSpeedBot.com – this is a site speed testing tool we developed at WPSpeedFix because we weren’t happy with the other tools on the market. Give it a try and it’ll give you speed optimization recommendations and opportunities you haven’t come across before.
The BEST Wordpress Hosting – the best WP hosting providers we’ve found for speed, uptime and reliability. These are the hosts we use and recommend on a daily basis.
Wordpress Slow? – Here’s our simple how to guide on fixing slow Wordpress & speeding it up.
* Denotes Required Field