How To Convert A Blogger Image To Webp To Amp-img With Fallback
How To Convert A Blogger Image To Webp To Amp-img With Fallback - Currently Blogger does not support uploading images with webp format, but Google itself recommends to use images with webp format. Incidentally on AMP HTML, for the use of image format webp easier because it can use fallback images for browsers that have not support webp.
But just like in Google Photos, we can hack images uploaded in Blogger into webp easily. Of course this is a good solution to display images with webp on AMP posts. That way we can increase loading page postings, at least loading pages on browsers that already support webp like Google Chrome and Opera. But still can display images on browsers that have not support webp.
Actually before I did not think that Blogger image can also be hacked into webp like in picture Google Photos. But it turns out the trick to turn Google Photos into webp images can also be applied to the image Blogger. Surely this is the easiest solution to use webp images on AMP blog posts so the page becomes lighter (at least in Google Chrome browser and Opera).
How to convert Blogger image to webp is pretty easy just like in Google Photos. We just add the -rw code in the Blogger image URL in the size section /s../ (example: / s1600 /).
For example, changing Blogger image to webp looks like in the following example Blogger image URL.
Here is the original URL:
And here is Blogger image changed to webp:
So when used on amp-image with fallback to display the webp image will look like the following.
If you use Google Chrome, please right click on the image above then Save image as ... it will be saved as image with * .webp file format
- How To Use Image With WebP Format On Blog AMP
- How to Set Up Images of AMP HTML Blog Post
How easy is not it?
Similarly tips on How To Convert Image Blogger To Webp For Amp-img With Fallback, hopefully with this short enough article, can be useful and good luck.
But just like in Google Photos, we can hack images uploaded in Blogger into webp easily. Of course this is a good solution to display images with webp on AMP posts. That way we can increase loading page postings, at least loading pages on browsers that already support webp like Google Chrome and Opera. But still can display images on browsers that have not support webp.
Actually before I did not think that Blogger image can also be hacked into webp like in picture Google Photos. But it turns out the trick to turn Google Photos into webp images can also be applied to the image Blogger. Surely this is the easiest solution to use webp images on AMP blog posts so the page becomes lighter (at least in Google Chrome browser and Opera).
How to convert Blogger image to webp is pretty easy just like in Google Photos. We just add the -rw code in the Blogger image URL in the size section /s../ (example: / s1600 /).
For example, changing Blogger image to webp looks like in the following example Blogger image URL.
Here is the original URL:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEEnslCgvvw-ESHi2DcQz3MAv6zyRFJlTRtDvkvpwf62I-e8KEgc1ZMs2lJNi1EY8VuKaK8LwWy9wZmr_XyJ_ahvDYHA6ixB_9xgGuELaQpIKRL-21gDcHX30pW-uOWdo819xwHdjhVc/s1600/blogger-images.png
And here is Blogger image changed to webp:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEEnslCgvvw-ESHi2DcQz3MAv6zyRFJlTRtDvkvpwf62I-e8KEgc1ZMs2lJNi1EY8VuKaK8LwWy9wZmr_XyJ_ahvDYHA6ixB_9xgGuELaQpIKRL-21gDcHX30pW-uOWdo819xwHdjhVc/-rw/blogger-images.png
So when used on amp-image with fallback to display the webp image will look like the following.
<amp-img alt="An example of a blogger image being a webp"
width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEEnslCgvvw-ESHi2DcQz3MAv6zyRFJlTRtDvkvpwf62I-e8KEgc1ZMs2lJNi1EY8VuKaK8LwWy9wZmr_XyJ_ahvDYHA6ixB_9xgGuELaQpIKRL-21gDcHX30pW-uOWdo819xwHdjhVc/rw/blogger-images.png"
title="An example of a blogger image being a webp"
layout="responsive">
<amp-img alt="An example of a blogger image being a webp"
fallback width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEEnslCgvvw-ESHi2DcQz3MAv6zyRFJlTRtDvkvpwf62I-e8KEgc1ZMs2lJNi1EY8VuKaK8LwWy9wZmr_XyJ_ahvDYHA6ixB_9xgGuELaQpIKRL-21gDcHX30pW-uOWdo819xwHdjhVc/s1600/blogger-images.png"
title="An example of a blogger image being a webp"
layout="responsive"></amp-img>
</amp-img>
If you use Google Chrome, please right click on the image above then Save image as ... it will be saved as image with * .webp file format
- How To Use Image With WebP Format On Blog AMP
- How to Set Up Images of AMP HTML Blog Post
How easy is not it?
Similarly tips on How To Convert Image Blogger To Webp For Amp-img With Fallback, hopefully with this short enough article, can be useful and good luck.
You can provide a link to amp-amg generator. you can use amp-img tag generator to create messy looking amp-img tag easily. Thanks
ReplyDeleteThis comment has been removed by the author.
ReplyDelete