How To Optimize Images with WebP Format

Do you own a website ? If you have a website, or any business that is running online, or even a blog for that matter, you should make sure the site runs fast and the users can access it without any waste of time. 

Load time of a web page matters in the online business., Lets say you have a great website with colorful images, and really nice design and rich use of JS animations. It'd take hell amount of time to load the page and the user who's trying to visit your website, gets annoyed by the time that it takes to load and it'll lead you to a heavier bounce rate which will kill your blog/website rating at any time.

I was just surfing the web recently and I found something called "webp" format which is a modern image format with the tagline "lossless and lossy compression" for images on the web. I couldn't help but write about it in my blog here.

It's been said that WebP images are 26% smaller in size when compared to PNG images.

You can read more about how webp works here

WebP format is natively supported in Chrome, Opera browsers.,

In this post, we'll tell you how to use webp format to optimize the images for your website/blog in the following steps.

Step 1: 

I'm guessing you've followed the google webp link to know a bit about the format. Now, lets download the precompiled version of the tool that we'll use to convert any image to webp format with lossless and lossy compression.

Download the precompiled version of the tool here

Choose your platform - Windows, Linux or Mac OS and download the files.

Step 2 :

Extract the zip/tar file, copy and place it anywhere you feel convenient. In my case, I'd place it in my C drive.

So, now the path of the files in my system would be "C:\libwebp-0.5.0-windows-x86" 

Step 3 :

Once that is done, go inside that folder "libwebp-0.5.0-windows-x86" in your drive that you've copied it to.

Now, lets copy an image that you want to compress and check if its actually working. Copy a bit bigger sized image and place it inside "bin" folder which would be like below

"C:\libwebp-0.5.0-windows-x86\bin\image-to-be-compressed.png"

Step 4 : 

This is a bit trickier part yet you can do it even if you're not any sort of developer, or just someone who knows to operate basics of command prompt.

Open your command prompt and navigate to the installed folder. Check out the screenshot that is attached below to make sure you're on the right track.

Once you're inside the bin folder in your command prompt, run the following line

"cwebp yourfilename.JPG -o webpfile.webp"

If you've done that correctly, you'd see the below screen.

Now if you check the size of the image that's been created, you'd be amazed of how much smaller the image size you get out of it without losing its pixel sizes and quality.

There's a reason why the webp format is being said to be "lossless and lossy" . You can even convert back from webp format to any other format such as PNG, JPG etc, with "dwebp" command. 

Checkout the parameters that you can use with "cwebp" command - cwebp command

Checkout the parameters that you can use with "dwebp" command - dwebp command

That's it. you can do the image compression with just one command without using any photoshop tool.

P.S - Do comment below to let us know how did it go or even if you get stuck somewhere.,

Photo Credit : Flickr