What is WebP? Use of WebP images in WordPress!
What is WebP? This is an image format developed by Google in 2010 for lossy or losslessly compressed images. The images can be static or animated, it doesn’t matter. Although Google has been using its WebP format for images for a long time, the relatively new image format has not yet really caught on. That will probably change now. We’ll tell you why and how you can catapult your website into a new league of speed with WebP.
The highlight: WebP images are significantly smaller than comparable images in Jpg format.
Some of the images are reduced by 50 percent or more. You don’t see any difference in quality.
The big advantage: Smaller images load faster, which makes the website much faster overall. And we all know: Google loves fast websites! So there are many reasons to rely on the new image format.
WebP is on the rise
Despite the advantages that the WebP format offers, it has not yet fully caught on. In Germany, only around half of Internet users are said to have a WebP-compatible browser; in the USA, it is said to be around three quarters of users. Google Chrome and Android cell phones naturally display WebP images – both come from Alphabet (the Google parent company). Microsoft Edge has only been around since the end of 2018. Firefox had previously refused to support the WebP format. Until now. The version Mozilla Firefox 65, released at the end of January 2019, now also supports WebP. So it is only a matter of time before almost all internet users can see WebP images.
Here we show the advantages and disadvantages of WebP images and explain how you can use WebP images on your WordPress site.
Use of WebP images in WordPress
When you want to save images for use on the web, you can use several types of files. The most common options are PNG, JPEG (or JPG), and GIF. While these formats are popular, each has its own set of advantages and disadvantages:
JPEGs can represent detailed images with many colors, making them ideal for photos. At the same time, the files are often very large and are not always optimal when compressed.
PNGs are ideal for images without large amounts of data such as logos or screen shots of the user interface. They keep great quality when compressed and support transparency, but don’t work well for photos.
GIFs are great for animation, but not for storing static images.
WebP images are an image format developed by Google that allows images to be displayed on the web in a similar quality to existing image formats. However, the file size is much smaller.
To achieve this, WebP offers both lossy and lossless options for compression. The latter stores more data, while the former makes the resulting file sizes even smaller.
Google found that converting to WebP from a standard PNG resulted in a 45% reduction in file size and still 28% compared to already compressed PNG. Compared to JPEG, it offers an amazing 25 to 34% size saving on average
Pros and Cons of Using WebP Images on Your Website
Advantages of WebP images:
Images are a major cause of page speed slowdowns as they typically make up the bulk of the page size so every bit is helpful.
In SEO land, we know that speed can have a direct impact on rankings and conversions. Hence, using WebP makes perfect sense.
Image files take up space no matter how they are saved. The more images and other media you add to your website, the higher the likelihood of lagging performance. It is incredibly important that your pages load quickly as slow speeds will put visitors off before they’ve even seen what you have to offer.
Compressing image files makes them smaller and more efficient, but they usually come with a loss of quality. The more you compress an image, the worse it looks. However, the type of file you are using will have an impact on how extreme the effect is.
Images saved in a WebP format can be much smaller than JPEGs and PNGs while maintaining the same quality. Again, lossless WebP images work as replacements for PNG files and the files are about 26% smaller. On the other hand, lossy WebP images are 25-34% smaller than JPEGs.
It is also noteworthy that both types of WebP images support transparency. Transparent images are incredibly useful on the web. You can use them for logos and other brands, for example. JPEGs do not offer transparency as a feature, but lossy WebP images do.
Disadvantages of WebP Images
If WebP has so many benefits, why aren’t more websites using it? The main disadvantage is that not all browsers currently support WebP images, although more and more browsers have added support recently.
Due to the limited browser support, you currently need an alternative version for each image.
Here is a comparison of current browser support as of December 2018 along with each browser desktop and mobile market share:
Chrome – 67% Desktop / 53% Mobile
Firefox (desktop only) – 11%
Edge – 4% Desktop
Opera – 2% desktop / 4% mobile
Samsung Internet – 6% mobil
No WebP support:
Safari – 5% desktop / 22% mobile
Internet Explorer – 7% desktop
Firefox for Android – < 1% mobile
UC-Browser für Android – 9% mobil
While most web browsers now have WebP support, there are still a few browsers that do not support it (most notably Safari).
As already mentioned, this doesn’t matter too much, as you can simply add PNG or JPEG images alternatively, which will be displayed to visitors with incompatible browsers. It just takes a little more work.
How to integrate WebP in WordPress
WordPress does not support WebP out of the box. The most common image formats (JPEG, GIF, PNG & ICO) are supported, but you can only insert the WebP format with a plugin. So you can’t just upload a WebP file to your media library.
WebP plugins for WordPress
The advantage of integrating WebP in WordPress using a plugin is that you do not need to save your other JPEGs or PNGs separately. So here are some of the most popular plugins we use that we’d like to introduce. We’ll also show you how you can actually convert WebP images and integrate them into your WordPress website.
EWWW Image Optimizer plug-in
The EWWW Image Optimizer plugin is an easy way to integrate WebP into your WordPress installation. The plug-in automatically converts to WebP. Technically, this happens via the exec () function on the server. If your server does not support this function, you can only ask your web host whether they have activated this function for you.
Please always create a backup of your WordPress installation beforehand: e.g. with the backup plugin “Duplicator”.
– Install the EWWW Image Optimizer plugin
– You can find the settings under Settings – > EWWW Image Optimizer
– Activate the checkmark for “JPG / PNG to WebP” under WebP
If images have already been uploaded before the plugin was installed, they will not be converted by default. To do this, click under “Media” on “Mass Optimization”.
To ensure that all images are captured, activate the checkmark before scanning for “Images that have already been optimized are skipped by default”.
All other settings are actually self-explanatory.
After completing the conversion, all you have to do is adjust your .htaccess. Usually the plugin takes over this step. In the Settings -> EWWW Image Optimizer directly under the “Save changes” button, simply click on the “Set Rewirte rules” button and the plugin will insert the required code into your .htaccess. The plugin then shows you a green flag. If a red flag is displayed, you have to edit your .htaccess manually.
If the exec () function is not available on your server, you cannot use the EWWW Image Optimizer plugin (for free). Then you only have the option to do the WebP conversion via the paid API of EWWW Image Optimizer.
WebP Express plugin
An alternative is the free “WebP Express” plugin. After installing the plugin, you can configure it under -> Settings.
In principle, you can leave the initial basic settings as they are. To be on the safe side, always make a backup of your WordPress website beforehand!
The “ImageMagick” method is recommended as the conversion algorithm. You can then disable all other methods. However, several conversion methods can also be left active. WebP Express always uses the top method first. In the event that this does not work, the next activated method below is used.
The conversion quality presets for normal use are sufficient.
When everything is set, click on the “Bulk-Convert” button to convert the existing images into WebP images.
The WebP Express plugin automatically sets the required entry in the .htaccess. The option under “Old HTML” should still be activated so that the HTML code is optimized. The img-tag is replaced by the picture- tag in the source code. In this way, two different variants of your images are made available to the browsers. Compatible browsers can now select the WebP image and incompatible browsers can still use the JPG or PNG image file.
WebP is an image file type that has the potential to speed up your website significantly, far more than by using compressed PNGs or JPEGs. WebP is available in both lossy and lossless versions and generates smaller file sizes with comparable quality.