WPLounge

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.

WPLOUNGE RECOMMENDS..
Divi theme & Divi Builder
Elegant Themes is selling more than
85 premium themes (including Divi!) for only $89!
Check Elegant Themes »

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

  • ShortPixel
  • Optimus (OptimusHQ)
  • EWWW Image Optimizer
  • Jetpack

We tested several plugins: ShortPixel, Optimus HQ and EWWW Image Optimizer, which are quite similar in operation and options.
All three convert the old JPEG and PNG files to the WebP format with the simple click of a button. In the following example we use ShortPixel to illustrate the initial installation.

Installing the ShortPixel plugin

  1. Install the ShortPixel plug-in through Plugins > Add new
  2. Then go to Settings > ShortPixel and request an API key in the sign-up.
  3. You will then receive  API key on the e-mail account that is linked to your WordPress website (if you don’t remember which e-mail account that is, you can retrieve it in Settings > General > Email Address)
  4. Enter the API key in the field under Step 2 and the plugin is installed!
Activeren van de ShortPixel plug-in gebeurd via een API key
The ShortPixel plugin activation with the so-called API key.

Converting your images with the ShortPixel plugin

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

Via het tabblad advanced kun je in ShortPixel afbeeldingen omzetten naar WebP.
Through the Advanced tab you’re able to convert images to the WebP format in ShortPixel

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:

Converteren van de afbeeldingen naar WebP in Optimus HQ,
Image conversion with the WP Optimus HQ plugin.

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.

Via Cache Enabler maken van van de website pagina's cached bestanden die de WebP afbeeldingen bevatten.
Create cached files with Cache Enables that contain the WebP images.

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.

Via de optie Photon activeer je de WebP conversie.
WebP activation with the aid of the Photon module

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

Door een afbeelding lokaal op te slaan zie je gelijk of de uitvoering van WebP gelukt is.
A local save attempt will determine whether your conversion has been successful

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.

Roger Overdevest

Owner of WPLounge.nl, the biggest Dutch blog about WordPress.

Comment