Blogger Images Compression using WebP

Question

I want to change my thumbnails to use the latest image compression technology. Blogger does provide it using the URL parameters for example this is my thumbnail:

https://1.bp.blogspot.com/xxxxxxx/xxxxxx/s350/image-name.jpg

and I want to transform it to WebP format by adding rw so it will look like this

https://1.bp.blogspot.com/xxxxxxx/xxxxxx/s350-rw/image-name.jpg

Blogger WebP Images use an additional -rw beside s350 in the image URL. Currently I have this data tag in place.

expr:src = 'resizeImage (data: post.thumbnailUrl, 350)'

Please, give some references to pass the -rw parameter in this data tag. I'm unable to find in any documentation (official or unofficial)

PS: I do not want any JavaScript solution, I know it can be done easily :/

Answer 1

I hope you can find this helpful.

you can use this javascript code to convert blogger images to webp.

// image optimization 

var myIMG = document.getElementsByTagName("img");

for (var x =0 ; x < myIMG.length; x++) {
 var imgSRC = myIMG[x].src; 
var imgSRC_width = myIMG[x].width; 
var imgSRC_height = myIMG[x].height; 

   var  mypin = String(imgSRC.match(/\/s72-c\//));
                        imgSRC = replaceAll(imgSRC, mypin, "/w" + imgSRC_width + "-h" + imgSRC_height + "-p/" + "-rw");
imgSRC = imgSRC.replace(/png/gim,"webp");
imgSRC = imgSRC.replace(/jpeg/gim,"webp");
imgSRC = imgSRC.replace(/jpg/gim,"webp");
myIMG[x].src= imgSRC;

console.log(imgSRC);}

This code gets all images in your blog and converts them to webp.

Have fun!

Answer 2

How To Convert Blogger Images To WebP Format

This is how you do it:

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:

6. Look for "s1600".

7. There are two of them in there (in bold).

8. Just after s1600, add -rw.

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

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.

11. That's all. All your images will be converted to web format and your blog will super load fast, making blog load fast is one of the top 3 Things You Should Do To Make Your Blog Be On The First Page On Search Engine