Have you ever came across the saying "Serve Images in Next Gen format"?. I'm sure you would, if you have tried running Pagespeed Insight test on your blog. To serve images in next generation format simply means to render them in webp format for the web browser. And that's exactly what we'll be looking at in this tutorial.
What's webp?
Webp is the new image format created by Google that employs both lossless and lossy compression along with alpha transparency and animation. It's designed to create a smaller sized and quality image as compared to JPG, PNG, JPEG and GIF formats.
Imagine the above image size of 131kb in PNG format. Now rendered in webp to be 38kb.
Though, Blogger automatically compress images in blog posts by reducing its display size but this may not be enough so the webp images are just the best for bloggers who want to improve their site loading speed.
NOTE: If the image is off screen, the best thing to do is to lazy load. See; How to Lazy Load Images and Videos in Blogger
How to Serve Images in WEBP
To do this in Blogger, follow the below procedure:
- Log in your account and go and edit one of your blog posts.
- Switch to HTML View then look for the <img opening tag in the code.
- And in the src attribute you need change the text you found between the two last forward "/" characters of the image link to "s320-rw" as highlighted below.
<img border="0" data-original-height="300" data-original-width="550" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7pVsSaKr_LkE0GRRahfbQYEvkioXMbOzd3aJ2yEn2jZSkdGX2D2LG8pdCXk7sZ8j20RMqdKu1jbxVt1qM_zmW14rlIaO4AzkaTh0Td7SFz3Rwgjyd-ZqfA73lXUw7sW3xeDb80B-U9DX/s320-rw/20211014_113733_0000.png" width="320" />- The 320 is the size of the image display width, you can adjust it to your preference.
Save your post and you are good to go. Do this for any other image on your blog that you want to render in webp format.