AMP framework will automatically switch back to traditional image format if the browser doesn't support the WebP format.
WebP is an image format with both lossy and lossless compression. It is introduced by On2 Technologies which is later acquired by Google. It is also a sister project to the Web M multimedia container format.
According to Google [Source : A new image format for the Web]WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Table of Contents
WebP in Blogspot
Even though Blogger officially doesn't support uploading the WebP image formats, we can force Google to interpret images as WebP with small changes in the current URL.
Current URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsN6nSCZgSr8NV3gEIfAjVO4C6s0ta6husWF77YyqLRpksb07JaF1KRKhbB4kd7cLFUKTHXmO80zYqrNErB8m05mkraQtu7g-9_XhAAIikdFvYBdYL1gKkg-xqW1u3cDFHHBYut8drtOQ/d/blank-blogger-template.png
WebP URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsN6nSCZgSr8NV3gEIfAjVO4C6s0ta6husWF77YyqLRpksb07JaF1KRKhbB4kd7cLFUKTHXmO80zYqrNErB8m05mkraQtu7g-9_XhAAIikdFvYBdYL1gKkg-xqW1u3cDFHHBYut8drtOQ/rw/blank-blogger-template.png
Just add -rw after d or s600 or similar tags that of above.
Complete structure for a WebP image with fallback will be like
<amp-img
alt="bloginoobs"
width="550"
height="368"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsN6nSCZgSr8NV3gEIfAjVO4C6s0ta6husWF77YyqLRpksb07JaF1KRKhbB4kd7cLFUKTHXmO80zYqrNErB8m05mkraQtu7g-9_XhAAIikdFvYBdYL1gKkg-xqW1u3cDFHHBYut8drtOQ/d-rw/blank-blogger-template.png"
layout="responsive">
<amp-img
alt="bloginoobs"
fallback
width="550"
height="368"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsN6nSCZgSr8NV3gEIfAjVO4C6s0ta6husWF77YyqLRpksb07JaF1KRKhbB4kd7cLFUKTHXmO80zYqrNErB8m05mkraQtu7g-9_XhAAIikdFvYBdYL1gKkg-xqW1u3cDFHHBYut8drtOQ/d/blank-blogger-template.png"
layout="responsive">
</amp-img>
</amp-img>
Chang the URL and paste inside your post.
WebP Converter Download
There is an official tool that can be used to convert PNG, JPG to WebP format. It is available on the official page.
Also Read : Convert img to amp-img
Is it Worth Adding WebP in Blogspot
When it comes to supporting, WebP is not supported by the old browser but most modern will support the WebP format. When we are considering the case of blogger we cant upload WebP images directly and we are indirectly converting the images into WebP format.
WebP lossy support
- Google Chrome (desktop) 17+
- Google Chrome for Android version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 11.10+
- Native web browser, Android 4.0+ (ICS)
Can a WebP image grow larger than its source image?Yes, usually when converting from a lossy format to WebP lossless or vice versa. This is mainly due to the colorspace difference (YUV420 vs ARGB) and the conversion between these.
Just test with your link with both PNG/JPG and WebP and compare the size when interpreting the images with this technique. In my case, the WebP format for the above example was 12Kb larger than the WebP format.
That could be because we have already compressed our images or we are using less colored images. I would recommend using WebP for those already loading your post with large or high-quality images.
Conclusion
I hope that this article on How to Add WebP in Blogspot or AMP Pages helped you to understand better about WebP. If you think something is missing in our article please let us know.
You can freely comment on your doubts and queries below. If you liked this article, then please share this with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.
DISQUS
Disqus Comments
FACEBOOK
Disclaimer : Muhammed Fasil K is a participant in the Amazon Services LLC Associates Program, an affiliate program to earn commission by advertising and linking sites to Amazon products.