Have you been using Google Pagespeed insights or web.dev to analyse areas of your site which needs improving you will notice in recent months that Google has been recommending to server images in next-gen format?
What are NextGen images I will cover later, but let’s cover how to enable this on your WordPress website? Website speed is an important factor in rankings, this is just one of a series of articles explaining how to make your website quicker.
Download a plugin and go?
I wish it was that simple, actually it’s not much more complicated and I will go through step by step instructions on how to get your WordPress website to use next-gen images.
The good news is, it can be done for FREE and requires no coding knowledge.
Another good point to make here – you don’t need to upload any images, existing images can be converted with this method.
So let’s make your website load faster and improve your score on the page speed tools.
This is MY personal strategy for achieving this, there are other ways, most of which I have tested but this one is the easiest, quickest and requires no coding knowledge.
What you will need:
How long will it take?
- 15 – 30 minutes
This is the time you need to spend on it, there might be a few changes going off in the background depending on the number of images you have.
There is multiple version of next-gen images, but this one will be about WebP – it’s backed by Google so, in my opinion, the one which will be around the longest.
Steps needed to convert existing images to WebP
1. ADD PLUGIN
I did say this was simple, you need to add the WebP Express Plugin. The plugin basically adds a very simple line of code to your WordPress site.
I won’t tell you how to add a plugin if you are unsure of that – then do a Google search.
Time Takes: 2 minutes
At this point we haven’t edited any images, we have simply added a line of code which tells supported browsers that they can display and download next-gen images if available.
2. Server WebP Images without having to re-upload your existing images
I did an ecommerce site about 4 weeks ago which had about 6,000 products and most of the images have multiple images – I can tell you I was glad about this step.
I also think it’s one of the key reasons why webmasters are reluctant to change – they believe they have to download each image manually and reupload – with some methods this is the case, but not this one.
Download and Install ShortPixel Plugin – you can use the free version and I usually do, however for the ecommerce site above, I paid $19 as a one of payment which also optimises all images on scale, I don’t know about you but this manually would have taken hours to just convert don’t mind to reupload them all in the right place and $19 was basically nothing.
You only really need to pay for sites with a large number of images, their free tier covers enough images and you DON’T need to have a paid account to do this.
Once you’ve created an account and you’ve logged in, all you will need to get is the API key from your account menu.
3. Time fo edit the settings and begin serving images in a next-gen format
Once you have an account of ShortPixel – it’s free, you need to follow the below
Once you have an account and have installed both plugins listed above, we can configure ShortPixel to begin serving all visitors in supported browsers next-gen images — specifically, WebP. Next, simply follow these steps inside of the WordPress admin:
- Go to Settings > ShortPixel
- Select the “General” tab
- Enter your account’s API key in the “API Key” field
- Scroll to the bottom and click, “Save Changes”
- Now scroll back to the top and click on the “Advanced” tab
- Scroll down to the WebP images section and select, “Also create WebP versions of the images, for free.”
- Now, select “Deliver the WebP versions of the images in the front-end”
- Next, you will have three different options…
- Unless ShortPixel shows you that you can use “Without altering page code (via .htatccess)”, I recommend using the “Only via WordPress hooks” option.
- The one which has been the most reliable has been “Only via WordPress hooks”
- Scroll to the bottom and select, “Save and Go To Bulk Process”
That’s about it.
The next screen is the processing screen which will compress images – leave this window open. If you have a free account it will run until you have used your free credits.
This is where I would recommend a paid account and really compress your images, but that’s for another article.
Just leave the window open until finished – the more images you have the longer the process takes.
You are now serving next-gen images
Go back to either Web.dev or pagespeed insights and re analyse your site and the error should have gone.
If not check you have completed all the steps above.
FAQs about WebPs
What is WebP?
WebP is one of several new image formats which offers often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
What are some of the other Nex-gen image formats
JPEG 2000, JPEG XR, and WebP are the main nex-gen image formats.
Is WebP available for all browsers?
No, not all browsers currently support WebP images, but if the browser doesn’t or its an old version of a browser which does – it will just load the image in the original format (jpeg, png etc).
Does Edge / Internet Explorer Support WebP?
Nope these two browsers are yet to support WebP.
Does Safari Support WebP?
The latest version of safari doesn’t support WebP but that might change in the coming releases as more and more sites start making changes to their sites.
Does Chrome Support WebP?
Yes, WebP is heavily backed and supported by Google so its not a surprise that Chrome supports this, this also applies to browsers like Chromium.
Does Firefox Support WebP?
Yes Firefox does support WebP.
Is WebP better than JPEG?
It loads quicker on a site if a browser supports it, the files are usually smaller in size
Is WebP better than JPEG?
Is WebP better than PNG?
Can I use WebP?
Yes, so long as you can control the site. So if your site is built on wordpress.com or Wix etc you might not be able to as it requires changes as you have seen above.
If you want so more reading on WebP and nex-gen image formats, this google resource is a great starter.
great article – but if its so easy why isn’t your own site implementing these steps?
Hi Sam,
That is a great question, the main reason is I am about to turn the above into a step by step video showing how to do it.
Also this site shouldn’t be taken as best practice – I often break parts of it, test new plugins and strategies etc. It’s my main testing site.
Thanks
Andy