Do you want How To Add WebP Image In Blogger/AMP Page & How Blogger Support NextGen WebP Image Format.
An Image is a heart of article without images the blog has no image. But Today's Article Is Not About The Greatness Of Images It's About The Format You Use In An Image.
Yes, I'm talking about image formats which we use in our blogger blog & any other website. As websites are very sensitive to Pagespeed Insights and the developer has to keep the website Pagespeed High by reducing file size. But, in this situation why can't we reduce the size of images. Yes, it's now possible to reduce image size without compressing images by using WebP Image Format Which Loads Images Fast And Keep Pagespeed Insights High.
You must know about Google Solution to loading Pagespeed by using NextGen WebP Image for your blog.
As Google part by initiatives to make web faster Google provide the solution to use WebP Image Format to overcome the PageSpeed Insights. The WebP Image was provided by Google to use better and more aggressive optimized algorithm than JPG & PNG with an intention to reduce file size without make images blurry. Thus means better website consumes less bandwidth.
Available For Reading! How To Put Images Side By Side In Blogger? Image Slider In Blogger (Easily)
What Is WebP Image Format?
WebP is an emerging image format supported by Google, Developed By Google. WebP is basically a derivative of WebM video format. WebP is an important useful format for images to load faster with more features.
What WebP Stands For?
The WebP is a format of image file which is saved with .webP extension and to maintain web graphics file size normal. The WebP Image has an intention to load faster with website, Which Was Google Said (Read The Above Note).
How Old Is WebP Image Format?
The WebP was first released in 2010, the WebP now has a capacity to use both Lissy and lossness image compression in order to create images that are similar and richer in quality without hurting any of Pagespeed.
Till now, we have learned about WebP Image Philosophy/Biography (Ramkatha)... How Long it was(boring na..) But now it's time to learn some Features Of WebP Image So that Next Time We Don't Use Other Image Formats In Our Website.
Features Of WebP Image
- WebP adopts both lossy and lossless compression.
- WebP Images are potentially 30-40% more smaller than JPEG/JPG.
- WebP Lossless Images Have Potentially 25% More Compression Than PNG.
- WebP supports lossless transparency i.e. PNG with alpha channel.
- WebP supports animation i.e. Animated GIFs
- WebP Images has capability of reducing JPEG, GIF, PNG Image file sizes.
Where WebP Is Good To Use
The faster websites consuming lesser bandwidth is the biggest advantage of using WebP Image Format. Generally, The Thumbnails is only starting point for the conversion of WebP. And this enhance your website to load fast as well as enhance overall Pagespeed insights.
Where WebP Is Bad To Use
If something has benefits then it also has drawbacks and the major drawback of WebP is that it requires more processing power for playing any animation.
WebP Image In Blogger/Blogspot
Even through Blogger Official Doesn't support uploading WebP Image format. But we can force Google To interpret images as WebP by doing small change in our blogger image URL.
Current URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeKH15QaWP-jHBoBlHVBnIWYp5dUZK_VqaeBMER0ZGqm0klDBgqcDKUOId_cyVUS-WX4hsmqgmqukkdbBCnVjW8jXbGhb6l9RneMSJoyQnjGb9Dg-GAMGNqeI5syoi2cjKbrkyuUI8D8w/s1625/ADD-WEBP-IMAGES-IN-BLOGGER.pngWebP URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeKH15QaWP-jHBoBlHVBnIWYp5dUZK_VqaeBMER0ZGqm0klDBgqcDKUOId_cyVUS-WX4hsmqgmqukkdbBCnVjW8jXbGhb6l9RneMSJoyQnjGb9Dg-GAMGNqeI5syoi2cjKbrkyuUI8D8w/-rw/ADD-WEBP-IMAGES-IN-BLOGGER.pngJust Add -rw After d or s1600 or similar tags that of above.
WebP In AMP Blogger Post
Now, the complete WebP Image Structure With AMP Post should be like...
<amp-img
alt="affizoo"
width="550"
height="368"
src="Image link with -rw or .webp"
layout="responsive">
<amp-img
alt="affizoo"
fallback
width="550"
height="368"
src="Image link with -rw or .webp"
layout="responsive">
</amp-img>
</amp-img>WebP Conversion Download
There is an official tool available which you can use to convert your PNG OR JPG Image To WebP Image Format. It is available on official page, so you can visit from below link.
Is It Really Worth Adding WebP
When it comes to supporting, then it is not supported by old version browsers but the most updated & modern browser required to support WebP Format. And when we talk about Blogger then we cannot upload WebP Image directly to our post but we are converting the image format to WebP.
WebP Lossy Support
- Need Google Chrome(Desktop) 17+
- Need Chrome For Android Version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 11.10+
- Native Web Browser, Android 4.0+(ICS)
Now just test your link with both PNG/JPG & WebP and compare the size when interpreting the size of images with this template. In this case the WebP format for above example was 16.4KB larger than WebP Format.
That could be simply because we have already compressed our images or we are using less coloured images. I would recommend using WebP for those which are loading your post with large size or high quality images.
Conclusion
Congrats! Today you learned more about How Blogger Support NextGen WebP Image? A To Z Guide so always be the first to comment us and tell how helpful is this article.
Thanking you! For giving your precious time to us.
Please visit us again...