Easy Ways to Convert Blogger Images to WebP for Amp-img with Fallback

Currently Blogger doesn't support uploading images in webp format, whereas Google itself recommends using images with webp format. Incidentally in AMP HTML, for the use of webp format images easier because it can use fallback images for browsers that do not yet support webp.

But as with Google Photos, we can hack images uploaded on Blogger into webp easily. This is certainly a good solution for displaying images with webp on AMP posts.

That way we can increase the loading of the posting page, at least loading the page in browsers that already support webp like Google Chrome and Opera. But it can still display images in browsers that do not yet support webp.

Previously, I didn't think that a Blogger image could also be hacked into a webp like the Google Photos image. But apparently the trick to change Google Photos images into webp can also be applied to Blogger images.

Surely this is the easiest solution to use webp images on AMP blog posts so that the pages become lighter (at least in the Google Chrome and Opera browsers).

How to change Blogger images to webp is quite easy as it is on Google Photos. We just need to add the -rw code in the Blogger image URL in the size /s..../ (example: /s1600/ ).

For example, changing a Blogger image to webp looks like the following example Blogger image URL.

Here is the original URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkloXTy0e1eIjXk4J85j1ZQHVaRUdtFVhaD4Y2bwzx8op1T9C1CKer2BetLwtBHfDQnE0kzRo3U4P1eJSZ0v6Cxop0c1QpPbwg8KMl2KYHf7eNZ8xaF5lD28ty4B5Fm6hrYAnzS4-T3c//blogger-images.png

And here is the Blogger image changed to webp:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkloXTy0e1eIjXk4J85j1ZQHVaRUdtFVhaD4Y2bwzx8op1T9C1CKer2BetLwtBHfDQnE0kzRo3U4P1eJSZ0v6Cxop0c1QpPbwg8KMl2KYHf7eNZ8xaF5lD28ty4B5Fm6hrYAnzS4-T3c/-rw/blogger-images.png

So when used on an amp-image with a fallback to display a webp image it will look like this.

<amp-img alt="Contoh gambar blogger menjadi webp"
  width="1000"
  height="600"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkloXTy0e1eIjXk4J85j1ZQHVaRUdtFVhaD4Y2bwzx8op1T9C1CKer2BetLwtBHfDQnE0kzRo3U4P1eJSZ0v6Cxop0c1QpPbwg8KMl2KYHf7eNZ8xaF5lD28ty4B5Fm6hrYAnzS4-T3c/s1600-rw/blogger-images.png"
  title="Contoh gambar blogger menjadi webp"
  layout="responsive">
  <amp-img alt="Contoh gambar blogger menjadi webp"
    fallback
    width="1000"
    height="600"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkloXTy0e1eIjXk4J85j1ZQHVaRUdtFVhaD4Y2bwzx8op1T9C1CKer2BetLwtBHfDQnE0kzRo3U4P1eJSZ0v6Cxop0c1QpPbwg8KMl2KYHf7eNZ8xaF5lD28ty4B5Fm6hrYAnzS4-T3c/s1600/blogger-images.png"
    title="Contoh gambar blogger menjadi webp"
    layout="responsive"></amp-img>
</amp-img>

And the appearance will be like the picture below.

Note: this does not apply to images with the * .gif format.

If you use Google Chrome, please right-click on the image above then Save image as ... it will be saved as an image with the * .webp file format

How, easy right? Good luck and hopefully useful.