What are WebP Images and How to Use Them in WordPress
Slow websites can easily mean dissatisfied customers and lost business. Images on pages are often one of the contributors to slow web pages. However, they add great value to content.
Therefore, several companies and individuals have been striving for smaller images that maintain quality. These efforts have resulted in a new image format WebP.
Initially, websites were simply full of text. Later images were introduced and now they are part and parcel of almost any web page on the Internet.
They are great for capturing attention, they add color and value to any web page. However, they also add to the weight of the pages. This weight can be damage both your user experience and your search engine optimization efforts.
What is the WebP image format?
WebP image format is developed by Google. It maintains the quality of images while making them smaller in size.
On average WebP images are 30% smaller in size than JPG and PNG images. The reduction in size does not reduce the quality of the images.
JPG images are great for pictures and PNG is known for transparency, GIFs are used for animations. WebP is a go at creating a single image format with all the advantages of JPG, PNG, and GIF images.
WebP is able to achieve lower image sizes by using predictive coding for the images. In WebP images, only some data of blocks of pixels is stored. Predictive coding then predicts the value of missing blocks of data and encodes the difference. This results in images that are smaller in size but still high quality.
Why you need WebP
- WebP images are smaller in size but still high quality. This means faster loading websites.
- A faster website means better user experience, the rewards can be seen in higher search engine rankings.
- Most modern browsers support the WebP image format. Safari is an exception, they are still testing WebP on their operating systems. Before using WebP it might be useful to check which browsers your visitors use. You can use a tool such as Google Analytics to check. If they are using Safari or any other browser that does not support WebP, you don’t need to worry. We will look at a workaround for these browsers shortly.
- Smaller images mean you need less disk space and bandwidth. This can be a huge cost saver for larger websites. They also mean less data consumed by your visitors.
- WebP image format is developed by Google. If you need search traffic from Google, you should seriously consider it. It is expected eventually WebP images will rank higher than other image formats in image search results. Google is making an effort to get webmasters to use WebP. WebP is also recommended by the Google PageSpeed Insights tool.
Using WebP in WordPress
Unfortunately, even with the latest update of WordPress 5.4, WebP images are not natively supported.
Therefore, we have to resort to alternate methods of using WebP in WordPress. One method is to use a free plugin, WebP Express.
The plugin accesses the WebP Convert library and uses it to convert images to WebP while delivering them to browsers in several ways. These conversion methods are explained in great detail on the plugin’s page.
The plugin stands out from other methods due to one major feature. While most browsers support WebP images some may not. Especially mobile browsers and Apple’s Safari browser. The plugin will autogenerate WebP images and serve those to any browser that supports WebP images. For browsers that don’t support WebP images, the plugin will serve JPG and PNG versions of the images.
You will first need to install and activate the plugin. If you are unsure about how to install a plugin in WordPress refer to our guide.
After the plugin has been installed, in your WordPress dashboard under the “Settings” menu click on “WebP Express”.
Then click “Save settings” to activate the plugins rewrite rules.
You can leave most settings as default. You don’t need to change them.
The only setting we recommend changing is the “Alter HTML” setting.
This setting ensures that WebP images are served to browsers that support it. Varied image responses will only be served to browsers that do not support WebP images.
This will also help with caching and CDNs.
There can be an issue with using the plugin on some shared hosts. This is if they do not have one of the following PHP extensions installed. The plugin’s library can use Imagick extension, GD extension, VIPS extension, cwebp, ImageMagick, etc. to convert images. One of these needs to be properly installed in the hosting environment.
If you install the plugin and get a notification saying the plugin needs one of these extensions, you will have to contact your hosting provider to get one of these installed.
Here is an example of an image converted to WebP from jpg. There is no difference in the quality or dimensions of the image, but the size is almost 50% less.
Conclusion
Sometimes it may feel like you can never really keep up with the latest technologies. Website speed was majorly an ignored factor just a few years back.
When the focus shifted to speed it was all about compressing images and making them smaller and ensuring they are the right size. Now there is a further development in the form of WebP.
As you can see using WebP images on WordPress is easy. You don’t need to manually convert your images and the WebP Express plugin makes it easy.
A simple plugin installation and you can easily enjoy the benefits of WebP.