What Is a WebP Image? A Guide for Designers

By on Jun 8, 2021 in Inspiration
What Is a WebP Image? A Guide for Designers

Are you tired of poor-quality images turning up during your Internet searches? If so, then a WebP image is just the answer you’ve been waiting for. This revolutionary image format for the web has been around for a few years already, but it’s making greater inroads with web browsers and users as of late.

The benefit of this kind of image format doesn’t only relate to aesthetics and what’s crisper to look at. It also relates to the speed of websites, as using this format speeds up the web as a whole. This is especially important today because more people than ever—including your clients and leads—are performing searches on mobile devices, where speed matters more than ever. Overall, using WebP means an overall superior user experience (UX) for everyone involved.

Feast your eyes on this deep dive into better-than-usual lossy and lossless compression.

A brief background on the WebP image format

Called a modern image format by Google, WebP’s purpose is to make the jobs of web designers and developers easier when it comes to designing better experiences for their audiences. Since the Internet is very image-heavy (visual content dominates so much of cyberspace), this focus on improved UX is centered on reducing the time it takes to load images. As a result, the end users (read: people visiting websites) get to enjoy higher-quality pictures without sacrificing website speed.

That’s because this type of image relies on two forms of compression (decreasing the size of a data file by using fewer bits than the original):

  • Lossy compression
  • Lossless compression

Lossy compression, also known as irreversible compression, refers to an algorithm whereby the original data or image is only reconstructed approximately, while still allowing for better compression rates and smaller data sizes.

In stark contrast with this, lossless compression—as the name already indicates—is compression that doesn’t sacrifice anything in the compression process. In other words, the compressed picture or file is a perfect reconstruction of the original.

Processing your images on the web through these algorithms ensures that the images you peruse on the web are both better-looking and smaller in size than the formats you’re used to encountering, such as:

  • JPEG
  • GIF
  • PNG

For comparison’s sake, consider the following: A WebP lossless image is going to be smaller in size than a PNG image. Put up next to the JPEG format, a WebP lossy image will be between 25% and 34% smaller in size.

As you can see, from the size comparisons alone, this Google format offers designers and developers a significant decrease in size from the traditional formats. This reduced size means that sites and browsers have to work less intensely to load images, leading to quicker load times and an overall faster UX.

Where did this format come from?

As we mentioned earlier, WebP image support is technically not a new thing. The format has been around for several years already, but it’s recently made more inroads that have allowed it to become more popular than ever.

Google publicly announced WebP Image extensions in September 2010. At the time, it was a brand-new open format designed to process true-color, lossy-compressed graphics on the Internet. The format was based upon technology that Google acquired from a small company called On2 Technologies (which it bought out).

More than a year later, in October 2011, Google decided to release the Extended File Format. This considerably upped the application of WebP by allowing the following support for:

  • Animation
  • XMP (Extensible metadata platform for the building, processing, and exchanging of custom and standard metadata for both digital data sets and documents)
  • ICC Profile (a set of data meant to colorize a color output or input device based on standards established by the International Color Consortium)
  • Exif metadata (Exchangeable image file format, which is the standard that sets out the formats for the sound and images used in smartphones and digital cameras)

It’s important to note here that animation support permitted, for the first time, the ability to convert older, animated GIFs into newer, animated WebP images.

Before the end of the year, Google would make additional moves to broaden this new format’s appeal.

In November 2011, a new lossless compression was introduced, as well as support for transparency in lossy and lossless modes. Another way to look at transparency is alpha compositing, which is the procedure of blending one image with the background to create the perception of either full or partial transparency. The same month, Google determined that converting PNG to WebP produced a 45% decrease in the size of files, when starting out with PNG files found on the Internet.

Let’s fast-forward to July 2016. Apple jumped on the bandwagon by adding WebP image support to its early beta versions of both macOS Sierra and iOS 10. Interestingly, though, this support was subsequently removed in the macOS Sierra and iOS 10 GM seed versions. However, by September 2020, Apple finally decided to add WebP image browser support to its Safari version 14.

Here’s another eye-opening stat for you: As of early 2021, Google’s new image format is supported by 92% of the browsers used around the world. That’s not a bad adaption rate when you consider that it was initially deemed to be difficult or even impossible to compete with the reigning image standards, JPEG and PNG, when Google debuted WebP more than a decade ago.

As of this writing, there are numerous browsers that supported this new form of image compression. Check below to see if you’re already using a compatible browser.

For WebP Lossy Support:

  • Firefox 65+
  • Opera 11.10+
  • Microsoft Edge 18+
  • Google Chrome Desktop 17+
  • Google Chrome Android 25+
  • Native browser, Android 4.0+

For WebP Lossless, Lossy, and Alpha Support:

  • Firefox 65+
  • Opera 12.10+
  • Microsoft Edge 18+
  • Pale Moon 26+
  • Google Chrome Desktop 23+
  • Google Chrome Android 25+
  • Native browser, Android 4.2+

For WebP Animation Support:

  • Firefox 65+
  • Opera 19+
  • Microsoft Edge 18+
  • Google Chrome Desktop and Android 32+

After reading this far, you have an appreciation for the two top benefits, better quality, and faster Internet speeds, that WebP grants your UX. You may now be asking yourself how to convert an image to WebP. That’s what’s coming up in the next section.

