All About webP

by Frida Nyvall

All about the webP image format. What it is, how to convert to the file format and how to use it with or without CMS.

When webP arrived in Safari in the middle of September 2020, it had taken about a decade before the image format was finally supported in all the major browsers. With global browser support of about 96% at the time of writing, webP has become even more interesting from a performance perspective. webP is becoming even more useful as software and tooling for handling the image format have progressed.

webP is an image format created by Google, hence the reluctance by Apple to add support in their browser Safari.

It is designed to have better compression that oftentimes is more effective compared to other image formats such as jpeg, png and GIF. That essentially means smaller file sizes, which is good for faster loading websites.

The image format supports both lossy and lossless compression – essentially different ways of making the image file weight smaller.

A webP image has the potential of being around 25% to 33% smaller than its jpeg counterpart, and around 25% smaller than a png.

Both transparency as well as animation is supported, making webP able to also replace animated GIFs.

Converting to webP

With Apps

Image editing software Sketch (Mac only, subscription needed) as well as GIMP (free, cross-platform) can export to webP.

The cross-platform app XnConvert is free to use and allows batch image conversions.

It is possible to work with webP images in Adobe Photoshop using the Google backed plugin WebPShop.

Converting images in other file formats to webP is however also possible through the following suggestions.

Using Online Services

There are multiple online converting services, for example: Online-Convert, and Google backed Squoosh.

Using the Command Line

If you prefer using the command line, there is also the official CwebP command line encoder.

How to Use webP

Even if browser support is pretty good among modern browsers (96% at the time of writing), note that it is only available in Safari for iOS users who have updated to Big Sur.

With Fallbacks

The picture element with source and srcset seems to be the easiest way of using webP with fallbacks.

<!--HTML-->
<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="My Image">
</picture>

If you need support for older browsers, Picturefill also supports webP which is great.

As background-image

webP images can be used as background-images, but creating fallbacks for non-supporting browsers requires a little more work than for using the image in HTML.

One strategy is to use JavaScript (like Modernizr) to find out if the browser supports webP or not. Add classes to a wrapping element indicating if support is present or not. Use CSS to target each case, setting the appropriate image:

/* CSS */
.no-webp .elementWithBackgroundImage {
    background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
    background-image: url("image.webp");
}

For users that have disabled JavaScript in their browsers, add a specific class (“no-js”) to a wrapping element, and a script to remove the class for browsers that have enabled JavaScript. Use the class (“no-js”) to set the appropriate image:

/* CSS */
.no-js .elementWithBackgroundImage {
    background-image: url("image.jpg");
}

<script>
  document.documentElement.classList.remove("no-js");
</script>

With a CMS

Creating and managing webP images using the previously described methods is probably alright if you are a developer or a dedicated web administrator.

For clients that occasionally update their own websites, adding even more steps to a process they might already find cumbersome is not appreciated even if it will improve their website’s performance.

Plugins & CDNs

One solution is to use a plugin or combinations of plugins to create the webP images and corresponding fallback solution for older browsers.

CDNs like Sirv or Cloudflare also offer webP format images as part of their services. The drawback with using one or more plugins and/or external services is that most might not be free, so you would have to research which setup would make the most sense based on your specific use case.

A popular WordPress plugin is “webP Converter for Media”, which apart from being free to use also hints about being able to support an even newer (and slimmer) image format called avif in the future.

Note that to see if the plugin is working, you will have to check the image the file type in the DevTools network tab since the plugin does not change the image URL filename ending.

Converting on the Server

If you are unable to find a plugin or third-party service that fits your needs, it is also possible to build your own file conversion that is used for whenever a CMS user uploads an image. The drawback with this method is (apart from having to write the code) that the actual conversion will take some extra time and cause some loading delay when uploading images.

One advantage is that it can be easier for your client to evaluate the cost compared to pay per usage priced third party services. Another advantage from the client’s perspective is that they will not have to alter the way they are working when editing the website.

When building your own image conversion, keep in mind that the server also must be able to support webP format.

• optimering
• performance
• webbutveckling
• WordPress