In fact, according to Google, WebP lossless images are 26 percent smaller than PNGs, and lossy images are as much as 34 percent smaller than JPEGs. The go-to solution is to utilize image compression, which reduces file sizes enough to shave off some load time. Image compression can be either lossless, which preserves all information in the original image, or lossy, which deletes some file information in the compression process. This “loss” reduces file size more than lossless compression, but it also lowers image quality. Whether this drop in quality is noticeable depends on the extent of the compression applied. This is a new format that supports lossless and loss compression quality for images on the Internet.

A key Google ranking factor is the size and number of images, which is also a key reason why visitors will bounce off your page. Thanks to image compression, websites can deliver image-heavy pages to visitors’ browsers in seconds or less but at a loss of image data. To use WebP images on your website, you need a CMS — like Webflow — that supports WebP.

+200 Formats Supported

This implementation is considerably simplified when using image CDN’s where the Accept Header and content negotiation (e.g. auto-format and quality) can serve the best image. ShortPixel counts each WordPress image size that you optimize as a credit. So if you want to optimize multiple image thumbnail sizes, one image could conceivably use numerous credits. Most modern browsers and WordPress 5.8+ support WebP out of the box.

The extension supports JPEG, WebP, and PNG formats, so you can download any format you wish. If you are not interested in taking that route, follow the next workaround. To reach its large user base in emerging markets where data is expensive, Facebook started serving WebP images to Android users. They observed, “data savings of 25 to 35 percent compared with JPG, and 80 percent compared with PNG”. Modern versions of Chrome (Chrome 94+) do support AVIF progressive rendering while older versions do not. While at the time of writing there isn’t an encoder that can make these images easily, there is hope this will change.

WebP Tooling And Support

And despite all the convoluted technical details, for anyone who posts pictures online, WebP is a big deal. Though this could change in the future, you should know this limitation. If you want to serve WebP images on your site, consider storing extra PNG/JPEGs for users of these browsers. Image viewers like Adobe Acrobat and Apple Preview also do not support WebP.

Considering the great effect on loading times, virtually any site or social media can benefit from WebP format. Not supported by all browsers—Although WebP has the lion’s share of browsers, there are still some that don’t support it . So in this guide, we explain everything you need to know, what it is, how to use it and why you should care. We’ll explain the WebP pros and cons and then show you how to convert your other image formats. WebP might not be a household name like JPG or PNG … at least, not yet. However, this compression technology is being adopted by image-heavy blogs and business sites (including this one!) to better serve visitors and cut down on load times.

Lossy File Format

In my opinion, the AVIF offers the overall smoothest experience of all three. See the Pen Image format comparison 2a by Addy Osmani.We can also look at lower-quality across each format, which is really where WebP and AVIF shine. If both AVIF and WebP are not viable options, consider evaluating MozJPEG , OxiPNG (non-photographic https://wizardsdev.com/en/news/webp-or-png-to-choose/ images), or JPEG 2000 . AVIF is a solid first choice if lossy, low-fidelity compression is acceptable and saving bandwidth is the number one priority. Optimole has a limited free plan that can handle serving images to around ~5,000 visitors per month. After that, paid plans start at $19 per month for ~25,000 visitors.

Even though it is smaller, it maintains a high level of quality. The quality setting used when encoding need not be the same for different formats to yield the same quality of images. A JPEG encoded at a quality setting of 60 may be similar to an AVIF at a quality setting of 50 and a WebP at a quality setting of 65, as suggested by this post. You can view WebP images easily by opening them in a browser that supports them. Additionally, you can also preview them on Windows and macOS using an add-on.

Key features of WebP image files

In a nutshell, WebP is an image format developed by Google to optimize images better than popular image formats . The tencent data is from 2014, but the Google data is even older – 4 and 5 years old. More broadly, their projects usually have a Mac monoculture, and they end up not testing enough on Windows machines, so I expect surprises when it comes to webp and Windows.

We have not included other formats like JPEG XL and HEIC in this comparison. JPEG XL is still in a relatively nascent stage, and only Apple devices support HEIC . Compression for photographic and non-photographic images may further differ based on the fidelity of the images. Some CDNs do not yet support AVIF by default for their automatic format modes because it can still be slower to generate on the first request.

Uses for WebP

Libavif is an open-source muxer and parser for AVIF used in Chrome for decoding AVIF images. You can use libavif with libaom to create AVIF files from original uncompressed images or transcode them from other formats. There is also Libheif, a popular AVIF/HEIF encoder/decoder and Cavif. Thanks to Ben Morss, libgd supports AVIF and is also coming to PHP in November. Your WordPress site’s images make up a big part of the file size of an average page.

• For more tactics to optimize images, check out our full guide to optimize images for web performance.
• Due to its compression benefits over JPEG and PNG, Many large companies use WebP in production to reduce costs and decrease web page load times.
• As with any online file conversion tool, you shouldn’t upload any sort of sensitive or confidential file.
• Enable WebP supportYou must do this, only if you have customized the list of supported file extensions.
• This script will convert the files in the images directory and save them in the compressed_images directory.
• RIFF containers are very lightweight, with an overhead of only 20 bytes .

Setting up a website to serve WebP images is beyond the scope of this post, and, frustratingly, it’s more complicated than it should be. And smaller files bring many benefits on the web, such as faster websites and less bandwidth used. WebP compatibility with web browsers has increased, but it’s still not universal. While most browsers have gradually added support, Internet Explorer and Safari are still holdouts . And it’s not a typical choice for sharing images in other ways. This means you can have high-quality images without affecting your website’s speed.