Adding support for WebP images

Manipulating SVG images is an acquired art, and in some instances, it will clearly be overkill for what we need to achieve.

Instead, for those occasions where we need the detail in our images, we might normally use the JPEG format, or potentially PNG as an alternative. There's nothing wrong with either, but, it's old hat, and I do like to push the boundaries of what is possible! In addition, the JPEG image format is lossy and does not support alpha channels; PNG images are lossless, but suffer from larger file sizes for more complex images. If all we did was simply insert images onto a page, then PostCSS wouldn't be helpful here; instead, how about considering a different format altogether?

Enter Google's WebP. You'd be forgiven for thinking "Web…what?", as it isn't a common format! Part of this can be attributed to the lack of take-up; the only browsers to support it natively are Chrome, Android, and Opera. That doesn't mean to say it should be discounted. The format can offer some significant space savings over standard image formats such as JPEG or PNG, while maintaining superior quality. We can even get PostCSS to do most of the work for us, to boot! Let's explore the nuts and bolts of this in more detail, with a simple demo.

Switching WebP images in and out

Image switching is nothing new, we covered one aspect back in Chapter 4, Building Media Queries, when we used PostCSS to switch-in hi-res images when supported in the browser.

We can use a similar technique, but this time with image formats, Google's WebP format was designed as a replacement for the myriad of other image formats available for the web. In an ideal world, we would use the new <picture> tag to take care of switching images automatically:

<picture>
  <source srcset="../img/landscape.webp" type="image/webp">
  <img src="../img/landscape.jpg" alt="The Oslo Opera House">
</picture>

It's not supported in all browsers, so instead, we can use a mix of PostCSS and Modernizr to apply the same effect. The plugin we need for this task is the webpcss plugin (available from https://github.com/lexich/webpcss)—we will need to run npm install gulp-webp --save-dev in a Node.js command prompt session to install the plugin. Let's dive in and take a look at it in more detail.

Tip

For best results, I would recommend using Chrome throughout these two demos, support can be added for Windows and other browsers, by visiting https://developers.google.com/speed/webp/.

Viewing the differences in file sizes

Before we get stuck into using PostCSS, let's take a moment to perform a quick test. The files for this tutorial are in the Tutorial 23 folder:

In the code download that accompanies this book, go ahead and extract a copy of landscape – original version.jpg, and rename it as landscape.jpg. The size should be around 11.5 MB in size.
Save the image to the root of our project area—we also need a copy of cwebp.exe, so go ahead and extract that to our project area as well.
Fire up a command prompt session, change the working folder to our project area, enter gulp, and then press Enter.
If all is well, we should see the results of our conversion, and the new WebP-format image appear in our project area:
Try performing the same process with a PNG format image; here are the results of a similar test I performed, with a PNG version of our landscape image:

In both cases, the image sizes reduced significantly, the JPEG version dropped from around 12.5 MB to just over 7 MB; the PNG format shrunk from an enormous 25 MB to around the same size!

Note

To learn more about using the WebP format, take a look at the documentation on the Google Developers site at https://developers.google.com/speed/webp/.

Okay, time for another demo! Let's now make use of PostCSS to create our styles for both standard JPEG format, and WebP equivalents:

For this demo, we'll use the gulp-webpcss plugin, available from https://github.com/lexich/webpcss:

Go ahead and download a copy of the Tuturial23 folder from the code download that accompanies this book, save this at the root of our project area.
Next, go ahead and remove any copies of gulpfile.js and package.json from the root of our project area; we need to replace them with copies from the Tutorial23 folder.
With these files in place, we still need to install the plugins, in a Node.js command prompt window, change the working folder to our project, then run these commands, pressing Enter after each:
```
npm install --save-dev gulp-webp 
npm install --save-dev gulp-webpcss 
```
Note the order of the parameters in these commands, if they are written in a different order, they will not install.
Copy the style – pre-compile.css file from the Tutorial23 folder to the src folder at the root of our project area, then rename it as style.css.
Fire up a Node.js command prompt, change the working folder to our project area, then enter gulp at the prompt and press Enter.
If all is well, we should see the code shown in this screenshot when viewing the contents of the compiled file; the converted image will also appear in the img folder:
Copy the contents of the img folder into the img folder within the Tutorial23 folder.
Copy the style.css file from the dest folder into the css folder within the Tutorial23 folder.
Go ahead and run index.html in a browser, if all is well, we should see something akin to the screenshot at the start of this exercise.

If we run the same index.html in Google Chrome or Firefox, at first we should not see any difference—we'll only see the difference when viewing the compiled source within the Developer Toolbar in Chrome:

The real benefit, though, is in the img folder within our project area, the original JPEG image we use is 222 KB; however, the WebP is a fraction of this size: it weighs in at just 82 KB. See what I mean about the saving in space?

Okay, onwards we go: time to focus on another area of site building, which is manipulating colors. Colors play a key role within any site, as they make up a part of the message to the end user; let's dive in and take a look at some of the options available when using PostCSS.

Previous Chapter

Working with SVG in PostCSS

Next Chapter

Manipulating colors and color palettes

Table of Contents for Mastering PostCSS for Web Design

Adding support for WebP images

Switching WebP images in and out

Tip

Viewing the differences in file sizes

Note

Table of Contents for
Mastering PostCSS for Web Design