How to convert an image to WebP

If you want to change over your images to Google’s faster format, you have a few options at your disposal, most of which are relatively pain-free (read: efficient).

The most straightforward way is to probably go straight to the source of this format, which is Google itself. On the company’s Google Developers Precompiled Utilities WebP page, you can find the necessary resources to convert an image to WebP. Whether you’re starting out with PNG, TIFF, or JPEG, you can convert your entire set of images to the new format. Simply download the precompiled cwebp conversion tool that’s available for Mac OS X, Windows, and Linux.

You can also download the dwebp conversion tool, which does the opposite: It converts your images from WebP back to PNG, for example.

Whichever your need is, Google Developers provides detailed instructions on each conversion direction on its Getting Started page.

Of course, you can also skip reliance on Google for your image conversions and go straight to image converters that are free to use on the Internet.

For instance, a quick Google search for a query like “convert image to WebP” will return many image conversion tools in the top results. Here’s a quick rundown of some of them:

  • Cloud Convert’s WebP Converter — This converter works with all sorts of files, including—but not limited to—HEIC, WebP, GIF, JPG, and PNG. The process is simple. All you have to do is select in the dropdown fields what format you want to convert and then choose the format destination from the dropdown menu. The converter does the rest for you, quickly and easily.
  • Online-Convert — Online-Convert is another efficient way to take care of your conversions. Just upload the file you want or insert a link to your image. Then, click “convert file.” Your file will be changed over to the new format immediately, allowing you to then download the new WebP image as soon as it’s ready.
  • EZGIF’s Online JPG to WebP Converter — Designed exclusively for JPGs that you want to transform, EZGIF prompts you to upload the right image from your computer or else provide a link to the image’s URL. Whichever user flow you choose, click “Upload!” to initiate the conversion process. As soon as the new image is ready, it’ll show up in the field below the call to action. Note that you can also use the navigational tabs above to scroll between different conversion options.
  • Convertio’s Image Converter — Meant to help you tackle a multitude of image conversions, Convertio also offers a Chrome extension. If you’d rather convert directly on the web, just choose the right file from a number of locations and begin the process. Convertio supports an astounding 11,331 image conversions, including JPEG and PNG to WebP.
  • WebP Converter — A converter that makes the process direct and easy, WebP Converter only requires you to upload your starting image format from your computer. Unlike the other conversion tools, you get to play around with a couple of options, such as the quality of your image during the conversion and whether you want to convert it into a lossless format and/or preserve its metadata. After you’ve made these choices, just click on “Convert!” and you’re good to go.
  • Free Convert’s WebP Converter — A file converter that supports more than 500 formats, this tool removes as much friction as possible when transferring between image formats. Start by choosing your file from a number of locations. Click on “Convert” to initiate the change. After the conversion is finished, download the new image to save your new file.

Actionable workarounds to work with WebP in unexpected ways

Despite its now almost universal applications, there are times when Google’s new image format won’t be automatically supported by specific apps or programs. For example, if you’d like to work with the new format in one of the more popular image tools like Microsoft’s default Windows Photo Viewer…well, you can’t, right off the bat, anyway!

You’ll have to incorporate a number of workarounds to make this happen.

For example, the classic Windows 10 Photo Viewer is deactivated by default when you’re using Windows 10. You’ll first have to enable the Photo Viewer in Windows 10 to take advantage of these higher-quality images if you’re on a PC. When you activate the classic version, you should succeed in opening WebP pictures in Photo Viewer without having to bother with installing a plugin or a codec.

Another route would be to use ImageGlass, which is an open-source image viewer. This free image viewer does support WebP, and one of its benefits is a UX and UI that are comfortable.

Still, another option is to just rename your image files to PNG or JPG. Alter the WebP extensions at the end of the names of your image files (if you’re starting with WebP images) to PNG or JPG. So, for instance, if your file name ends in .webp, rename it to the .jpg or .png extension. Now, you’ll be able to open these converted files with the Windows Photos app.

Finally, you can use Paint program in Windows, the Chromium-based Edge, or Chrome itself to open WebP images when you’re on Windows.

The Windows default Photo Viewer app is one of the last holdouts standing in the way to universal WebP adaption. Whether it’ll eventually follow suit is anyone’s guess, but the aforementioned workarounds should be satisfactory and empower you to still work with WebP images even if you’re on PC.

What is a WebP image? Now you know.

You likely have encountered this new image format when surfing on the web for many years already, without knowing it. Whether on Google Images or on your favorite websites, WebP is the new standard that Google has been pushing on users for the better part of the last decade. Its adaption rate strongly suggests that it’s beneficial for site visitors (as well as site owners) who are looking for higher quality images and faster loading times, which lead to better UX.

Only time will tell if Google’s new standard will completely supplant the old-guard formats like JPEG and PNG. What’s for certain at this point is that designers and developers enjoy working with WebP for the same reasons that users enjoy visiting sites that use this new standard: sharper images to look at combined with an overall, faster web experience.


Products Seen In This Post:

Launch with confidence.


Download your checklist

img

Download your checklist

A handy checklist for your new site

Check off these items before you go live and make sure that your visitors get the best possible experience.

No Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →