How To Serve Images In WebP Format In Blogger

WebP is a new image format that allows websites to compress their images without losing quality. Learn how to add support for WebP in your blogs!
How To Serve Images In WebP Format In Blogger

Optimizing Images are essential for any website owner because they make up to 80-90 percent of a website's total page size and are its most crucial component.

When I looked at one of my websites in the Google page speed tool, I saw a chance to make it faster by serving images in “Next-gen Formats.” 

You should serve images in next-gen format to make your blogger website load quickly. In this article, you will learn how to upload a .webp image to a Blogger post or page to speed up the load time and improve the health of the website.

What Is WebP Format?

WebP is a newer version of an image format that can be used to reduce the size of an image file while keeping the quality of the pixels the same. By putting images in the WebP format on your blog post or page, your website will load faster and use less bandwidth.

WebP, which was first introduced in 2010, can use both lossy and lossless image compression to produce richer and smaller images without slowing down a website's loading time.

According to Google – 

When you use the webp image format, you can get lossless images that are 25% smaller than png images and 25% to 34% smaller than jpeg images.

Why Do Bloggers Need To Serve Their Images In Webp Format?

Here, let's look at an example to see what I mean. Let's copy this site's Url and check how fast it loads in the google page speed insight.

By analyzing the above url we know that images take up about 216KB of a page, which is 296KB in total size.

If we do the math, this means that images make up about 72% of the size of the whole page. That's why optimizing images should be the first thing you do before anything else.

Because of this, you need to use the next-gen image format on your website and set up lazy load images on your blogger website.

How To Convert Images To Webp?

There are several ways to convert JPG or PNG images to WebP images. You can use the online tools, software, or an application (APP) on your device.

By Using An Online Tools

To convert your existing images to webp, search Google for "webP converter", and you will see a long list of websites.

I'd instead use the CloudConvert. Here, you can change your JPG, PNG, GIF or any type of images to webp images, which are smaller in size and have better quality.

Here, you can either upload the image from your computer or type in the image's URL. The image will then be automatically converted to webp format, and you can easily download the new image to your computer.

Using A Computer Programme

I will suggest you to use this method if you have a computer or a laptop because it saves your time, and you don't have to upload images anywhere  to compress them. And you can also change all your pictures to webp format by selecting them at once.

There is a software that anyone can use for completely free. After downloading and installing this software, right-click on the image, and you'll see the option to convert your file.

Download Software

How To Serve Images In Webp Format In Blogger

To use webp images, convert your existing images to webp and then upload the image using the classic blogger upload tool. After you've uploaded the image, switch to HTML view and look for the image URL.

The image URL looks like this by default, as shown in the URL below.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaz1atCf_sRSVwepsVkRL3T56jeHmYNCDDHcyEiqeVhR7m_kCXQ4D6HFFS33u1cwQRpMApXsdX7yC1M9bpEk9kj4PSEkCkMMOtWaEVtMWtePcSQZoPBUs_AAcQ0shGncYvUSu6V92NZPlG9yDkvW8KbyVQ9-99vxQ-KEK_9f78MvBObmCGbjiCn1GR/s16000/File%20Converter.webp

To serve the image in next-generation format, you must slightly modify the Image URL.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaz1atCf_sRSVwepsVkRL3T56jeHmYNCDDHcyEiqeVhR7m_kCXQ4D6HFFS33u1cwQRpMApXsdX7yC1M9bpEk9kj4PSEkCkMMOtWaEVtMWtePcSQZoPBUs_AAcQ0shGncYvUSu6V92NZPlG9yDkvW8KbyVQ9-99vxQ-KEK_9f78MvBObmCGbjiCn1GR/s16000-rw/File%20Converter.webp

You just need to add -rw after s16000 in the image URL, Blogger will support the WebP image.

You'll also notice that the URL changes depending on the file size and whether it's set to S, M, L, XL, or original.

You can also see different formats like  s16000, w400-h151 , w640-h416 etc. Just add  -rw after this in the URL. 

Video Tutorial

Conclusion 

Now, You have successfully added the webp images to your blogger website. You recheck the page speed in the page speed insight tool, and you will not see any error.

If you have any questions about webp images in Blogger, please leave them in the comments section. Alternatively, you can post your concerns in the our Telegram Group.

I'm A Content Creator, Graphic Designer, And UI / UX Designer.

Post a Comment

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, comment policy.