Lastly, WebP also supports transparency, like PNG, and animation, like GIF, making it a versatile choice for various types of images. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

• In order to do this the WebP image format employs a more efficient compression algorithm.
• This makes WebP one of the most broadly supported next-generation image formats.
• In the above example, the visual differences are nearly imperceptible, yet the differences in file size are substantial.
• Also, ew need to select Drop Shadow to create a subtle shadow effect and I save it in PNG format.
• WebP allows websites to display high-quality images — but with much smaller file sizes than traditional formats such as PNG and JPEG.
• With significantly reduced photo and graphic sizes, websites load faster and give users a better experience.

Read next

Some programs (like Photoshop) get around this incompatibility with third-party plugins. However, some programs simply fail to recognize the WebP format at all. Fortunately, there is a way to convert WebP images into a format that does play nice with others. WebP images are also a good option if you’re trying to optimize your website to meet Google’s Core Web Vitals. If you’re getting warnings on your Core Web Vitals reports (or PageSpeed Insights or GTMetrix) to use next-generation image formats, WebP is one of those and is currently the best option in most cases. WebP images are smaller than their JPEG and PNG counterparts—usually on themagnitude of a 25–35% reduction in filesize.

Cons of WebP

WebP (pronounced Weppy) format is the sister project of WebM video container format—based on the VP8 video codec developed by On2 Technologies—released by Google. Google acquired On2 Technologies on February 19, 2010, then released WebP in September of the same webp vs png year. Lossless WebP compression uses already seen image fragments in order toexactly reconstruct new pixels.

Lossless compression

WebP images can average around 50% smaller in file size compared with a JPG of equivalent image quality—sometimes it’s more; sometimes it’s less, and it depends on the compression settings used. Of course, image quality is mostly subjective in the eye of the beholder, but here’s a couple of practical examples. I’m not putting these here as an extensive test of WebP vs JPG—that’s available elsewhere. Spatial prediction is used to reduce entropy by exploiting the fact thatneighboring pixels are often correlated. The image isdivided into multiple square regions and all the pixels in one square use thesame prediction mode.

How to Convert Images to WebP

On the other hand, the PNG file type is excellent for retaining high image quality due to its lossless compression. This format suits images that have a lot of pixels, like text-heavy infographics. It also supports transparency, which makes it ideal for web design elements and logos.

Google Chrome natively supports WebP, and other web browsers like Firefox, Edge, and Opera. However, it also encourages web developers and designers to first convert PNG and JPEG files to WebP to speed up page loading times. Note that converting a JPEG source to lossy WebP, or a PNG source to losslessWebP are not prone to such file size surprises. Yes, usually when converting from a lossy format to WebP lossless orvice versa. This is mainly due to the colorspace difference (YUV420 vs ARGB)and the conversion between these.

• As per Google, WebP lossless images are 26% smaller in size compared to PNGs, while WebP lossy images are 25-34% smaller than comparable JPEG images.
• Since most of the web pages use images as effective representation of data, the use of WebP images in web pages results in faster loading of web pages.
• Imagemin is the Swiss Army Knife of image processors in Node, but we’ll just focus on using it to convert all of our JPEGs and PNGs to WebP images.
• W3 Total Cache uses a third-party server for image conversion, which reduces resource consumption on your hosting environment.
• The diagram below illustrates the different prediction modes used in WebPlossy compression.

Images are compared based on the Structural Similarity (SSIM) index between WebP and other image file formats. WebP uses advanced compression techniques to achieve smaller file sizes. For lossy compression, it uses predictive coding to encode the difference between neighboring pixels, Software engineering which is more efficient.