The Startup
Published in

The Startup

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:

  1. It supports both Lossy and Lossless Compression. IF you don’t know what lossy or lossless mean, read my previous article
  2. WebP lossless images are 26% smaller in size compared to PNG and 25–34% smaller compared to JPEG
  3. 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.

  1. 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.
  2. Software: Some software provides you to export a png/JPEG file in WebP format. You can try software such as Adobe Photoshop, Sketch, etc.
  3. 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.
  4. 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
  5. Grunt: This is another task runner you can use
  6. 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.

<picture>  
<source srcset="img/awesomeWebPImage.webp" type="image/webp"> <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

3 things happen here:

  1. A browser supporting Webp format will show the image in webp format from 1s source tag
  2. A Browser doesn't support WebP format will show the image in JPG format from the 2nd source tag
  3. Some browsers don’t support the picture element. They will show images from the img tag

In HTML, it’s easy for you to use fallback images. But in CSS it’s a little complicated. You can use a javascript library called “Modernizr” to solve this. But I don’t think it’s necessary because. There is no feature which supports all browser. So, you can ignore the small portion of the audience. Otherwise, you can use ‘modernizr”.

Cons of WebP

  1. 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

  1. https://www.smashingmagazine.com/2018/07/converting-images-to-webp/
  2. https://github.com/imagemin/imagemin-webp#api
  3. https://developers.google.com/speed/webp/faq
  4. https://www.smashingmagazine.com/2019/10/speed-up-your-website-webp/
  5. https://web.dev/use-imagemin-to-compress-images/
  6. https://themeisle.com/blog/what-is-webp/
  7. https://css-tricks.com/using-webp-images/

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

How to Launch a White Label Payment Gateway

WARENA: NFT GAMING ON THE NEXT LEVEL.

Advanced Python: Abstract Base Class & abc Module

What’s New in C# 6.0

A Brief Introduction to Quantum computing using Qiskit

A Beginner’s Dive into GraphQL — Part 2 — GraphQL Schema, Field, Arguments, Aliases, and Fragments

Clever ways to learn Vim

Design Pattern Download: The Memento Pattern

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Md Shahab Uddin

Md Shahab Uddin

Sales and Service Engineer | Former Web Designer

More from Medium

Add a Map With a Point to Your Website

The Essential Meta Tags for Social Media in examples

Frontend Engineering Strategy

How to Make Your First Open Source Contribution