Convert JPEG & PNG images to WebP format in WordPress

Google has developed a new image format, that has to serve as a successor to our current most used standards such as JPEG and PNG. The new NextGen image format is called WebP and makes image sizes considerably smaller with little or no loss of quality. Good news for your WordPress website’s speed performance!

---

On average, WebP makes images 39% smaller in size. The compression with an animated GIF is even bigger: 64%. The reduction percentage for PNG lies at -45%. These numbers are quite impressive, especially given the fact that there little or no quality loss. The new extension is not yet supported by all browsers. Continue reading to find out more.

Multi browser support

Currently there are three browser that support the WebP image format: Chrome, Opera and the latest version of Edge. The fact that the extension is supported by Chrome makes sense as both are developed by Google. You can read more on the developers page of Google about WebP and its origin. If you now use an older version of Edge, you can still profit of WebP with the aid of this plug-in.

What happens to a WebP image in a an incompatible browser?

If a browser does not support the extension, it simply is referred to the ‘old’ WordPress website; meaning that browsers such as Firefox simply show your website with the PNG and JPEG image formats. Every visitor therefore still has the possibility to view the website. By offering the WebP version you ensure that a part of the visitors can enjoy a faster website. There is another important reason to set up WebP on your WordPress website and this has everything to do with the new web.dev tool from Google.

New Google tool: web.dev

Google has started to develop a new analysis tool, named web.dev. It is a reporting tool that makes an analysis of your website. Based on this analysis, developers can see to what extent your site meets the technical requirements for a speedy user-friendly website. You can gather more inside information at web.dev. The cool fact here is that WebP is considered as one of the most important developments within the modernization of the web according to web.dev. Sound’s good, right? So let’s get on with on.

Activate WebP with the following 3 steps

1. Convert JPEG and PNG files to the webP extension
2. Link the WebP images to all of your pages
3. Test whether your WordPress site uses the new NextGen WebP format

Step 1: Convert JPEG and PNG files to the webP extension

Converting your images with the ShortPixel plugin

Go to the second tab in the settings menu and enable the third checkbox (WebP images).

In the same tab you find another interesting option: Optimize media on upload. 

Don’t forget the Save the setting after you’re done!

Image conversion with Optimus HQ

Install and activate the Optimus HQ plugin. Afterwards go to Settings > Optimus and install the plugin like this:

Using the EWWW Image Optimizer plugin

Install and activate the EWWW plug-in and go to Settings > EWWWW Image Optimizer. Then go to the WebP tab and mark the JPG/PNG to WebP checkbox.

Step 2: Link the WebP images to all of your pages

Having the first step behind us, the images are now present in the new format. Now we need to make sure all pages and posts refer to the .webp file. A plugin that truly comes in handy here is the Cache Enabler.

Cache Enabler makes static pages of the existing pages that will contain a reference to the .webp files. You can activate this cached version of the pages by selecting the option “Create an additional version” at Cache Behavior. See the image below for a visual instruction.

Go to Settings > Cache Enabler and select the option described above.

ShortPixel, Optimus HQ en EWWW Image optimizer werken allemaal all work in combination with the Cache Enabler plug-in. So you need both plugins in order for your .webp files to be up and running.

Converteren with Jetpack is also an option, but slightly different…

By using JetPack, you will face a slightly different process. First you have to install and activate Jetpack with an API key like you did with ShortPixel. When Jetpack is activated, go to the Dashboard and activate the Photon module in the Performance & Security section. A query string will then compress the images through the server.

Offering the WebP images via a WordPress CDN server brings an extra load for the DNS server.

Step 3: Test if your WordPress site actually uses the WebP images

When you have completed the steps above, you’re ready to go. Last step is running a test to see if the operation runs smoothly. This can easily be checked by selecting an image on your website and trying to save it on your own desktop with the Save As function.

Wanneer je de bovenstaande stappen hebt doorlopen dan heb je WordPress klaargemaakt voor gebruik. Als laatste zullen de werking ervan nog even moeten testen. Dit kun je het meest eenvoudig doen door een afbeelding op je website te selecteren en deze proberen op te slaan op je eigen bureaublad met afbeelding opslaan als

Als de activering van webP gelukt is zie je bij het opslaan dat je computer de afbeelding als webP bestand wilt opslaan!

Finally: The performance difference, measured by web.dev

Finally, we take a look at the before-and-after picture; the difference in the speed of your website before and after the implementation of WebP.
In this particular case, we see an increase of 15% in the score, a considerable difference. Congratulations, you have now made your WordPress site a lot faster for a large group of users, solely with a few easy steps.