Web Image Formats & Google’s WebP

As the old saying goes, “A picture paints a thousand words”.

Visual appeal has become very important in a website. Today, images make up over 60% of the content on the internet. They beautify the content and tell stories. They give life to your website. They connect better with the users.

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

<img src="avengers.jpg">

Or maybe this

<img src="https://static.gamespot.com/uploads/scale_super/171/1712892/3367434-aiw_master-1-960x540.jpg">

which gives you 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. Optimization 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

Other less known image formats are WebP, BPG, HEIF, HDR Raster formats, EXIF 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!

1. JPG/ JPEG ( Joint Photographic Experts Group )

JPG is perhaps the most common image format used on the web. It’s highly compatible and enjoys a small file size with very little loss of quality. JPG images are saved using lossy compression, so there is always a loss of quality when using this format.

History lesson: Both JPG and JPEG is essentially the same thing. They are a type of file format for storing digital images. The reason for the different file extensions dates back to the early versions of Windows. The original file extension for the Joint Photographic Expert Group File Format was ‘.jpeg’; however in Windows all files required a three letter file extension. So, the file extension was shortened to ‘.jpg’.

JPEG files are usually used for photos on the web, as they create smaller files and can easily be loaded on a page. This reduces the rendering time of a website greatly and the pages load fast for the user. But JPEG files are bad for line drawings or logos or graphics, as the compression makes them look pixelated.

Variants of JPEG: JFIF, JIF, JFI

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

2. GIF (Graphics Interchange Format)

GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. It uses an 8-bit lossless format which supports a maximum of 256 colors.

A unique feature of the GIF format is its ability to be animated. A bunch of images can be “played” one after the another to give an animated, moving images look making it one of the most fun image formats.

This format is an excellent choice for limited color images that need to be small in size. Photos and full-color images saved in a GIF format will yield high levels of compression with a noticeable loss in quality.

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.

3. PNG (Portable Network Graphics)

It contains a bitmap of indexed colors and uses lossless compression, similar to a GIF file but without copyright limitations. It was created as an open format to replace GIF. It also allows for a full range of color and better compression. It is the most used lossless image compression format on the Internet.

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 there is 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!

Resources:

1. The place it all started: https://developers.google.com/speed/webp/
2. As always, here is the wiki link: https://en.wikipedia.org/wiki/WebP
3. Using WebP image format : https://css-tricks.com/using-webp-images/
4. https://www.sitepoint.com/webp-image-format/
5. Quick guide for implementation : https://cloudinary.com/blog/quick_guide_using_webp_on_your_website_or_native_apps
6. For FAQs, https://developers.google.com/speed/webp/faq
7. To read more on the compression techniques used, check out this link: https://developers.google.com/speed/webp/docs/compression
8. Here is a webP gallery which shows you images in jpg and webP formats. You can observe the image quality and file sizes for comparison: https://developers.google.com/speed/webp/gallery1
9. Comparative study : https://developers.google.com/speed/webp/docs/webp_study