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

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 (Like WordPress)

2. How To Add Download Button In Blogger Post (Like WordPress)

3. How To Make Images Mobile Friendly in Blogger Post

{tocify} $title={Table of Contents}

Step 1 

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

Step 2

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

Step 3

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.

Step 4

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

Anchor LinkHow To Serve Images In Next-Gen Formats In Blogger Post
Source LinkHow To Serve Images In Next-Gen Formats In Blogger Post
Note:

'src' is given before 'source link'.{alertInfo}

Step 5

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'

How To Serve Images In Next-Gen Formats In Blogger Post
How To Serve Images In Next-Gen Formats In Blogger Post
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'

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

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


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'

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

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'

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

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


Note:
So, the element 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.
{alertInfo}

Step 6

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

Step 7

Click on 'Update' post button.

Step 8

Check speed of your blog using Google PageSpeed Insights.

Also Read:

4. How To Add Demo Button In Blogger Post (Like WordPress)

5. How To Add Buy Button In Blogger Post (Like WordPress)

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!

{getButton} $text={Follow us} $icon={link} $color={#2980b9}

Previous Post Next Post