WebP might be a relatively new format but, with its features and Google behind its back, it’s the future of image optimization. Here you’ll learn why you should start using it already now and how to implement it in order to benefit maximally in terms of SEO. To make your life as a WordPress user easier, a list of the top plugins is provided as well.
WebP: Google’s Preferred Image Format
Image size accounts for up to 60-65 % of the total size of web pages and is therefore also the primary source of page speed slowdown. This is the reason why Google has taken the initiative to promote the use of WebP: to support their own effort to make the web faster.
WebP has been around for about 7 years now. However, it only began to gain popularity recently, after Google acquired it and started pushing for its implementation. WebP is currently developed as open source and, according to Google is a modern and superior image format.
It’s still natively supported by very few browsers: Google Chrome, Opera, and Android (see full list here), but the fact that Google is behind it suggests that WebP quickly can become the standard.
What makes WebP special, is the fact that it encodes images more efficiently, making them about 26% smaller than PNGs and 34% smaller than JPEGs, without a considerable reduction in quality in comparison to similar JPEG. It supports both lossy and lossless compression, as well as transparency, making it a good choice in most cases. WebP can therefore help you create smaller and in the same time richer images, improving page load times and user experience.
It’s worth to note that Google keeps all WebP-related pages and files together with their PageSpeed Tools. This might just be their way to signal the importance of implementing this type of image optimization. This is also why you should take the first steps towards image optimization with WebP today.
Implementing WebP Correctly
The fact that WebP is open source means that everyone can access, use, and contribute to its code. In addition, there’re different solutions and applications, depending on your technical skills, that can help you convert images from a long list of formats to WebP or decode and accept WebP images with your browser or program. Photoshop users can add WebP functionality by installing the precompiled Photoshop Plugin. For WordPress users, there’re also several image optimization plugins that do the job out of the box (check the plugin section of this post).
However, as a webmaster or web designer, you should be aware that you can’t just convert to WebP all your images and hope that everything will be fine. Doing that will likely result in tons of errors. The reason is that there’re way too many browsers that don’t support WebP just yet.
In order to make sure that your images are served in the right format, according to browser, you must offer several different formats for each image on your pages. These are called fallback formats. They solve compatibility issues by either listing a number of resources that browsers can “choose” from or creating a set of rules for serving images.
The two most popular solutions include a CSS fix and an edit of .htaccess.
In CSS, you can add different image formats corresponding to a single site element. Browsers can then fetch a compatible image by checking the list from top down and choosing the first image format that is supported. While this sounds simple enough, it might cause problems, as some browsers end up downloading several resources for the same image. The slowdown caused by multiple downloads makes the use of WebP pointless.
Correctly implementing fallback formats in CSS requires a tool as Modernizr, enabling your server to detect a browser’s capabilities before sending a file. This way you avoid eventual download of multiple files and get the most out of image optimization.
The other method of regulating the use of image formats, mentioned above, is much better from a simplicity point of view. Instead of listing multiple image paths for each image that should appear on one of your pages, you can create general rules for serving WebP and fallback formats. This is done in .htaccess, a file found among the core files of your WordPress installation on the server.
A simple piece of code makes it possible to automatically replace JPG and PNG images with WebP for browsers that support it, when they are found in the same folder. Here you can find the ready piece of code that you have to copy and paste into .htaccess, provided by GitHub’s user Vincent Orback.
WebP Plugins For WordPress
Even though WordPress plugins are developed by a very active community of programmers, WebP hasn’t obviously made an impression on them just yet. A search in WordPress’ plugin directory returns a very few results, some of which completely irrelevant. However, I was able to find a few for you:
EWWW Image Optimizer
EWWW Image Optimizer is indeed a great image optimization plugin, also when it comes to WebP. You can easily enable WebP compression in the plugin settings, so that an additional copy of the images is created. However, the plugin doesn’t handle the rules for serving WebP and fallback formats. Thus, you’ll either have to use yet another plugin or perform the .htaccess edit, described above.
Short Pixel is another reliable image optimization plugin that, among other simple settings, gives you the opportunity to choose whether or not a WebP copy of your images should be created. This doesn’t cost you anything in terms of credits (how many images you can optimize for free or as a part of one of the paid plans). Just as in the case of EWWW Image Optimizer, you have to make sure that the use of WebP is properly configured.
Optimus is an image optimization plugin by KeyCDN. I haven’t stumbled upon it before and neither its reviews, nor its description convinced me that it’s a good choice. Especially the fact that the free version only offers limited functionality made me dislike it right away. However, it does offer WebP conversion, which is a plus – and the reason it’s listed here.
Cache Enabler is a cache plugin by KeyCDN. Its controls are simple, maybe too simple, and thus not giving you the opportunity to set the caching rules to fit your site’s specific needs. Even though it’s not very flexible, the team behind Cache Enabler claims it to be the first caching plugin creating and caching sets of images. This is a major plus for all those, who don’t dare to do the coding themselves or don’t want to use time on it.
WP-WebP is a simple plugin that adds the necessary piece of code to your site, enabling you to use the WebP format. There’re simple controls allowing you to customize where the code is added (header or footer) and how the rules are executed.