Ditch JPEGs and PNGs for WebP

Introduction

Currently, we are used to using PNG and JPG file formats for all things design. However, for more than a decade now, there is another option that is just as good, if not better. Let me introduce you to WebP (pronounced webppy)

What is WebP?

WebP is an image format developed and first released by Google in 2010. It supports encoding images in both lossless and lossy formats. In short, it is a good alternative format to both PNG, JPEG, and GIFs.

What do lossy and lossless mean?

The big words in the definition were lossy and lossless. In the context of how it relates to data compression, they are actually quite similar in meaning. Whilst lossless deals with removing metadata from a file, lossy refers to removing other data from the image file.

Consequently, if you apply lossless data compression, the image quality stays the same but the data size goes down. If you apply lossy data compression, the image quality goes down slightly along with the data size which would have reduced significantly.

Why use WebP?

Why do you even need to bother changing your file formats? Well, if for nothing at all, change it for the following reasons.

• It improves site performance

If your site is image heavy, then improving site performance can easily create optimized WebP alternatives for their current image alternatives. WebP images are much smaller than their JPEG and PNG counterparts. They usually reduce by a magnitude of 25–35% in file size!

This is huge savings that you can reap from the speed you could get from your site. Which in turn would be substantial. All this translates into your site running faster and taking less data at the same time.

• It is supported by all major browsers.

It is supported on all the latest versions of Chrome, Safari, Microsoft Edge, Firefox, and Opera. It gives support for WebP animation, WebP lossy, lossless, and alpha support.

• It supports both transparency and animation.

There is no need to save your GIF, JIFF, and PNG files separately. Before WEBP we needed GIF files for animation and PNG files for transparency in files. The good news is that WebP supports both.

• It is backed by Google.

Google did not become an internet giant overnight. It helped with the development of the internet and its progression from infancy to date. Like all things to be backed by Google, such as the Go language, Google Maps, and Gmail, you know that this file format is going to be a mainstay on the web for decades to come.

Usage

You can use Photoshop to save your files in a . WEBP format. Afterward, use the <picture> tag. This is an example below.

Before WEBP we would have done

<img src="eli.jpg" alt="Eli photo">

Now, we can do that.

<picture>  <source type="image/webp" srcset="eli.webp">  <source type="image/jpeg" srcset="eli.jpg">  <img src="eli.jpg" alt=""></picture>

Explanation

The <picture> tag provides a wrapper for zero or more <source> tags and one <img> tag.

The <source> tag specifies a media resource.

The browser uses the first listed source that’s in a format it supports.

If the browser does not support any of the formats listed in the <source> tags, then it falls back to loading the image specified by the <img> tag.

Congratulations, with this simple implementation, you have WebP implemented on your site! Is this not great !

How to change your files to WebP

Now, you are finally convinced. How do you go about converting your existing files to WebP? There are 3 options you have.

• Use a GUI tool.

There are a lot of GUIs which allow you to upload a PNG or JPG file. You can then easily use these tools to convert the files to a WEBP file format.

• Use Photoshop.

If you already know how to use Photoshop, then it is awesome. Simply import the file and export it to a WebP file format.

• Use the binary file.

If like me you prefer working in terminals, then download the binaries from Google.

Head over to the link below.

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

Place the binary files in environmental variables. You can also specify the full path to the executable file. For instance, this would give something like below;

C:\libwebp-1.1.0-windows-x64\bin\cwebp.exe -q 80 eli.jpg -o eli.webp

In the command above,

the -q flag means quality

the -o flag refers to the output.

All the possible combinations flags can be seen with the -longhelp flag.

Conclusion

To end, it must be said that WebP is not a replacement for JPG and PNG. However, it is still very much welcomed. Go ahead using PNG and JPG images if you must.

However, WEBP is the next generation of file formats which should be encouraged among designers and web developers. Therefore, the next time your website designer wants to upload a whole bunch of files onto your site, ask him if they have already been converted to WebP. Tell him we have gone past the days we worked in JPG files. There is a lighter format out there that he can use.

Thank you and until later keep learning.