WebP Image Format Complete Guide to Using

WebP Image Format Complete Guide to Using

WebP, or unofficially declared as weppy, is an image format introduced by Google Developers around five years before. If you are a web designer and a developer who strives to overcome and optimize your image file size, what WebP can put a smile on your face.

In summary, here are some of the vital stuff you want to know about this not-so-new-but-still-cool image format:

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

Within a nutshell, WebP can significantly reduce JPEG, GIF, PNG’s image file size. Hither’s a refresher on WebP you should check out before we go into the entertainment stuff.

An Experiment

The best thing about claims on the Web is that we can always run experiments to check out the truthfulness and authenticity. I did some experiments to determine how small an image can get after converting from different image formats (JPEG, PNG, and GIF) on WebP.

1. JPEG – Lossy Image

WebP Image Format Complete Guide to Using

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

WebP Image Format Complete Guide to Using

Image is optimzed by JpegMiniNew filesize – 101kb. ↓

Lastly, the same image is converted to WebP format. Final filesize –

 70kb. ↓

WebP Image Format Complete Guide to Using

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

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

2. PNG – Lossless Image

 

READ MORE :  Top Best 15 LetMeWatchThis Alternatives Sites

Now, let’s try with PNG with transparency. Original filesize – 587kb. ↓

WebP Image Format Complete Guide to Using

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

WebP Image Format Complete Guide to Using

And finally, the image converted to WebP format. Final file size – 112kb. ↓

WebP Image Format Complete Guide to Using

Animated GIF

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

Let’s discuss how animated GIFs fare:

  • Original filesize – 6.8MB
  • WebP file size – 6.3MB

Summary:

Here’s a table to summarize the whole experiment:

   Lossy (JPG) Lossless (PNG) Animated-GIF  

  Original 165kb 587kb 6.8mb  

  Optimized with tools 101kb 278kb –  

  WebP format  70kb  112kb  6.3mb  

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

Converting to WebP with Tools

If you’re now on board and would like to begin releasing images in WebP format, let’s dive in and see how you can convert your images quickly to this format. All the ways mentioned below vary in terms of controls, easy to use, and convenience. Pick your poison.

WebPonize for Mac

WebPonize is probably the easiest and fastest way to convert images to WebP format on the Mac. All you want to do is just drag and drop your images into WebPonize, and it’ll do the conversion. You will receive the output, the before-size, after-size, and the % discount of the first file. Download WebPonize

WebP Image Format Complete Guide to Using

Webpconv for Windows

If you’re working on Windows, Webpconv is the app you must install. It, too, comes in a portable version so that you can run it alone on your flash drive. [Download Webconv]

WebP Image Format Complete Guide to Using

Converting by Command Lines

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

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

Setting up MacPorts on Mac OSX

Head up, make sure you have Xcode installed, then follow these steps:

  1. Download and install MacPorts. If you now have MacPorts installed in your Mac, continue to step 2.
  2. Launch Terminal.
  3. Type “sudo port selfupdate” and hit enter. This will update your MacPorts to the newest version.
  4. Next, you type “sudo port install webp” and hit enter. That will install libwebp (WebP Library).WebP Image Format Complete Guide to Using

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

Commands to Convert/Revert

Here are the commands:

I: Convert JPEG / PNG image files to WebP format

Format:

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

Example:

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

II: Covert WebP image files back to PNG

Format:

 dwebp [WebP_filename] -o [PNG_filename]

Example:

dwebp image.webp -o image.png

More: If you prefer conversion via different means, here are instructions for doing Grunt and Gulp tasks to convert JPG/PNG files to WebP.

Convert With Online Tools

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

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

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

Photoshop Plugin

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

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

WebP Image Format Complete Guide to Using

WebP Browser Support

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

  • Chrome / Chrome for iOS
  • Opera / Opera Mini

WebP Image Format Complete Guide to Using

Not so much opportunity for Firefox and Safari, which yet do not support WebP format natively. You can use the WebPJS Javascript library to convert WebP images into a data URI string on the client site.

Fall back to other image formats

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

source srcset=”example.webp 1x” type=”image/webp”>

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

Previewing WebP images

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

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

WebP Image Format Complete Guide to Using

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here