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.
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:
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".
5. Then look for the image code, which looks something like this:
<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
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:
<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>
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.
4. A menu appears.
5. Click on "Edit HTML".
6. Now search for this code:
8. The whole line looks something like this:
10. Now it should look like this:
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:"
Similarly, you can right click on the image, then click "View Image Info".Click on "General" and below you can see "Type: image/webp".
Look below and you can see the remark, "Type: WEBP Image".