What is WebPShop and how to use it

What is WebPShop and how to use it

Let's avoid unneccessary talks and intros and get more done in shorter time, agreed?

What is WebPShop?

WebPShop is new image format provided by Google and it aims for lower size images and higher loading speed of webpages in both mobile and desktop devices. We are literally moving from JPG,JPEG,PNG and GIF to WebPShop.

 

How to make(convert) our images to WebPShop?

Well based on what OS user you are there are some plugins for you, but before we get to that part here is fastest solution (online convertor) for you incase you're out of time or not having required softwares.

Now software solutions:

- Windows installation steps

  1. Download the plug-in (by example from GitHub),

  2. Copy the plug-in file WebPShop.8bi located in bin\WebPShop_0_2_1_Win_x64 to the Photoshop installation folder, usually C:\Program Files\Adobe\Adobe Photoshop\Plug-ins for x64.

  3. Restart Photoshop. "Open" and "Save" menu commands should now show WebP files.

- Mac installation steps

  1. Download the plug-in (by example from GitHub),

  2. Copy the plug-in WebPShop.plugin located in bin/WebPShop_0_2_1_Mac_x64 to the Photoshop installation folder, usually Applications/Adobe Photoshop/Plug-ins.

  3. Restart Photoshop. "Open" and "Save" menu commands should now show WebP files.

- Compiling on Windows with Visual C++

        1.Download libwebp-1.0.3.tar.gz from the downloads list and extract its contents.

        2. From the libwebp-1.0.3 directory, run:

nmake /f Makefile.vc CFG=release-static RTLIBCFG=static OBJDIR=output

        3. The directory output\release-static\x86\bin will contain the tools cwebp.exe and dwebp.exe. The directory output\release-static\x86\lib will contain the libwebp static library.

 

- Linux

       1. Install the libjpeglibpnglibtiff and libgif packages, needed to convert between JPEG, PNG, TIFF, GIF and WebP image formats.

      Package management varies by Linux distribution. On Ubuntu and Debian, the following command will install the needed packages:

 sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

    2. Complete the installation (see below).

 

Building

  1. Download libwebp-1.0.3.tar.gz from the downloads list.

  2. Untar or unzip the package. This creates a directory named libwebp-1.0.3/:

    tar xvzf libwebp-1.0.3.tar.gz
  3. Build WebP encoder cwebp and decoder dwebp:

    Go to the directory where libwebp-1.0.3/ was extracted to and run the following commands:

    cd libwebp-1.0.3
     ./configure
     make
     sudo make install

    This builds and installs the cwebp and dwebp command line tools, along with the libwebp libraries (dynamic and static).

    These tools are usually installed under /usr/local/bin/ by default. The local versions are built under the examples/ directory.

    The library will usually be installed under the /usr/local/lib/ directory. To avoid run-time errors, make sure that your LD_LIBRARY_PATH environment variable includes this location. The C headers are typically installed under /usr/local/include/webp.

 

- Converting Images to WebP with Node

Node.js is awesome, and for jack-of all-trades types such as myself, it's less about the fact that it brings JavaScript to the server, and more that it's a productivity tool that I can use while I build websites. In this article, we're going to use Node to convert your JPEGs and PNGs to WebP images en masse with the use of a Node package called imagemin.

imagemin is the Swiss Army Knife of image processors in Node, but we'll just focus on using it to convert all of our JPEGs and PNGs to WebP images. Don't fret, though! Even if you've never used Node before, this article will walk you through everything. If the idea of using Node bugs you, you can use the WebP Photoshop plugin and skip ahead.

The first thing you'll want to do is download Node.js and install it. This should only take you a few minutes. Once installed, open a terminal window, and go to your web project's root folder. From there, just use Node Package Manager (npm) to install imagemin and the imagemin-webp plugin:

npm install imagemin imagemin-webp

 

The install may take up to a minute. When finished, open your text editor and create a new file named webp.js in your web project's root folder. Type the script below into the file:

var imagemin = require("imagemin"),    // The imagemin module.
  webp = require("imagemin-webp"),   // imagemin's WebP plugin.
  outputFolder = "./img",            // Output folder
  PNGImages = "./img/*.png",         // PNG images
  JPEGImages = "./img/*.jpg";        // JPEG images

imagemin([PNGImages], outputFolder, {
  plugins: [webp({
      lossless: true // Losslessly encode images
  })]
});

