February 25, 2021

Textual description of firstImageUrl

How To Convert Blogger Images To WebP Format

|

LAST UPDATED: October 2023

Find out how to convert Blogger images to WebP format with this easy-to-follow guide.

Yes, you can serve Images In Next-gen Formats in Blogger blog, to improve your Blogger blog speed.

WebP is an image format uses both lossy and lossless image compression

WebP is an image format optimizes compression better than JPG and PNG.

When you check your Blogger blog post speed with Google PageSpeed Insights, you see a similar remark like this:

Serve images in next-gen formats 0.75 s

I know many of you Blogger publishers are facing this technical problem.

how to convert Blogger images to WebP format

Blogger new interface is not supporting to upload a webp images.

In other words, you are unable to upload webp images to your Blogger/Blogspot site.

When you try to upload a WebP image to your Blogger site, you will see this error:

Blogger Image WebP Format

In short, you cannot upload a WebP format image to your Blogger site.

Don't give up, wait:

There is a workable way to overcome or fix this problem.

Keep reading...

To serve WebP images in Blogger, you still upload your images as usual in JPEG or PNG formats.

Then you go to the "HTML view" of the blog post to make changes to images code.

If you want to make changes to all your past blog posts, you have to make amend to each one at a time.

Yes, I know it is a daunting task, to say the least.

Probably for the start, you just make changes to those popular posts and the newly published ones.

When you have the time, then you go through all the rest of your old blog posts.

I would be showing you how to convert or alter blog posts images and also the header image to WebP format.

How To Convert Blogger Images To WebP Format

This is how you do it:

STEP #1: Locate Image Code

1. Log into your Blogger Dashboard.

2. Click on your blog post which you want to change the JPEG or PNG format to WebP.

3. Next click on the pencil icon on the left hand side of the post editor.

4. Then click on "HTML view".

serve images in WebP format 2021

5. Then look for the image code, which looks something like this:

<div class="separator" style="clear: both; text-align: center;">

<a alt="how to read The New Yorker for free" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjso6GDWqH8yK1lxp0n2sePX9ozSMRHvX5wEYxx4qNWFwkP1lYiHmHXSunrSEgOuMfcn37ibIvS1LWRT086xtTb36UYauJpJPwkBRGtZtiq58EEXwGRYwIRbwgrJ9Ncow0olga8x_m-omQ/s1600/new-yorker-free-articles.png" style="margin-left: 1em; margin-right: 1em;"><img alt="how to read The New Yorker for free" border="0" data-original-height="274" data-original-width="287" height="274" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjso6GDWqH8yK1lxp0n2sePX9ozSMRHvX5wEYxx4qNWFwkP1lYiHmHXSunrSEgOuMfcn37ibIvS1LWRT086xtTb36UYauJpJPwkBRGtZtiq58EEXwGRYwIRbwgrJ9Ncow0olga8x_m-omQ/s1600/new-yorker-free-articles.png" title="Read The New Yorker For Free" width="287" /></a></div>

STEP #2: Look For s1600 In Image Code

1. Look for this "s1600".

2. There are two of them in there (highlighted in yellow).

3. Just after s1600, add -rw.

4. This is what it looks like after the changes:

<div class="separator" style="clear: both; text-align: center;">

<a alt="how to read The New Yorker for free" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjso6GDWqH8yK1lxp0n2sePX9ozSMRHvX5wEYxx4qNWFwkP1lYiHmHXSunrSEgOuMfcn37ibIvS1LWRT086xtTb36UYauJpJPwkBRGtZtiq58EEXwGRYwIRbwgrJ9Ncow0olga8x_m-omQ/s1600-rw/new-yorker-free-articles.png" style="margin-left: 1em; margin-right: 1em;"><img alt="how to read The New Yorker for free" border="0" data-original-height="274" data-original-width="287" height="274" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjso6GDWqH8yK1lxp0n2sePX9ozSMRHvX5wEYxx4qNWFwkP1lYiHmHXSunrSEgOuMfcn37ibIvS1LWRT086xtTb36UYauJpJPwkBRGtZtiq58EEXwGRYwIRbwgrJ9Ncow0olga8x_m-omQ/s1600-rw/new-yorker-free-articles.png" title="Read The New Yorker For Free" width="287" /></a></div>

NOTE:
Some of you might not have “s1600”. You may see  codes like: “s200”, “s320”, “s400”, “s640” or some other digits.

You just add “-rw” after any of these codes.

10. After adding the -rw, click the "Update" button.

Now, let's find out how to change your Blogger header image from JPEG or PNG to WEBP format.

Change Blogger Header Image To WebP Format

1.  Log into Blogger Dashboard.

2. Click on "Theme".

3. Click on the white reversed triangle next to CUSTOMIZE button.

Serve Images In Next-Gen Format

4. A menu appears.

5. Click on "Edit HTML".

Blogger WebP format

6. Now search for this code:

<b:widget-setting name='displayUrl'>

7. Look for the URL followed from the above code.

8. The whole line looks something like this:

<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnH7Dfc40E57UrCizAl86Tm6B2QJyGXSQ0JTvx__VsfUBWbHyW2Tkn-jebvb1_hIDcaMZk5ktIFPuYz-Xf2gZgA94l-4aFDR69AmLwhYc5NX5UPVnDyV3s12UPowmNIVAm5VbixSaIyuU/w400-h128/</b:widget-setting>

9. Add -rw at the end of the code.

10. Now it should look like this:

<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnH7Dfc40E57UrCizAl86Tm6B2QJyGXSQ0JTvx__VsfUBWbHyW2Tkn-jebvb1_hIDcaMZk5ktIFPuYz-Xf2gZgA94l-4aFDR69AmLwhYc5NX5UPVnDyV3s12UPowmNIVAm5VbixSaIyuU/w400-h128/-rw</b:widget-setting>

Note: You code should look slightly different from my example.

11. Then click the "Save" icon (floppy disk symbol) on the top right hand corner.

That's all you need to do.

Check Blogger Images WebP Format

Now, go to Google PageSpeed Insights site to check whether you still have that serve images in "next-gen format" remark.

To check whether the image is now in WebP format, you just right click on the image, then click on "Save Image As..."  

When the box pops up, you can see, the image in WebP in both:

"File name:" and "Save as type:"

Blogger Images in Next-Gen Formats
Similarly, you can right click on the image, then click "View Image Info".

Click on "General" and below you can see "Type: image/webp".

 
upload Blogger WebP images

Or you can click on "Media", then click on the image URL inside the "Address" box.

Look below and you can see the remark, "Type: WEBP Image".

 
Change Blogger Image To WebP Format

That's is how you can change your Blogger images format from Jpeg or Png to WebP.