WordPress Serve images in next-gen formats
WordPress serve images in next-gen formats. This post explains what this issue is, why it’s a problem, and what you need to do to address it. Compared to a lot of actions you’ll have to take when optimising your WordPress, this is one of the easier to address.
What you’ll see as the problem.
When running your site through page analysis tools such as https://pagespeed.web.dev/ or https://gtmetrix.com/ you’ll see a “Serve images in next-gen formats” message, that looks like this:
What this means is that your sites images are in a format that’s not as good as they could be.
Whilst jpeg files were, for a while, considered the standard format for web images, this has now been improved upon, and there are better, smaller image formats that still have a decent level of quality.
Why is this a problem.
Does this really matter?
As google take performance in to account when determining your sites rank, it does matter if your concerned where your site ranks in google’s search results.
It’s not a huge problem, but your site isn’t as good as it could be, specifically when it comes to loading images.
How to fix Serve images in next-gen formats.
There’s a hard way to fix this, and an easy way to fix this.
The simplest thing to do is to avoid this issue, by using webp or AVIF images on your site from the offset. That’s all well and good, but what if your site was made a while ago using jpeg images? That’s effectively a “water under the bridge” situation but there are steps you can take to address this, even if your site was made some time ago.
The hard way would be to download all your site’s image files, then convert them from jpeg to webp or AVIF format, then work though all the pages on your site replacing all the old jpeg images with the new webp or AVIF format images.
But who in their right mind would want to do that?
Luckily, there’s a plugin that will magically sort this out for you. I’ve used the webp converter for media plugin to do this.
You’d do the usual to install this plugin:
Plugins > Add new > Search for:
webp converter for media
Install, activate:
Then hover over “settings” and then click “Converter for media”:
Initially, just under the “Conversion of new images” text, click on “Save changes” so that all new images you upload will be converted to webp format automatically:
After saving this change, still on the same page, scroll down and then click on “Start bulk optimisation”:
And then you just wait for it to complete.
What this plugin does is creates webp images out of all your current images, puts them in a folder:
document_root/wp-content/uploads-webpc
Then creates an .htaccess file in:
document_root/wp-content/.htaccess
And in this file it adds a rewrite rule, so that when your site code generates page output, any .jpg images requested, get the request rewritten to the directory where it’s put the webp images, rewriting the end of the file request from jpg to webp when doing so.
So it’s basically a fire and forget, all done for you type solution.
Other plugins.
There are other plugins that do a similar thing to converter for media, but some of these do have some implications associated with them.
Smush does a similar thing to Converter for Media, but it does it on the fly, automatically when you upload your images. This can have a performance hit (high resource usage) for your site. Although there’s a performance hit with Converter for Media the difference is that with Smush there’s a performance on each image upload, where as Converter for Media’s performance hit takes place when you carry out the bathc conversion of images (i.e. in one go when you click the “start bulk conversion” button).
Shortpixel can be set up to serve images in next-gen format using a CDN. Operating in this manner has an additional DNS overhead as your images are then loaded from an external source. Shortpixel also appears to recrawl sites looking for new images to serve, but it can do this at an aggressive rate, which can cause performance issues with your site (as it’s busy serving requests from Shortpixel).
You can avoid all of this by making webp images BEFORE uploading. If you do this from the offset, you don’t need to use any plugins, as you’re already serving images in next-gen formats.
If you’ve made a lot of content, then think “perhaps I should have used next-gen images in the first place, but I didn’t” then the Converter for Media allows you to batch convert what you’ve done so far, then you can upload webp images thereafter.
In Conclusion.
- It’s best to upload webp images from the offset, then you don’t even have this issue to address.
- Various plugins can be used to serve existing non next-gen format images in next-gen formats, but there’s implicaitons to the use of some of these.
- Bath converting existing non next-gen format images, then uploading next-gen format images (such as webp) thereafter is a sensible course of action to take.