Hi everyone. In this video we're gonna look at WebP. What is it? You've probably seen it around, some of you won't. We'll quickly cover what it is  and I'll show you how to get that format out of Figma. Basically, it's a replacement for JPEGs and PNGs.

They're super awesome. And if you haven't already,  you'll be asked to supply images in this format soon. So let's jump in. Alright, first up,  if you haven't been introduced to web p uh,  images, now what are they? They're just a new version of JPEGs and PNGs. Is it the replacement for them?

Kind of is. I'm working on websites that are pulling out all JPEGs  and PNGs and replacing them with Web P  because they are smaller, better quality  and at one format will do like lossy format like JP is. You can get the quality down if you need to,  okay, save some kilobytes. But it also has transparency like p and Gs  and it also has a lossless format. Not gonna go through too much what Lossy and Lossless is. And I guess all you need to know is that you are going  to be asked more and more to supply web P images  onto your developers.

'cause Web P is awesome. So at the moment  there's no native support. So I've got this image here. If I go to export at the moment,  have a check just checking your new version where  that Web P is an option. If it's not like in mine, okay, there is a plugin to fix it. There's always a plugin.

Um, the best one here  that I've been using is Tiny Image Compressor. Okay, run that. Okay? And it's going through your document  and looking for everything that you have said to export. So if you're not seeing anything in here, you need to go  through and say Ro on that image  and over here in your properties, uh,  panel in your properties inspector, go to export  and just add anything on there. Now that it is tagged for export, you should be able  to refresh this and it should appear in this list here.

It's there. What I'm gonna do is I'm gonna use this one. If you select something, it should appear just here. And what I'm gonna do is up the top here,  this little settings option, this will change your plugin  that you might be using changing. But basically what you're looking for is, I think  by default in this particular plugin,  it's no image conversion and then it goes out to jpeg. And then the second option is jpeg and PNG to Web P.

There's a lot more detail you can go into,  but that's what I want for the moment. The other cool thing about it is you can decide whether you  play around with the quality, okay? So say you want it to be this size, but about 60%, okay? In terms of the uh, lossy format, okay? You can drag the quality up and down like a jpeg, okay? And the basic rules is about 60% is normally pretty good.

If it's a bad image, you might have to lower it up. When I say bad, it's just poor quality. But if it's commercial photograph,  you can probably get it down to 60  and nobody will notice the difference. Do some tests, see what works for you  and the images that you've got. Let's hit export. Okay, I'm gonna throw it in there.

And that's what we're looking for. That web P format,  it's very happy with itself. Okay? So it saved a whole bunch. I, I picked the biggest image I found  in your exercise files. The other cool thing about this particular plugin  that I really like is you can set it to target size.

Okay? And you can say, actually I don't want you  to pick a quality. I want you to try and get it to 200 kilobytes. Let's say that's the biggest this image can be,  or you know, from your developer  or your experience that you know you need images  to be at 50 kilobytes. You can do that and it will keep that size and try  and stay under 200 kilobytes, which is super cool. And the thing we might do though is it's using the actual  size that it put it in the document.

Mine's massive look, it's  ginormous compared to the rest of it. So what I might do is match my height of 8 4 4,  which is my mobile device, okay? And then now refresh the list. Okay? And then it's gonna export it at 200 kilobytes at that size. Definitely fit inside of my uh, phone frame,  but only be 200 kilobytes.

That's cool. Alright, so that is exporting WebP. Actually you can do it from Photoshop at the moment as well. Okay? It is not perfect yet. Check.

'cause what I really want to do is I want it  to be under Photoshop and to be under export  and I want to say export as that's where I want it to be. That's the best kind of way of getting images out  of Photoshop for web. Okay? Check up here. Okay? At the moment there's no web p I'm hoping it will be soon.

Okay? The reason I like this is  that you can have multiple sizes in here, okay? Like you can do in Figma, okay? So it'll export R one size, uh, two x  and you can decide on its final size. 'cause at the moment this is very big. What we can do is we can say over here on the way out,  rather than resizing in Photoshop,  we can say actually you are a height of 500  and we'll export all the different sizes we need,  but that's not there at the moment.

We can get it out using the save as. So I just went file save as. Okay? And there is a web P option in there at the moment. They just put that back in recently into the junk drawer,  the messy, messy drawer, okay? And over here, similar sort of features as that plugin.

If you're more of a Photoshop person,  Lossie is gonna lower the quality. But often unnoticeable lossless means you cannot  remove any of the quality. Just make it Web P. Alright? So that is getting your file formats into Web P. Just a handy thing for people who haven't experienced Web P,  now they're becoming more and more popular.

And I know if I'm producing a website now  or graphics for a website, they have to be WebP  because Google likes it. They load real fast and they look great. Alright, that is it for WebP. If that plugin's not working  or you know of a better plugin, let me know in the comments. And if you're watching this video, check the comments,  see if there is something better,  especially if tiny images not around anymore. Alright, that's it.

I'll see you in the next video.