WebP is an image format introduced by Google with the aim of improving the size and performance of images on the web.

In Google's own words :

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

The promise is to save around 20 to 30 percent of space on images using WebP and, as you'll see in this article, this claim is consistent with the results I've found myself using WebP in Drupal.

I won't go into more details about WebP, but if you are interested in more information about the subject please visit this link: https://developers.google.com/speed/webp/.

There is also a comparative study between jpeg and WebP, and the advantages of using WebP. You can read it here: https://developers.google.com/speed/webp/docs/webp_study

The next important thing to keep in mind: which browsers support WebP, and this together with our own project requirements will define how we will attack this implementation. We’ll see that later, for now the list is here: https://caniuse.com/#feat=webp.



As we can see most of the browsers support WebP, with the exception of Safari, the old venerable IE, iOS Safari, and a few other less used browsers. It seems that Safari support could be coming though, for it is marked as “Safari is experimenting with supporting WebP images.”

LET'S START

I'm going to show you two different methods of getting WebP working in Drupal 8.

The first one is very easy to setup and start getting results. However if support for all browsers is important to you, you'll have to work a bit more on your theme layer, as we'll see later.

On the other hand, the second approach just implies installing one module, WebP. Once installed you won't need to work a lot more. At the moment of writing the module does not have a stable version, but that's something I'm planning to fix soon.

INSTALLING REQUIREMENTS AND SETTING UP THE SITE

For the purpose of this article, I have installed a new Drupal 8, and I’ll be using the content type "Article" that comes by default with a new Drupal 8 site.