Using WebP for SEO in 2023

Should you care about WebP image updates to boost SEO?

Google has shown a pattern of disliking pages with slow loading speed across the web. It wants websites to improve all possible aspects that might reduce loading times, so that every millisecond can be reduced, leading to a better user experience. Core Web Vitals and all of their page metrics are part of that plan to look at every aspect of web fundamentals (look out devs).  

A major component of slow loading times can be unoptimized images. “Optimization” is not just the inclusion of alt-text, but offers multiple responsive options in a file extension and size that is appropriate for the user. 

This is where WebP image optimization comes in to gives JPG, PNG, GIF and all their friends, a run for their money.

What is WebP?

Google created WebP to replace other file formats like JPEG, PNG etc. It offers better loading times while keeping the following features:

• Image compression (Lossy and lossless)
• Animation capability
• Transparency

If you care about increasing your sales and revenue, you should care about WebP. Why? Well, increased performance in Search Engines can lead to better rankings, more traffic, more customers and higher sales. 

WebP vs PNG vs JPG vs GIF vs SVG

Yes, PNGs are most sexy, however, they are highest in loading times in web browsers, and hence worst in search performance. JPEGs are better and perform much better than PNGs on web pages. However, a JPEG image, when converted to WebP has it’s size reduced by 26-30% compared, and a PNG 3 times (if it’s a similar transparent image). 

Check Google’s tests here. Yes, this is worth looking into immediately. 

Have a look at the following table for the comparison between the file extensions:

	WebP	JPEG	PNG	GIF	SVG
Lossy compression	✔️	✔️	✔️	❌	✔️
Lossless compression	✔️	✔️	✔️	✔️	✔️
Transparency	✔️	❌	✔️	Binary	✔️
Animation	✔️	❌	❌	✔️	✔️
Vector	❌	❌	❌	❌	✔️
Preferred by Google for SEO	✔️	❌	❌	❌	❌

How to convert images to WebP

You need to tell your web designer to output all web images in WebP for your website. 

Steps to WebP conversion:

1. If you want to convert your files using Adobe Suite, look at the question below for instructions.
2. If you want to convert online, you can see the list of tools in 3rd question below. 
3. To convert using these tools, simply upload your image to these websites and press convert, and voila! Your image is ready for downloading (and reuploading for use).

 

How do I convert images to WebP in Photoshop?

Photoshop now offers native support for WebP images since Photoshop version 23.2. Users using 23.1 and before, can download a plugin here and then open, create and output images in WebP. 

Can I bulk convert my images using some method?

Yes, Google offers a tool that you can convert your images. Check the details on their list of precompiled tools, and you can use this guideline to learn more about how to convert your images. You will have to use commands to do this (this is slightly complex and you can take your dev’s help).

Is there an online tool I can use to convert my images?

Yes, there are many good online tools. We like Online-Convert, CloudConvert and SwooshApp. CloudConvert doesn’t compress images by default. You will need to play with the quality (read the settings) and maybe you can achieve the file size you want.

How Google does WebP

We stalked Google to see if they used their own file formats, and Bingo! They did use them. We went to their Store and looked at images uploaded to their products, such as the Google Pixel 6. Google was offering multiple responsive options to users in WebP.

So we can see that Google implements it’s own recommendations, and it always told us that it’s own website also compete for SEO among the web. This means Google means business about implementing Webp. 

What are the problems with WebP Optimization?

As it is a new file format, developed about ~10 years ago, very old browsers and systems might not support it. According to CanIUse.com, an estimate of 94.25% global users can surely use WebP and see it’s images, the rest of the minority will not be able to see them. 

However, there is a solution for the dated minority (that may not be your ideal customers anyway): You can tell your developer to offer multiple options to users, as we can see in this case:

Both JPGs and PNG options are being offered to users in Source Set for <picture>. 

WebP Image Optimzation: Best Practices

In this course for developers, Google talks about the variety of ways images are treated on the web. Performance-wise, Google mentions the importance of Lazy Loading images to reduce the number of image requests made while page rendering. This will be done using the loading=“lazy” tag on images.

The way to reduce CLS (Cumulative Layout Shift) is either though CSS or through specific heights and widths of images. Read more in this section of the course.

You can also improve performance by using CDN (Content Delivery Networks). A CDN is a network of servers located in different geographic locations worldwide that work together to deliver content, such as images, videos, and other static or dynamic files, to end-users. When a user requests content from a website, the CDN delivers the content from the server closest to the user, reducing latency and improving website performance. Learn more on how to use Content Delivery Networks for Images to increase your website performance and achieve higher rankings.

Looking for next steps? Talk with your strategic SEO partner or in-house development team. Don’t fall behind taking seconds off your page loading times with WebP.

Frequently Asked Questions:

How to upload Webp images to wordpress?

WordPress supports Webp format by default. You can simply drag and drop, or manually upload your Webp files onto your wordpress media library to place your images in your posts and pages.

How to upload Webp images to contentful platform?

Contentful also natively supports WebP images, so you can upload your WebP images like normally and display them to your users.

How to convert Webp files to ico file format?

You will have to use an online converter to do this. CloudConvert offers this online conversion service online. Visit there website here.

How can I open Webp file online?

You can open your WebP images inside your web browser. To do this, you can simply drag your webP image to your browser or right click and open it with the browser (e.g. Chrome). There are online editing tools available for opening and editing WebP images.

If I have thousands of images on my site, how can I convert them to WebP safely? 

You will need to use one of the tools given by Google, or use a plugin to convert these files to WebP in a folder, and then use the new URLs. Remember, if you convert and show your new files, you will need to use a 301 redirect to properly transfer SEO signals to the users, because otherwise your images may drop from Google rankings.

Momin Malik

Momin Malik is Senior SEO Consultant and Project Manager with experience in optimizing search engine rankings for B2B SaaS clients. He believes a deep understanding of search engine algorithms and data-driven strategies is important to drive measurable results. Here he posts his musings to help viewers understand Search and manage SEO and Web projects.