Web Image Formats & Google’s WebP

Here is what MDN says about Images.

In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn’t too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage.

To display a simple image on a webpage, we use the <img> tag and write the source of the image in the srcattribute. Here is an example to add a simple image file in your HTML page

Or maybe this

That is it! It is just that easy to add a basic image in a web page.

But for advanced websites with lots of content and imagery, adding images to a page will bring about two main considerations:

  1. Choosing the correct format for your image content
  2. Optimisation of images

To start off, let’s consider the available web image formats. Here are some of the popular ones. These are the most well-known and most-used image formats: JPEG, PNG, GIF, BMP, TIFF, etc.

Let’s dive into the three big widely-used image formats (JPEG, GIF, PNG). And then we shall take a look at Google’s webP image format!

The Good: Versatile small file size
The Bad: Loss of details / quality
The Usage: Colorful photographs, images lacking details

The Good: Small file sizes, animation
The Bad: Loss of quality
The Usage: Icons, Logos, line drawings, and other simple images that need to be small.

For photographs, PNG is not as good as JPEG, because it creates a larger file. PNG is the best format for screenshots and most computers will save screenshots automatically as a PNG because most screenshots are a mix of images and text.

The Good: Versatile, supports transparency
The Bad: Larger file size
The Usage: Graphical elements

And then comes the WebP !

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WEBP (pronounced as “Weppy”) is an image format developed by Google. This format was designed to be used specifically on the web. WebP uses features of both lossy and lossless compression algorithms which greatly reduces the file size while retaining the quality of the original image.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index.

WebP takes the best parts of both the lossy JPG format and the lossless PNG format and makes them available in a compact file! It can be used on a number of graphical and translucent images and allows the user to adjust the degree of compression to make a trade-off between file size and picture quality. It is currently supported in Chrome and Opera browser.

So, how does one go about using this awesome image format? The answer is a two-parter.

Part 1: Converting images to the WebP format

  1. WebP’s Documentation provides access to pre-compiled utilities, libraries as well as a framework for converting PNG and JPEG images to a WebP image.
  2. Adobe Photoshop Plugin
  3. Android Studio
  4. A CLI tool for image formatting like ImageMagick
  5. An online converter

Part 2: Checking support for WebP format and then rendering successfully

  1. Modernizr is a JavaScript library for detecting HTML5 and CSS3 features support in web browsers. You can use properties such as Modernizr.webp, Modernizr.webp.lossless etc. to check and use the webP image.
  2. Polyfills — Here is a small WebPJS polyfill that supports WebP images without changing the syntax of image tags in the code.
  3. Another polyfill called Picturefill, allows using <picture> element in unsupported browsers.

All in all, it is very easy to convert images to the WebP format and start using them immediately.

The Good: Versatile, smaller file size, good quality images,
The Bad: Low browser support, under development, need backup images
The Usage: For almost everything!

In conclusion, the potential for WebP is huge!! WebP is such a versatile format that it can work its magic on all kinds of existing image formats to give smaller, good quality images. They help in loading the images on the web much faster, reduce the render time for the web pages and greatly improve the user experience with fast loading websites having beautiful pictures. The scope for enhancing user experience on mobile browsers using WebP images is tremendous!

References:

https://medium.com/udacity-google-india-scholars/web-image-formats-googles-webp-5a848d9d09ef

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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