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.2 Creating WebP Files in Photoshop

In this lesson, you will learn how to use a free Photoshop plugin to convert your image files into the WebP image format.

Useful Links

2.2 Creating WebP Files in Photoshop

Hello, and welcome back. In this lesson, we're gonna take a look at a Photoshop plugin that we can use to convert our images into WebP or WebP images. And I'll include the URL for this plugin in the course notes for this particular lesson. And once you come to this page, if you scroll down to where this Ps icon is on the left, we can see some information about the plugin. You can even make some PayPal donations to the author in order to support the use of the plugin. But it is a free plugin, you can download it for free, and your download links are gonna be over here on the right. So if you're using a Mac, you're gonna use the second to last column here. I'm using Windows here, so I'm gonna use Windows 64-bit. So this is gonna download a Photoshop plugin file. And you'll just copy that file into your plugins directory for Photoshop. Once you copy that over to the plugins directory, then it's gonna be available for you in Photoshop and it's very, very easy to use. So what you're gonna wanna do is open up a JPEG file and I would not suggest trying to save a PSD file or a new file that you've created in Photoshop. I wouldn't suggest trying to save one of those as a WebP file because it doesn't work very well that way. It does a better job of converting existing files. So if you've built something in Photoshop, save it as a high quality JPEG or PNG first and then take that PNG file or that JPEG file, open it up in Photoshop and then convert it. And the way we convert it is very simple, we're gonna go to File, you're gonna notice I've got a simple JPEG file here. We're gonna go to the file menu. And since we have our plugin installed, when we go to save as, you'll notice we're not doing save for web, but when we do save as in our save as type dropdown, you'll notice we have two new options, WebP and WebP Lossless. And as we mentioned before, we can do lossy or lossless images with WebP, so we can treat our images just like a JPEG or like a transparent GIF or transparent PNG. If we prefer, the lossless version would be more like a PNG file. The lossy version, it would be more like a JPEG. So if you're converting a JPEG, you're gonna wanna use this top selection here. Now, let me go ahead and point out that I have not had a lot of luck using the lossless version with this particular plugin. I've seen other people use it successfully but I have not been able to use it successfully and there are no options for it. So it's not like I'm just choosing the wrong options, I just haven't had a whole lot of luck with it. But it's probably a good idea to keep your eye on this plugin because he's constantly working on it and improving it and the WebP version works really well. So we're gonna select WebP, we're gonna be converting our JPEG into a WebP file. And I'm gonna click on Save, and that's gonna give us this little pop-up with some options. So I believe by default, your encoding quality is gonna be set to around 75. I believe that's what it was set to when I first opened this up. You can usually get away with a little bit lower quality, I'm gonna set it to 70. And I'm gonna leave the rest of these options on their default, and I'm gonna click on OK. When we do that, I'm gonna jump into my file folder. And now next to my nature-10.jpg I also have a nature-10.webp file. And you'll notice you've got the Chrome icon here because Chrome is my default browser. And that is what is currently set up by default to open up webp files. Now, you can also open up webp files in Photoshop as well, so that option is available for you. But if we double-click on that, it will open it up Chrome, and we can see in Chrome just fine. So now, if I go into my sample files folder and hover over our JPEG file, you'll see that it was 479 kilobytes and the WebP file, if we hover over it is only 80 kilobytes. And there's no discernible difference in quality. If we were to copy this, open a new tab here, and then change this to .jpg and open up that image there. We can go back and forth between these two files. And usually, when you go back to a WebP file, sometimes you've gotta refresh the page to get it to show up. But if we look at the quality of this image, next to the quality of the JPG image, the JPEG has a little more detail. And then if you look really close, but the quality is not that much different. So we could go up on the quality of our WebP file here. And it would, especially in the deeper parts of the water, it looks a little fuzzier. So we could go back to Photoshop here and that's our Webp file. So let's open up our JPEG file. And let's save it again, but let's bump up the quality a little bit. So we're gonna go to WebP, click on Save. Yeah, I wanna replace the one that's there, and this time I'm gonna bring the quality up to about 80%. Click on OK, and then we'll open up that file, have to close the one that's there. Let's open up that file in Chrome, and I can see a little bit better detail. We could go up even higher on that if we wanted. Again, if we hover over that at this point, it's only 95 kilobytes. So it's still significantly smaller than the JPEG version of the same image. Now again, as I mentioned, this particular plugin for me hasn't worked very well at all with PNG files or with the lossless versions. So if we go to File > Save As, and then save it as WebP Lossless, you'll notice first of all that when we save that it as lossless, it doesn't actually change the file extension for us. We have to do that by hand. We're just gonna change that to .webp and click on Save. And if we close this and open up that file, that new Acme webp file here. If we open it up in Photoshop, it looks fine. However if I open it up in Chrome, you'll see it doesn't show up at all. And so I haven't had a whole lot of luck with the plugin as far as lossless images are concerned. But it does do a great job of converting lossy images. And in the next lesson, we're gonna take a look at a tool that makes this even easier that allows us to do it online. And these tool is actually created by Google itself. So as you can imagine, the results end up being a little bit better. So thanks for watching and I'll see you then.

Back to the top