Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:8Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Creating WebP Files With Squoosh

In this lesson, I will introduce you to the Squoosh app, a tool that allows you to easily convert your images to WebP files online—for free!

Useful Links

2.3 Creating WebP Files With Squoosh

Hello and welcome back. In this lesson, we're gonna take a look at a website called squoosh.app, and this website was created by Google. And it's created to convert images and compress them. And one of the formats we can output to when we use this app is WebP. And as you can imagine, since Google created this website, this app does a really, really great job of converting and compressing these files for us. So let's test out squoosh.app. I'm going to grab the same file we've been working with, this nature-10.jpg file. I'm just gonna drag it onto the website, and that will upload it for us. And one of the things I really like about this website is this little bar here that we can drag back and forth. And when we do that, everything we see on the left is gonna be the original the image that we uploaded. And everything to the right of this bar is going to be the compressed version, the converted version. So right now, we're actually converting it to a MozJPEG format. So this is just gonna be a JPEG file. And as you can see, this website does a pretty good job of compressing this file. We've got it down to 68.6 kilobytes from an original size of 491. We do see some pixelation in the water. A picture like this, again, is you're not gonna notice the pixelation as much as you would maybe in a picture of some people or something like that, just because of the nature of this image. But if you look closely, there is a lot of pixelation in the water. But overall, it does a really good job of compressing, so we could even bring that quality up and see a better version. But we're here to talk about WebP, so let's change our compression method, excuse me. We're gonna change this from MozJPEG to WebP. And you'll notice there's also a Browser WebP at the very bottom as well. You can play around with both of those to see what the difference is. I haven't noticed a huge difference there. But I'm just gonna chose WebP, and we can see a lot of pixelation in the water if we look really closely. But it does a good job of bringing that file size done. If we bring the quality up to maybe around 80%, it starts to look a little bit better. File size is still a very manageable file size. And the results you get with this, whether or not you use WebP versus JPEG, it's really just going to depend on the image you're using. Sometimes a JPEG is gonna look better. Sometimes WebP is gonna look better. So it's just trying to find the right balance of file size versus quality. But again, the WebP format is a very, very efficiently compressed, I should say. And we can get some good results this way. So if we download this file now, and then let's drag it into our sample files folder. And let's just replace the one that's there. And then we can double-click on that new one, and it'll open it up in Chrome for us, and everything looks good. Now another great thing about this app here is that it does a much better job with the lossless images. So if we go back, and then from our sample files folder, I'm gonna grab this PNG file. And I'm not going to provide these files as a project files folder. We don't really need that for this course. So just grab any transparent PNG or transparent GIF file that you have, and pull it in, and drag it into the Squoosh editor. And first of all, you'll notice that again, by default, it's using JPEG. So it doesn't want to respect our transparent background there. But if we change the file type to WebP, you'll notice that it does handle transparency just fine. And again, since this is a PNG file, I want this to be lossless. So I'm gonna check the lossless check box there. And then again, anything on the left is the original, anything on the right is the new version. And I don't see any difference at all. We can see we got it down to 10K here, which is a really nice file size. And once we're happy with it, we can just click on the download button, and it will download that WebP file for us. So then I want to drag that into our sample files folder. And this time, this is where we're gonna see the real difference. I'm going to open this up in Chrome. And we see that it is does actually open. When we tried to do this with Photoshop, and we converted it to a WebP file using Photoshop and then tried to open it in Chrome, we didn't see anything. But when we use the Squoosh editor, everything seems to compress just fine, and it's able to open up in Chrome without any issues. And there we go. So that's how you can use the squoosh.app website to convert your images, whether they're lossless or lossy images, whether or not they have transparent backgrounds. That's how you can do that on the Web for free. Thank you for watching, and I'll see you in the next lesson.

Back to the top