Speed up your web page loading with WebP
Tags: webdev, html, image, performance
Published: 2019-02-25 23:03:27

---
title: Speed up your web page loading with WebP
published: true
description: WebP becomes now widely supported by the browsers. It is time to support it on your next project too!
tags: webdev, html, image, performance
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5cumu65jehvddjn5hcjs.jpeg
---

## Images are widely used

Images take more and more space in our bandwidth. 

[W3Techs statistic](https://w3techs.com/technologies/overview/image_format/all) shows that 90% of all websites uses images.

For [news.google.com](https://news.google.com), images count for 44 % of the assets loaded on the home page, taking 30% of the load time (source: I manually analyzed the page using DevTools).

## Webp

Google proposed the WebP picture format, which provides smaller image size.

According to a case study conducted by Google themselves on [different lossless compression algorithm vs webp](https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study), this last has shown up to 42% of saved bytes compared to the classic png compression library. 

I have also tested against a JPEG image (1920x1080) and here is what it gives:

![WebP versus JPEG image format](https://thepracticaldev.s3.amazonaws.com/i/y8o30d207vajqmou81gm.png)

As you can see, the JPEG image weights 530KB versus 195KB for the WebP image, which is 36% less heavy, not far from what Google states against PNG.

_[Original image](https://www.pexels.com/photo/adventure-alpine-altitude-austria-355241/)_

## Coverage

WebP is correctly supported across all the most popular browser ([75% coverage](https://caniuse.com/#feat=webp) at the moment).

| Browser           | Supported | Minimum version | Release date |
|-------------------|-----------|-----------------|--------------|
| Internet Explorer | ✘         |                 |              |
| Edge              | ✔         |              18 | Nov 13, 2018 |
| Chrome            | ✔         |              71 | Dec 05, 2018 |
| Firefox           | ✔         |              65 | Jan 29, 2019 |
| Opera             | ✔         |              56 | Sep 25, 2018 |
| Safari            | ✘         |                 |              |

_source: [https://caniuse.com/#feat=webp](https://caniuse.com/#feat=webp)_

## Using WebP in production

Here is an example of optimization for web pages using [&#x3C;picture&#x3E;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) HTML tag:


```html
<!-- before -->
<img src="/img/mountain.jpg" alt="Moutains view" />

<!-- after -->
<picture>
  <source type="image/webp" srcset="/img/mountain.webp" />
  <img src="/img/mountain.jpg" alt="Mountains view" />
</picture>
```

In case WebP is not supported by the user agent, the browser will fall back to the `<img />`. Picture is an HTML tag with [87% of coverage](https://caniuse.com/#feat=picture) (merci [Sylvain](https://dev.to/martyonthefly) for improving this part), so if the browser does not support the `<picture>` tag, it still fallback to the `<img />` tag anyway (thank you [Fotis](https://dev.to/isfotis) for the info!).

The `<picture>` tag is so much more powerful, it can let you choose an image size depending the current browser viewport width for example. Learn more on the [MDN page](https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture).

## Tools for turning images into WebP format

There is plenty of services online to convert images to WebP. I personally automatize this task with [Gulp.js](https://gulpjs.com/).

```javascript
const gulp = require("gulp");
const webp = require("gulp-webp");

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg,png,svg}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});
```

## To go further

Let me recommand you this incredibly complete image optimization article by Boris.

{% link https://dev.to/borisschapira/optimize-images-to-reduce-page-weight-file-formats-tools-and-rwd-8g2 %}

## Conslusion

Building or maintaining a website also comes with responsibilities towards our users: we should also consider the users on a light data plan.

I think web development is offering so much possibilites in term of optimizations. This is the perfect opportunity to improve engagement by reducing the user bandwidth usage, and in the same reducing your server i/o time.

That is why I think WebP might be a good ally when it comes to trimming those precious bytes without compromising the user experience.

Happy optimizations!

Cover photo by [Pixabay](https://www.pexels.com/@pixabay) from [Pexels](https://pixabay.com/en/speed-car-vehicle-drive-automobile-1249610/)