2.1 What Is a WebP File?

Hello and welcome back. In this quick video, we're gonna talk about what a WebP file is. Now, most people are not gonna have a lot of exposure to a WebP file, but if you're a web designer or developer, they can come in really handy if you need to make your website run a little more smoothly. Now a WebP file, commonly pronounced as weppy, is an image format like a JPEG or a PNG. And the weppy image format was created by Google in 2010 and it was created for the sole purpose of creating images that were smaller in file size, without sacrificing image quality. The WebP format supports lossy and lossless encoding, so you can convert your JPEG files to the WebP format. You can also convert your GIFs and PNG files to WebP format. It also supports transparency, so if you're using transparent GIFs or transparent PNG files, you can convert those to WebP as well. So the WebP format is a very, very flexible image format and it does a great job at compressing file size. For example, whether you're dealing with JPEG or PNGs, your file size is generally gonna be about 30% smaller using the WebP format, given the same level of image quality. So one of the first questions that most web developers or web designers are going to ask, is how widely supported is this WebP format? After all, if we're serving up these images to our clients and our clients have browsers that don't support it, then we're kind of wasting our time. While most modern browser do support the WebP format and at any time you can go to caniuse.com and do a search for WebP and it will give you kind of the run down of what browsers currently support this format and what browsers don't. But it's important to remember that you cannot rely on WebP alone. We're still at a point where you're gonna need to supply either JPEGs or PNGs or whatever for fallback. And because like I said, not all browsers supported, but a lot of them do. So it's definitely worth using, but again, there's enough browsers out there that don't support it. That you do need to provide a sensible fall back. So again, as we mentioned before, we can convert our JPEGs, we can convert our PNGs images. And as you can see here, we have an image that is the same quality on the left and the right. One the left we have our JPEG format, on the right our WebP format. And this particular reduction and file size is much more significant than you would usually see. As you can see this particular WebP file is much more than just 30% smaller in file size. But this gives you the idea, if you're dealing with a high quality JPEG image, you can actually get the file size pretty low using the WebP format. So as we move forward in this course, we're gonna take a look at how to convert these images. We can convert using Photoshop plugins. We can also convert using some online tools that are free to use. And then we'll also talk about how to implement these images in your website. So thank you for watching and I'll see you in the next lesson.