How To Serve Images In WebP Format In Blogger

Optimising images is an essential task for any website owner as images typically make up 80-90% of a website’s total page size, making them an important component for website performance. By serving images in next-gen formats such as WebP, blog owners can significantly improve their website’s loading speed, which has a direct impact on the SEO and overall user experience.

If you want to make your Blogger website load faster, serving images in WebP format is a great option to start. By using this format, you can easily reduce the size of your images without sacrificing quality, which can result in faster page loading times for your visitors.

What Is WebP Format?

WebP is an image format developed by Google that was first introduced in 2010. It is designed to provide a high-quality image format with smaller file sizes compared to traditional image formats such as JPEG and PNG.

WebP uses both lossy and lossless image compression techniques to reduce the size of images without reducing the quality of the pixels. This can result in smaller image file sizes and faster page loading times for websites that use WebP images.

In addition to its smaller file sizes, WebP also supports transparency, animation, and other advanced features, making it a versatile and high-quality image format. WebP is now widely supported across every platform and device, making it an excellent choice for website owners looking to optimise their images for faster loading times and improved user engagement.

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?

Serving images in the WebP format can provide a number of benefits to bloggers. One of the main advantages of using WebP is smaller file sizes. WebP uses advanced image compression techniques that allow images to be reduced in size while still maintaining their quality, resulting in smaller image file sizes and faster page loading times. This can have a positive impact on user engagement and satisfaction, as well as improve the overall health of the website.

Another benefit of using WebP is improved page speed. Faster page loading times are crucial for improving the user experience, and can also play a role in search engine optimization (SEO). Search engines favour websites that load quickly, and using WebP images can help increase your website’s visibility on search engine results pages (SERPs).

How To Convert Images To Webp?

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

By Using An Online Tool

Converting your existing images to WebP format is a very simple process. One option is to use a web-based converter such as CloudConvert. This website allows you to convert a variety of image formats, including JPG, PNG, and GIF, into WebP images that are smaller in size and have improved quality.

To use CloudConvert, simply upload your image from your computer or enter its URL. The website will automatically convert the image to WebP format, and you can then download the new image to your computer. There are also many other similar websites available that offer the same conversion services, so you can search for “WebP converter” on Google to find a list of options.

Using A Computer Software

I will suggest you use this method if you have a computer or a laptop because it saves a lot of 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 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.

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, and 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.

The Bottom Line

In conclusion, using the WebP format for images on your blogger website can have many benefits. From smaller file sizes to improved page speed and user engagement, serving images in this format can help you achieve a faster, more dynamic, and high-quality website. 

By using a web-based converter like CloudConvert, you can easily convert your existing images to the WebP format and experience these benefits for yourself. Whether you are a blogger looking to improve your website’s performance or a website owner seeking to enhance the user experience, serving images in WebP format is a smart choice.