What is the WebP format and what are its advantages?

NicolasBrondinBernard

Author
@NicolasBrondinBernard

WebP images are all over the web, but why? What are the advantages, the specifics, and the drawbacks?

Article published on 20/11/2023, last updated on 10/08/2026

WebP is an image format optimized for the web, created by Google and adopted by the majority of browsers.

Compatible at 96.88% (excluding Internet Explorer)

This file format isn't very different from classic image formats (JPEG, PNG, GIF, etc.), but it brings together many advantages, including being much lighter!

The data contained in a WebP file represents a matrix of pixels (unlike vector images such as SVG).

So what are the advantages of WebP?

An optimized and versatile image format

If we had to sum up the WebP format in a few words, we could say:

The perfect blend of JPEG, PNG and GIF

In reality, the WebP format is defined by the following "features":

  • Support for transparency
  • Animations
  • Highly efficient "lossy" compression
  • Option for "lossless" compression

But the real strong point of WebP is the optimization of its compression method, which allows for an average file size saving of 40%, without any visible loss in rendering.

WebP limitations

The format doesn't suffer from major limitations, however we can mention the fact that files are limited to a resolution of 16383 pixels by 16383 pixels.

Which isn't really a problem since this format is designed for the web, and it's generally a bad idea to publish such large images

Another constraint, even though it's not actually tied to the format itself, is that most social media platforms don't display WebP images for shared links, with open-graph, so remember to favor JPEG for this use case!

Converting an image to WebP

Even though it's a non-technical constraint, it's also worth noting that some interface design software (notably Figma) doesn't natively support WebP export, but there are free plugins, such as this one.

But you can also use the convertio website (free), or command-line tools!

Examples

The image used as an example is a city panorama, with a resolution of 1280 pixels by 720 pixels, along with the format and file size for each example.

JPEG

File size: 288KB (Reference)

buildings-1850129_1280.jpg

PNG

File size: 1.18MB (+320% compared to JPEG)

buildings-1850129_1280.png

WebP

File size: 251KB (13% reduction compared to JPEG)

buildings-1850129_1280.webp


Finished reading this article?
Our newsletter

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

Comments (0)

to leave a comment

No comments yet