Complete Guide to Using WebP Image Format

Example:

WebPonize is probably the simplest and fastest way to convert images to WebP format on the Mac. All you need to do is just drag and drop your images into WebPonize and it’ll do the conversion. You will receive the ouput, the before-size, after-size and the % of reduction of the original file. [Download WebPonize]

  • WebP goes by the file extension of .webp.
  • WebP adopts both lossy and lossless compression.
  • WebP lossy images are potentially 25-34% smaller than JPEG.
  • WebP lossless images are potentially 25% smaller compared to PNG.
  • WebP supports lossless transparency, i.e. PNG with alpha channel.
  • WebP supports animation. i.e. animated GIFs.

On a side note: Here are the different filesizes if the same image was converted to the following formats:

An Experiment

cwebp -q 80 example.png -o example.webp 

II – Covert WebP image files back to PNG

For Windows Users, WebPCodec will display a thumbnail preview of WebP images in File Explorer. Both the WebP and JPEG equivalents will be shown. On certain supported Window OS (Vista, 7, 8), the WebP image can be shown on the Windows Photo Viewer as well.

Finally, the same image is converted to WebP format. Final filesize
70kb
.

jpeg original

If you’re not looking at installing any applications on your operating system to perform this task, opt for these online tools instead. Here are a few that I’ve come to know:

jpeg optimized

If you’re already on board and would like to start releasing images in WebP format, let’s dive in and look at how you can convert your images easily to this format. All the methods mentioned below vary in terms of controls, ease to use, and conviniency. Pick your poison.

jpeg webp

Tip: If you google convert webp online , you will probably find more options.

  • GIF – 285kb
  • PNG 8 – 241.2kb
  • PNG 24 – 657.6kb

(2) Launch Terminal.

Note: The following guide it for Mac OS X. For Windows and Linux users, click here.

png original

If you’re running Windows, Webpconv is the app you should install. It also comes in portable version so you can run it independently on your flash drive. [Download Webconv]

Here are the commands to:

Image is optimzed with JpegMini. New filesize – 101kb.

webp format

If you are feeling geeky, you may probably want to excute the conversion using command lines. cwebp converts your JPEG, PNG, or TIFF images into WebP format and dwebp converts them back to PNG format. Let’s see how this works.

You can preview WebP images on Chrome and Opera browers. But if you want to do it locally on your machine, you will need a few tools.

Now, let’s try with PNG with transparency. (Source). Original filesize – 587kb.

  • Original filesize – 6.8mb
  • WebP filesize – 6.3mb

Summary:

WebP, or unofficially pronounced as weppy, is an image format introduced by Google Developers around 5 years ago. if you are a web designer, or a developer who strives to reduce and optimize your image file size, what WebP is capable of should put a smile on your face.

  Lossy (JPG) Lossless (PNG) Animated-GIF
Original 165kb 587kb 6.8mb
Optimized with tools 101kb 278kb
WebP format 70kb 112kb 6.3mb

It’s always a good idea to use a fallback to avoid showing image errors due to unsupported browsers. In this case, the fallback will be to the image in JPG or PNG format. Here’s how you do it.

Converting to WebP with Tools

Mac Users can use WebPQuickLook to preview WebP format images using the Quick Look function (with the image selected or highlighted, press the spacebar).

Let’s see how an animated GIFs fare:

(4) Next, type "sudo port install webp" and hit enter. This will install libwebp (WebP Library).

webponize

That’s it. Now let’s take a look at how to convert images to WebP using command line.

(3) Type "sudo port selfupdate" and hit enter. This will update your MacPorts to the latest version.

webpconv

Converting with Command Lines

When converted to WebP, a JPEG image went from 165kb to 70kb, while a PNG image went from 587kb to 112kb.

Example:

Setting up MacPorts on Mac OSX

3. Animated GIF

Webpconv for Windows

png optimized

In a nutshell, WebP is capable of significantly reducing JPEG, GIF, PNG’s image file size. Here’s a refresher on WebP you should check out before we go into the fun stuff.

sudo port selfupdate

First up, make sure you have Xcode installed.

sudo port install webp

Without dwelling much in mathematical calculations, those figures indicate substantial reduction of file sizes, and judging from the images, you can’t really tell the difference in terms of clarity and resolution. Smaller, lighter file sizes with the same level of image quality, WebP is definitely worth looking into.

Commands to convert/Revert

1. JPEG – Lossy Image

Note: Just thought you should know that I tried it on Photoshop CC. Didn’t work there.

dwebp image.webp -o image.png 

More: If you perfer conversioni via other means, here are instructions for using Grunt and Gulp tasks to convert JPG/PNG files to WebP.

Not so much luck for FireFox and Safari, which still do not support WebP format natively. However, you can use WebPJS Javascript library to convert WebP images into dataURI string on the client site.

I – Convert JPEG / PNG image files to WebP format

And lastly, the image converted to WebP format. Final filesize – 112kb.

The best things about claims on the Web is that we can always run experiments to check out the truthfulness and authenticity. Here are some experiments I did to find out how small an image can potentially get after they are converted from various image formats (JPEG, PNG and GIF) to WebP.

Here’s a table to summarize the entire experiment:

Convert With Online Tools

Here’s a random JPEG image I grabbed from Pexels. Original filesize – 165kb. ↓

  • Online-converter.com
  • Webp-convertor.com
  • Zamzar

Lastly, let’s talk about compatibility. Currently, you can view WebP format images on the following browsers (ref):

Photoshop Plugin

WebPonize for Mac

(1) Download and install MacPorts. If you already have MacPorts installed in your Mac, proceed to step 2.

photoshop plugin

WebP Browser Support

 <picture> source srcset="example.webp 1x" type="image/webp"> <img src="example.jpg"> </picture> 

For this code, example.jpg will be loaded if the user used Firefox or Safari.

  • Chrome / Chrome for iOS
  • Opera / Opera Mini
webp browser support

More: ReSCR.it delivers images in WeBP format automatically and it’s available if you store your images with MaxCDN. (Read more)

Fall back to other image formats

2. PNG – Lossless Image

Format:
dwebp [WebP_filename] -o [PNG_filename]

Previewing WebP images

Here’s the image optimized with tinypng. New filesize – 278kb.

You may be glad to know that there is also a Photoshop Plugin that allows you to save images to WebP format via Photoshop. This plugin supports Mac OS X (CS 2- CS 6) and Windows (32 bit & 64 bit). [Download the plugin here.]

WebPQuickLook

In brief, here are some of the important stuff you need to know about this not-so-new-but-still-cool image format:

WebPCodec

Format:
cwebp -q [image_quality] [JPEG/PNG_filename] -o [WebP_filename]

Further references

  • Converting Animated GIF to WebP
  • How WebP works
  • Deploying WebP via Accept Content Negotiation
  • Faster, smaller and more beautiful web with WebP
  • Deploying New Image Formats on the Web
  • WebP API Documentation


Leave a Reply