Why All of You Need to Know About the WEBP Image Format?
Do you want a fast website? Smooth website? Then you should care about WebP. It makes websites lighter and makes it faster. WebP combines the feature of PNG and JPEG. It is the new king of the image format.
What is WebP
This is an image format like PNG/JPG/GIF but it has more interesting features that make it more versatile. Actually, It was developed and released by Google.
Some of its main features are:
- It supports both Lossy and Lossless Compression. IF you don’t know what lossy or lossless mean, read my previous article
- WebP lossless images are 26% smaller in size compared to PNG and 25–34% smaller compared to JPEG
- Due to it’s a smaller size, a website with many images becomes lighter, faster, and SEO friendly
Let’s look at the image below.
The jpg version of the image is on the left side which weigh-in 1.3 Mb. The WebP version of the image is on the right side which weigh-in 430 kb. Can you believe this? There isn’t any noticeable difference between the two images until you zoom it in.
So, it’s clear that we can use WebP for reducing image size without losing much quality.
But rememer this, WebP isn’t replacement for JPEG and PNG images . All browser still don’t support WebP format. That is why you should also provide JPEG/PNG version of image in case user’s browser don’t support WebP.
How to convert images to WebP
There is numerous way you can do this.
- Online image converter: You can use some websites where you have to upload the image and convert it. After conversion, you have to download this file and use it in your project. I like https://squoosh.app/ this website for online image conversion. Keep in mind that after uploading the file, you may need to do some customization and choose the WebP as the output format.
- Software: Some software provides you to export a png/JPEG file in WebP format. You can try software such as Adobe Photoshop, Sketch, etc.
- Node JS: You can use the nodeJs script to convert any images to WebP. I mostly use “imagemin-webp” plugin to convert images to WebP.
- Gulp: Gulp is a task runner you can use. I find it most easy to use. But you must learn first how to setup gulp and use it. I mostly use “gulp-webp” plugin to convert images to webp. You can another task runner “grunt” to do the task
- Grunt: This is another task runner you can use
- Webpack: I don’t use this. But you can use it if you want
You can use any of the methods above to convert images to webp.
But a Problem!!!!!!!!!!!
As you know, all browser doesn’t support WebP format, that is why you need to give a fallback image in HTML. It is done to ensure that if any browser doesn’t support WebP, it will show the image in another format such as jpg/png.
Usually, we write like this
<img src="image/fish.webp" alt="brown fish" />
But if the user’s browser doesn’t support WebP, then he won’t see any images. So the solution is to use fallback images.
<source srcset="img/awesomeWebPImage.webp" type="image/webp"> <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
3 things happen here:
- A browser supporting Webp format will show the image in webp format from 1s source tag
- A Browser doesn't support WebP format will show the image in JPG format from the 2nd source tag
- Some browsers don’t support the picture element. They will show images from the img tag
Cons of WebP
- You have to use two sets of images. One in WebP format and the other in png/jpg format to ensure support of all browsers.
But, I think it has more advantages than disadvantages because it makes your webpage loading time faster.
Thanks a lot for reading my article. Please follow me for more articles in the future
Some other resources