imagemin([JPEGImages], outputFolder, {
  plugins: [webp({
    quality: 65 // Quality setting from 0 to 100
  })]
});

This script will process all JPEG and PNG images in the img folder and convert them to WebP. When converting PNG images, we set the lossless option to true. When converting JPEG images, we set the quality option to 65. Feel free to experiment with these settings to get different results. You can experiment with even more settings at the imagemin-webp plugin page.

This script assumes that all of your JPEG and PNG images are in a folder named img. If this isn't the case, you can change the values of the PNGImages and JPEGImages variables. This script also assumes you want the WebP output to go into the img folder. If you don't want that, change the value of the outputFolder variable to whatever you need. Once you're ready, run the script like so:

node webp.js

This will process all of the images, and dump their WebP counterparts into the img folder. The benefits you realize will depend on the images you're converting. In my case, a folder with JPEGs totaling roughly 2.75 MB was trimmed down to 1.04 MB without any perceptible loss in visual quality. That's a 62% reduction without much effort! Now that all of your images are converted, you're ready to start using them. Let's jump in and put them to use!

 

- Using WebP in HTML

Using a WebP image in HTML is like using any other kind of image, right? Just slap that sucker into the <img /> tag's src attribute and away you go!

<!-- Nothing possibly can go wrong with this, right? -->
<img src="img/myAwesomeWebPImage.webp" alt="WebP rules." />

This will work great, but only for browsers that support it. Woe betide those unlucky users who wander by your site when all you're using is WebP.

It sucks, sure, but that's just the way front end development is, so buck up. Some features just aren't going to work in every browser, and that's not going to change anytime soon. The easiest way we can make this work is to use the <picture> element to specify a set of fallbacks like so:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

This is probably your best best for the broadest possible compatibility because it will work in every single browser, not just those that support the <picture> element. The reason for this is that browsers that don't support <picture> will just display whatever source is specified in the <img>tag. If you need full <picture> support, you can always drop in Scott Jehl's super-slick Picturefill script.

 

- Using WebP Images in CSS

 

The picture gets more complex when you need to use WebP images in CSS. Unlike the element in HTML which falls back gracefully to the <img> element in all browsers, CSS doesn't provide a built-in solution for fallback images that's optimal. Solutions such as multiple backgrounds end up downloading both resources in some cases, which is a big optimization no no. The solution lies in feature detection.

Modernizr is a well-known feature detection library that detects available features in browsers. WebP support just so happens to be one of those detections. Even better, you can do a custom Modernizr build with only WebP detection at https://modernizr.com/download, which allows you to detect WebP support with very low overhead.

When you add this custom build to your website via the <script> tag, it will automatically add one of two classes to the <html> element:

  1. The webp class is added when the browser supports WebP.
  2. The no-webp class is added when the browser doesn't support WebP.

With these classes, you'll be able to use CSS to load background images according to a browser's capability by targeting the class on the tag:

 

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

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

That's it. Browsers that can use WebP will get WebP. Those that can't will just fall back to supported image types. It's a win-win! Except...

 

- What About Users with JavaScript Disabled?

If you're depending on Modernizr, you have to think about those users who have JavaScript disabled. Sorry, but it's the way things are. If you're going to use feature detection that can leave some of your users in the dark, you'll need to test with JavaScript disabled. With the feature detection classes used above, JavaScript-less browsers won't even show a background image. This is because the disabled script never gets to add the detection classes to the <html> element.

To get around this, we'll start by adding a class of no-js to the <html> tag:

<html class="no-js">

We'll then write a small piece of inline script that we'll place before any other scripts:

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

This will remove the no-js class on the <html> element when parsed.

So what good does this do us? When JavaScript is disabled, this small script never runs, so the no-js class will stay on the element. This means we can can add another rule to provide an image type that has the widest support:

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

This covers all our bases. If JavaScript is available, the inline script is run and removes the no-js class before the CSS is parsed, so the JPEG is never downloaded in a WebP-capable browser. If JavaScript is indeed turned off, then the class is not removed and the more compatible image format is used.

Now that we've done all of this, these are the use cases we can expect:

  1. Those who can use WebP will get WebP.
  2. Those who can't use WebP will get PNG or JPEG images.
  3. Those with JavaScript turned off will get PNG or JPEG images.

Give yourself a hand. You just learned how to progressively use WebP images.

 

 

Sources:

Google Developers

css trick

tjd studio

Leave a comment

Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.