Description
You can grab the batch file here.
Transcription
Earlier this year, I was looking at my web application and looking for ways to improve performance, which is something I do fairly regularly, and it occurred to me that was I still using JPGs and PNGs as an image format in my application where I could have adopted Google’s new WebP format. Now, Google’s WebP format is superior because with smaller sizes, which you see here, 26% smaller in size compared to PNGs, and 25-34% smaller than JPGs, I could pass those savings onto my users – it would mean they would have less to download when using my application, and thus things would just be a quicker, a better experience for them.
So when this opportunity became clear to me, I went on Google’s website that you see right here, scrolled down, and then in the WebP Converter Download section, I found this link to the Linux, Windows and MacOS executables, and here I went down to libwebp windows x64, downloaded that, and then I extracted it on my C: drive, okay? So what’s important here is that this package comes with cwebp, which actually does the conversion from JPG, PNG, and TIFF also, it seems, into WebP. I really needed it for JPG and PNG.
So, like I said, I extracted it onto my C: drive, and the location that I placed it in is right here. And if you look here, you see the file in question, cwebp.exe, and in the article here you can also tell that dwebp.exe decodes them back into PNG, for example. That’s cool, but I wouldn’t really need it – because what I needed was a one-way conversion from the archaic format of JPG/PNG, to WebP.
Now that the tool is here, let’s get a sense for how it works. Cwebp.exe -help. Okay. So here we see the syntax. It says Cwebp, then you can put in some options. But it also says -q, quality, and if you look below it says where the quality is between 0 for poor, or 100 for very good, and a typical value should be around 80, okay? So the lower the value, the worse the image is going to look, probably. And then after that you see the input.png, so that’s the file you want to convert. And then, -o, and then a space, and then another file, output.webp. So this is a really clear syntax.
So we can go ahead and actually test this – there’s a few ways to do this, but I’ll start by just doing it manually. So I’m going to start by going to the root, then go to Users, then go the current user, the Desktop, and then go to the Images folder. And… here we are. So that’s the Images folder on my desktop, here, you can tell there’s 3 files in it, so JPG, a JPG, well, basically 3 JPGs, and they’re 2.4, 2.3, and 2.2 megs each. So let’s try to use this Google tool to make them smaller. Because we’re in this folder on the desktop and my executable is on the C: drive, we’re going to actually path to it, right? So I’m going to go here C:, libwebp, then it’s going to be bin, cwebp.exe.
So that should be it, as a test I’m just going to say help, there you go, you have the actual output. Then I’m going to press up arrow to make the last command come up, and now using the instructions on the screen, let’s test it! I’m going to type q, quality we’re going to do 80, because that’s what they recommend – um, or they say it’s around 80 typically. And then after that I’m going to point to a.jpg, the output should be a.webp. And I’m going to press ENTER – and if I did everything right, okay, so you see it processed it, the file, the dimensions, block count, okay… and I’m going to go take a look now because we’re still in the same directory, right, so I’m going to press dir.
Okay, so this is pretty good, you see it went from 2.4 megabytes to 0.5 megabytes, that’s a pretty good gain, so let’s take a look at the images folder through Windows, and if I take the image and throw it in a browser, you’ll actually see it. Okay, so this is what it looks like. But we’re actually looking at a webp image right now, that’s what we’re doing.
Okay, so back to command prompt. That’s nice and all, very useful tool, but my web application had hundreds of images, so how am I going to convert hundreds of images. Well, I have a little surprise here, I wrote a quick batch script, it’s really nothing amazing, but let me delete this webp. I wrote a quick batch file, I’ve posted it to my GitHub, so that anybody can download it, here’s what it is called. I just wrote cwebp-all-files-in-folder, and as you can tell, let’s go back to command prompt here, we’re still in the Images folder, okay? But now we have a script. So I will just do cwebp, tab to complete, press ENTER and you actually see, it’s processing them all. It says 3 files have been processed.
So I wrote this quickly so that it would convert all my JPG images to WebP. For my latest code check out the link in the description, you can download the same batch file and see the source code. But it’s super simple, and like I said, it’s kind of dumb, I just did it quickly so that I could solve my problem, I didn’t make it the most flexible script there is.
That’s how I used Google’s cwebp.exe to convert all my images from the JPG format and PNG format, that I used in my web development project into WebP so that my users could get a performance benefit.
Another way I can run the script I just showed you is by simply going to the images folder on my desktop, hovering on it, holding SHIFT, right-clicking, and then click Open PowerShell window here. This opens up a PowerShell window in the exact location I specified, the Images folder. So now what I can do is just type the same command, directory, to see all my stuff. I don’t have to do this, but it’s just to show you, I’m in the right place. The next thing I can do is simply type .cwebp, tab, okay, to complete the filename and just press ENTER, and you’ll notice this runs the same script. So that’s just another way to do it.
If you have any questions or comments, don’t hesitate to reach out, I’m here to help.