Roger OverdevestGoogle 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!
Contents
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.
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
- Convert JPEG and PNG files to the webP extension
- Link the WebP images to all of your pages
- 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
- Install the ShortPixel plug-in through Plugins > Add new
- Then go to Settings > ShortPixel and request an API key in the sign-up.
- 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)
- Enter the API key in the field under Step 2 and the plugin is installed!
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.
Comment