​​Improve User Experience by Migrating to WebP

The WebP format, which has been in our lives since 2010, has recently started to make a lot of voice. If we look at the reasons; After the site speed became a ranking factor with Google’s statement in 2018, site speed and site performance entered the ranking of important items of SEO.

When it comes to visual optimization, WebP format has started to attract more and more attention day by day both by SEO agencies and brands, and its importance has continued to increase in the same direction. Today, we can easily say that the WebP format has become almost a necessity for anyone who cares about site speed and performance.

When you scan from the Google Pagespeed Insights tool, which allows you to analyze your site performance, it offers you “Publish images in next generation formats” in the opportunities section. For other items that affect site speed, you can read our blog What is Google PageSpeed ​​Insights. So what is WebP that Google directly recommends?

What is WebP?

WebP, announced by Google in 2010, is a new generation image file format that provides high saving, lossy and lossless compression for images on the web. The aim is to both preserve the quality of the image at a level that is invisible to the user when compared to other formats, and compress the images in a superior way in terms of size. WebP includes an alpha channel for transparency and hence being able to preserve the transparent background when compressing png images.

What are the Advantages of Using WebP?

• Images are very important for site speed and should be optimized. WebP is the majority’s choice, both because it’s a Google-supported format and because it saves more.
• When we compress WebP image, less image degradation than other formats.
• Any image format can be converted to WebP format.

WebP Supported Browsers

• ​Google Chrome
• Opera
• Microsoft Edge
• Mozilla Firefox

The browsers mentioned above are supported. So is this a problem? Yes, we can call it a problem, but it is a problem with a simple solution.

What Should We Do In Browsers That Do Not Support WebP Format?

There are 2-3 different ways to show our images in browsers that do not support WebP format, one of them is to write HTML code in a static way. Of course, since this is static, it is necessary to deal with all the images on the site one by one.

Sample HTML Code:

<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>

If you are using WordPress infrastructure, you have many options on this side;

1. Webp Express
2. EWWW Image Optimizer
3. WP Smush Pro

Similar wordpress plugins such as JPG or PNG will show the images you add as WebP in compatible browsers. In browsers that do not support WebP, the format supported by the browser will also show your images.

References:

https://inboundjunction.com/why-webp-is-critical-to-seo

https://www.theegg.com/seo/apac/image-seo-what-is-webp-and-how-to-implement-it/