WebP versus PNG

What is WebP?

WebP is a modern image format developed by Google that offers lossless and lossy compression. WebP images are typically 25% smaller than comparable PNG images, making them faster to load and saving bandwidth costs. WebP is supported by Google Chrome and Chromium-based browsers, Safari, and other web browsers, making it an increasingly popular choice for speed and SEO optimisation of modern websites.

How is WebP different from PNG ?

WebP uses an advanced predictive encoding that enables it to compress images far better than PNG with even better quality.

What does this mean for you?

• Lossless WebP images offers smaller(25%) file sizes and higher quality when comparing with PNG.
• Both lossy and lossless WebP images support transparency, resulting in files up to 3X smaller than PNG
• WebP images can be animated, while P?G images cannot.
• WebP supports lossless compression, meaning no information is lost when the image is compressed.
• WebP images load faster than PNG images, meaning your web pages will load faster

SEO and WebP

In the fight over better SEO and Google ranking, WebP can be a great weapon. Google promotes the use of WebP on webpages to improve SEO scores, although not yet widely applied.

WebP impacts both your page load speed and Largest Contentful Paint (LCP), both of which are important signals used by Google's ranking algorithm

Together with optimising image sizes, usage of WebP images is truly low-hanging fruit when it comes to SEO optimisations.

How to get started with WebP

There are several ways you can start using WebP formats:

1. Convert all of your source images using Google's command-line tools or any third-party conversion software. This approach might be feasible if you have a small number of images to convert
2. Export all new images as WebP from your Graphics software ((For Figma a plugin is required)
3. Use Mighty Image to convert images to WebP on demand without having to touch any source images. Together with on-demand resizing to optimal images sizes, this is a cheat code for SEO optimisation