Image optimization is becoming increasingly important in optimizing the speed of your website. With Google’s webp image format you can reduce the loading time of your WordPress website by up to 70%. With the right wordpress plugin it’s easy as pie! In this article I show you how it works.
what is WebP?
Webp is an image format developed by Google. Thereby, the WebP images are supposed to enable faster and smaller images and thus extremely push the loading time of a website. The image format was first mentioned in 2010 and offers lossless and lossy compression methods. The images are delivered by the web browser – based on the MIME type.
Big companies like eBay and YouTube already use the WebP format – so it’s about time that you also use this great image format for your WordPress blog and save a lot of loading time.
Why is WebP so important? In August 2016, httparchive published a study that 64% of website size comes from images. With that percentage in mind, optimizing HTML, CSS, and JS makes sense, but the focus should also be on optimized images. With the new WebP image format, you can compress your images much smaller – while maintaining the same image quality. The smaller your WordPress page is, the faster it will load – this is not only good for your visitors but also an important ranking factor for Google.
1.1 WebP compatibility
Even though WebP is very interesting, you should pay attention to the browser support. Unfortunately, not all browsers support the WebP format. According to caniuse, WebP is currently supported by Chrome 23+, Opera 39+, all versions of Opera mini, Android Browser 4.3+ and Chrome for Android.
But that’s no reason to hang your head. There is a way to deliver WebP to supported browsers and to set up a JPG/PNG fallback for all browsers that do not support WebP. This way old browsers won’t display broken images but just slightly larger images. So the user experience remains the same. So WebP should be seen as an add-on – Google will thank you!
Even though according to W3Schools the Chrome browser has the monopoly with almost 80% penetration – look at the specific browser usage of your website in Google Analytics! These can vary greatly depending on your visitors and your niche. To do this, simply go to Audience -> Technology -> Browser and Operating System in your Google Analytics account. And lo and behold: The values vary greatly, even for me.
how to integrate WebP into WordPress
And here’s the catch: WordPress doesn’t support WebP out of the box. Even though WordPress supports the most common image formats (JPEG, GIF, PNG & ICO), you need to add WebP to that list via plugin. So you can’t just upload a WebP file to your media library:
The advantage of a plugin: You don’t need to save your “normal” JPEGs or PNGs – the plugin does the conversion to WebP automatically. This is done by the exec() function on your server. The disadvantage is that some servers do not support this function (for security reasons). You may have to ask your web host if they will enable this function for you.
If you don’t have an exec() function on your server, you can also let EWWW Image Optimizer convert the images in the cloud. But you have to pay for a subscription at EWWW. A free variant to convert your images to WebP is the plugin WebP Express with the GD Extension. However, this plugin cannot recognize transparencies in PNGs. If you use very few PNGs in your website anyway, you can just use WebP.
webp plugins for wordpress
Now it’s time to get down to business! Now that you have chosen a plugin, I want to show you how to convert webp images and embed them into your WordPress website. We start with the easiest way: EWWW Image Optimizer and enabled exec() function.
Please always make a backup of your website before! For this you can use a plugin like Duplicator.
3.1 WebP integration using EWWW Image Optimizer plugin
The EWWW Image Optimizer plugin is the easiest way to add WebP to your WordPress installation.
- Please always make a backup first – just use the backup plugin Duplicator.
- Install the EWWW Image Optimizer Plugin
- Under Settings -> EWWW Image Optimizer you will find the setting
- Under WebP check the box “JPG/PNG to WebP”.
If you have already uploaded images before installing the plugin, they will not be converted. To convert these images, click on “Mass Optimization” under “Media”.
To really include all images, you should check the box “Already optimized images are skipped by default. Check this box before scanning to skip this”.
If you have already compressed your JPGs and PNGs, you can disable compression of existing images. Check the box “Skip compression and try WebP conversion only”.
Now you can click on the “Scan for unoptimized images” button. When the scan is done, you should convert all found images to WebP images.
Once the plugin has finished converting, you only need to adjust your . htaccess. In the best case the plugin will do this step for you. Just go to Settings -> EWWW Image Optimizer. Directly under the “Save changes” button you will see the following:
Just click on the button “Set rehost rules” and the plugin will automatically write the required code into your . htaccess. If everything worked, the red field with the PNG inscription will turn into a green field and it will say WebP Darin. If this does not work, you will have to edit your . htaccess by hand. Please make a backup of the file before editing the . htacess!
3.2 WebP integration via WebP Express plugin
If the exec() function is blocked on your server (for example at the WordPress host Raidboxes), you cannot use the EWWW Image Optimizer plugin for free. Of course you are free to do the WebP conversion via the paid API of EWWW Image Optimizer.
Or you can use the free plugin WebP Express. This is also very comfortable and comes almost as an “out-of-the-box” solution. After installing the plugin you can configure it under Settings -> WebP Express.
You can leave the first options as they are. Make a backup of your WordPress website before!
For normal use, you should choose a conversion algorithm. For the example I selected the “ImageMagick” method under “Conversion-Methods” and disabled all other methods. As you can see in my screenshot, you have the possibility to select multiple conversion methods. WebP Express will use the top method first and if it doesn’t work, the next activated method below and so on.
Note that the default conversion quality settings are sufficient for normal use. If you want to convert a photographer’s portfolio, it may be useful to increase the conversion quality a bit. Note, however, that this will also increase the loading time of your website.
After you set the conversion method, you can click the “Bulk Convert” button to convert your existing images to WebP images.
The plugin WebP Express even regulates the necessary entry in the . htaccess automatically. Only the check mark under “Old HTML” should be set so that your HTML code is nice. The <img> tag will be replaced by the <picture> tag in the source code. This way you provide the browsers with two different versions of your images. So compatible browsers can select the WebP image and other browsers can still use your JPG or PNG image.
After saving you have successfully configured the WebP plugin!
By the way, under the item “Web Service” you can use your WordPress website to convert images for other websites quasi by remote control. In the other installation, you can then select Remote WebP Express as the method under “Conversion method”.
4) How do I check if WebP images are delivered?
After you have installed and configured the respective plugin, you should check whether the WebP images are also delivered to the compatible browsers. If you use a caching plugin, you should clear your cache first.
4.1 How do I check in Firefox if WebP are used?
Now open your WordPress website in the Firefox browser. Click on any image with the right mouse button and select “Show graphic info”. A window opens and you can see the information about the image. Under “Type” you should now see “WebP Graphic”. With this your website will successfully deliver WebP images.
Besides this option, there is another possibility. To do this, right-click on any graphic on your website. Now select “Show graphic”. Your browser will then only show you the image. Click with the right mouse button on the image and select “Inspect element”. The Firefox inspector opens. In the top bar of the inspector you will see different tabs (Style Editing, Web Storage, Inspector, etc). Click on “Network Analysis” in this table bar. Below that, a table will open in which your image should appear. If you see “webp” under type, you did everything right. Congratulations!
4.2 How do I check if WebP is delivered in Chrome?
To check if your website is serving WebP images in Chrome browser, right click on any image of your website. Here you select “Inspect”. Now the Developer Tools window will open. Click on “Network” at the top of the tabs (Elements, Console, Sources, etc). Now you should refresh your page again (Apple+R). Chrome will now show you all the files used on your site. Just look for an image in this list and now you should see the entry “webp” under “Type”. You are using WebP images!
As you can see, you can really save some image size with the WebP format. I think other browsers will follow suit in terms of support and your advantage will continue to grow. There is no comparable image compression on the market that can currently stand up to WebP. WebP can also do lossless compression (and still save precious Kbs). So if you’re looking for more ways to make your WordPress installation faster, WebP is a good solution.