Is WebP the image format of the future?

Is WebP the image format of the future?
There are many file formats you can use to publish images on a website, most of us are already familiar with JPG or JPEG.

Besides JPG, web designers also use PNG, SVG, even GIF if you are really old school. Currently, my gallery is still under development, not because of some missing HTML/CSS code or lack of photos but because of an investigation into image compression. As a photographer, the quality of my photos is prime, and I'm always searching for the best image compression without visible quality loss; that's how I discovered a new kid on the block: WebP.

New is a little bit relative because WebP was first announced back in 2010, and since then, it has been upgraded and improved until its current state.

Logo WebP
Logo WebP

What is WebP?

WebP (pronounced as “Weppy”) is a modern image format developed by Google. This format was designed to be used specifically for the web. WebP uses both lossy and lossless compression algorithms, which greatly reduces the file size while retaining the quality of the original image. Furthermore, WebP can have transparency and animation.

All common up-to-date Internet browsers support WebP, and if you are still using an old browser, my website provides a fallback to JPG. You can test this by saving the above image of this blog. Did you notice the extension of the image? If it has the *.webp extension, your up-to-date with your browser!

Compression Example

Let's take an example of a standard-sized JPG photo on my website of 1800x1200 pixels and see how well it will be reduced in file size. A good JPG compression method in Adobe Photoshop CS is typically 75%. If you read my Workflow/After The Shoot page, you know that I'm using JPEGmini Pro to reduce the size of all my published photos instead. For local storage, this is ok, but the size is still too big for a website.

Compression Chart
Compression Chart

Why is all this so important?

Because starting from May 2021, Google search will use website speed as a ranking factor. The smaller the images on a website in KiloBytes, the faster they will show on a slow Internet connection. So, if your website loads fast, Google will rank you higher!

How to save images as WebP?

Adobe Photoshop doesn't have the option to save an image as WebP, but luckily there is a free plug-in from Google called WebPShop to create them. You can download the plug-in here.

Because I'm using WP Rocket to cache and optimize this website, I don't need that plug-in, and WP Rocket provides an addon called Imagify. From now on, all my JPG images on this website are automatically compressed to the WebP format and showed to you if your Internet browser is compatible.

About
The Author
Is WebP the image format of the future?

Dirk Beckers is a hobby wildlife & nature photographer living in Antwerp (Belgium). Fujifilm is mostly the gear I prefer but sometimes Nikon has a place in my bag. Aside from some exposure, sharpening, noise reduction and basic colour corrections, I don't spend much time post-processing my photos. I believe that good photographs are accomplished outdoors, in the field, and not in front of the computer. That's the essence of my photography. Click here for more.