Optimize Your Website with WebP

Notice the difference between the two photos of that wild flowering cherry tree, above? 

Go ahead, take a closer look. 

The file size of the WebP version, on the right, is more than 30 percent smaller than the file size of the JPEG version on the left: 173 KB for WebP version compared to 251 KB for the JPEG version.

Visually, they look a lot alike. 

But the difference in file sizes is significant. And that difference can quickly add up if your site uses images. Do I have to remind you that pictures have a tendency to multiply? 

That’s why you should be adding WebP to your web workflow. 

What is WebP?

WebP technology has actually been around for a while. Google introduced this image format, and open-sourced it, back in 2010 to enable webmasters and web developers to create smaller, richer images that make the web faster. 

By using the WebP image format, you can reduce the size of the images on your site by 20 percent or more, without losing significant resolution or detail. Smaller image file sizes means a faster-loading site, which users (and content editors) love. Another benefit is the boost to your budget, as using smaller images often allows you to reduce your bandwidth charges.  

A speedy site also gets SEO points from search engines like Google and Bing, improving your site’s ranking and helping your content be more easily discoverable by audiences. As more and more content is being created and uploaded to the web every second, compression tools like WebP are starting to become more mainstream and catch on with the popular browsers. Today, Chrome and Firefox offer full support. Other browsers appear to be moving in that direction. Here’s an up-to-date resource that tracks how the WebP the browser adoption process is going.

For a more in-depth overview of how the WebPproject got started and it’s current capabilities, check out this resource.   

The Drupal Angle

A project like WebP plays to Drupal’s strengths because of Drupal’s core + contributed modules architecture. When a new technology or capability comes along, it usually doesn’t take long for a motivated Drupal developer to create a module that makes it easy to implement on the Drupal platform. 

That was the case with the Drupal WebP module. As WebP adoption spread, a Drupalist in Belgium started building and maintaining a Drupal WebP module, which creates WebP copies of images to be served to browsers that support WebP.

Recently, three new maintainers, including Acquian Alejandro Moreno, also began working on the WebP module, which is optimized to work with the Drupal 8 platform.   

This is good news for those of us who work with Drupal. It means that it will be easier to incorporate the WebP format into a web workflow. We can focus on the already difficult tasks of creating content and images that fit the tone and format of our projects without stressing over details like file size and resolution. 

If you haven’t already added WebP to your Drupal workflow, Alejandro Moreno has just published a comprehensive blog post on the topic. Alejandro’s post covers the installation process, helpful tools, strategies for dealing with browsers that don’t yet support WebP, and other related issues. 

If you’re using Drupal 8, you should have all the best tools and modules at your fingertips to optimize your site. Say goodbye to slow load times and unnecessary bulky image files for good with WebP.