How To Serve Images In Next-Gen Formats In Blogger Post

This Tutorial will show you how to serve images in next-gen formats in Blogger post to increase the speed of blogger website, recommended by Google PageSpeed Insights.

Also Read:

1. How To Add Table Of Contents In Blogger Post

2. How To Add Download Button In Blogger Post

3. How To Make Images Mobile Friendly in Blogger Post

Convert Image into Webp Format

Convert your all images in 'Webp' format using this Webp Converter.

Upload Webp Image in Blogger post

Upload all the converted webp images in your blog post. Make sure you are in the 'Compose view' of the post editor.

Edit Size of The Webp Images

Click once on the 1ˢᵗ image, click on 'Setting' icon, select its 'Size' first and click on 'Update' button. Edit all the remaining images like the 1ˢᵗ image.

Find Source link of The 1ˢᵗ Webp Image

Switch to 'HTML view' and find the 'source link' of the 1ˢᵗ image.

Anchor Link

Source Link

Note:
'src' is given before 'source link'.

Edit Source link of The 1ˢᵗ Webp Image

Once you got the 'source link' of the 1ˢᵗ image, edit the 'source link' like the following way:

1ˢᵗ Way

If the 'source link' is like 'https://blogger.googleusercontent.com/img/a/ABCDEF=w640-h342'

Then add -rw at the end of the 'source link' after w640-h342 without giving any space or gap.

That means it should be edited as 'https://blogger.googleusercontent.com/img/a/ABCDEF=w640-h342-rw'

OR,

If the 'source link' is like 'https://blogger.googleusercontent.com/img/a/ABCDEF=s16000'

Then add -rw at the end of the 'source link' after s16000 without giving any space or gap.

That means it should be edited as 'https://blogger.googleusercontent.com/img/a/ABCDEF=s16000-rw'

2nd Way

If the 'source link' is like 'https://1.bp.blogspot.com/G/H/I/J/w640-h360/image-1.webp'

Then add -rw at the end of the w640-h360 without giving any space or gap.

That means it should be edited as 'https://1.bp.blogspot.com/G/H/I/J/w640-h360-rw/image-1.webp'

OR,

If the 'source link' is like 'https://1.bp.blogspot.com/G/H/I/J/s16000/image-1.webp'

Then add -rw at the end of the s16000 without giving any space or gap.

That means it should be edited as 'https://1.bp.blogspot.com/G/H/I/J/s16000-rw/image-1.webp'

Note:
The part of source link of image containing w and h or s should be edited.
For Example:
w640-h342 was edited in the 1ˢᵗ link.
s16000 was edited in the 2ⁿᵈ link.
w640-h360 was edited in the 3ʳᵈ link.
s16000 was edited in the 4ᵗʰ link.

Edit Source link of All Remaining Webp Images

Edit the 'source link' of all the remaining images like the 1ˢᵗ image.

Update The Blogger Post

Click on 'Update' post button.

Check Blog Post Speed

Check speed of your blog using Google PageSpeed Insights.

Also Read:

4. How To Add Demo Button In Blogger Post

5. How To Add Buy Now Button In Blogger Post

Congrats! we have successfully optimize our blog images in webp format as recommended by Google PageSpeed Insights.

Watch This Video to Learn Visually

Thanks for Visiting!

Follow us