SofanMax - Blogger, or Blogspot, transforms into a modern platform
that emphasizes mobile-friendliness. It is actively modernizing its core to
create a powerful content management system.
Consequently, users may notice a major update in image URL format. You may
also see that your images, including WebP, will be served in JPG format by
default.
Previously, the old Blogger did allow you to directly upload WebP to the
server. Furthermore, images will be displayed according to the original
format. If you upload PNG and WebP, the server will serve the images in those
formats.
Nowadays, Blogger will automatically convert your images to JPG.
You can still serve images in WebP format in Blogger. There is a hidden
option that allows you to do it by tweaking the image URL a little bit.
However, before we delve deeper into that, you need to see the URL difference
first.
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="3648"
data-original-width="5472"
src="https://blogger.googleusercontent.com/img/a/AVvXsEiWQSn4E-ZxaHb-Ef-O90ZlfVEV049t9Pe8HrY8vFD7zVQkfT6dAWOvjXXsBA64nC4iffL2p7ObaHd0LD1bvs94XFbNuK43gsumwzjYz6TCaMBtxdMHNzAta83l5sMVQUTTcxCndt1pkO-0GFSZfB6NW9Gk6U93J8moi1lnZqTp83v_50WohtuekstxMQ=s16000-rw"
title="How to convert images to WebP in New Blogger"
/>
Read also:
>Fletro Pro v6.1 Blogger Theme With Great Core Web Vitals > >
>My Essay on The Reality of Blogspot and AdSense Monetization >
Difference Between Old and New Blogger Image URL
In the old Blogger, your image is stored using the following URL structure:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHH4jpxK8JkheLKnlWcaHqSV2slf9XHxL9eS-NnPPU49vy2wi7RH4ZXXMFqnLS1iGvEyZIZAZAM5Pl_sYwG_Zdr7ZKcZlNboS0M3YQGSnSofKANIURS0t2r2OFRvvdzgd3wBhAs3XgldBL/s1920/how-to-solve-site-behavior-navigation.png
Meanwhile, the new Blogger will serve your photo using the following URL
structure:
https://blogger.googleusercontent.com/img/a/AVvXsEiA0iT7b3CjFAfZ1FuZbrb5-GKQkrBUw0sYAYvhj0dgK84nwDaI_jROYBqJTTDxRM6r6oekcVywqTTqK1XPrSivbZVpsGVGZx2zsHUFUOZlNGLrTQgsxZ6f3npRZv8T7LUhyu_fRvgd2ZazwlrMj_D9_cPhf8in3Sz2DLxdNSq2wgczghA3GK1zXTga1A=s1280
Your URL may look slightly different, depending on your image. However, you
can still clearly see the difference. The old Blogger uses
https://1.bp.blogspot.com, while the newer version uses
https://blogger.googleusercontent.com/img/.
The old Blogger URL shows your image extension clearly. The example above, it
comes in PNG format.
For the new Blogger image URL, you may notice that it lacks the format
extension. It does not clearly show what type of image it is. It will be
served under the JPG format by default if you open it.
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="943"
data-original-width="1753"
height="344"
src="https://blogger.googleusercontent.com/img/a/AVvXsEhB6wcfyC5iCt2_I9hrQvuih3woywrZUcavqdiop1GLZYTskkPK4agYvsu3n0rJTGs3FGd1Amkm0KivlxXr5XLrX3nFNoMqzpl63ywEnH3cvdiAscIGoGzMOHFnoinLcu2X8AwmUBWqSpKD3tRG3DAZaOhd9VjNtrHM53u21OV5ScFPgMS-LzTfsdknYw=w640-h344"
title="New blogger serves images in JPG format by default."
width="640"
/>
The picture above shows you that the images in the new Blogger are served in
JPG format. You may initially upload the image in PNG or WebP. But, the server
will still forcefully serve it in JPG.
As a result, your blog may not be optimized for speed! After all, you want to
display a clear image in the smallest size possible.
Fortunately, there is a method to get around this problem. We can serve images
in WebP format through the following process!
Read also:
>
>
Search Engine Optimization > >
How to Display WebP Image in New Blogger URL Format!
To serve WebP in the new Blogger, you must manually alter your image URL. It
is a bit tedious, but it is very simple. You just need to locate the image URL
in your post, then put -rw at the end of the URL
For example, the following URL is serving image in WebP!
https://blogger.googleusercontent.com/img/a/AVvXsEiA0iT7b3CjFAfZ1FuZbrb5-GKQkrBUw0sYAYvhj0dgK84nwDaI_jROYBqJTTDxRM6r6oekcVywqTTqK1XPrSivbZVpsGVGZx2zsHUFUOZlNGLrTQgsxZ6f3npRZv8T7LUhyu_fRvgd2ZazwlrMj_D9_cPhf8in3Sz2DLxdNSq2wgczghA3GK1zXTga1A=s1280-rw
You will notice that I simply put -rw at the end of the URL after the
image size. It is simple as that!
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="790"
data-original-width="1137"
height="444"
src="https://blogger.googleusercontent.com/img/a/AVvXsEij5DaGLlIeA8ZjnMOv1usMWCCkSM4cvv_etHSbqZ5T1zW73oswZ3LOJzEoYY9WlpBdNzfNaP28tGMyM15n3gV5Cy8xMpA_OKitGeiaMJ-wc6QdWPW5flSkig5LaTBBp4sCkhQEfjttKopcwfuoAO42rlcfm42XWJkZga31iGitEKVjfGXxhnVcbAnxvQ=w640-h444-rw"
title="How to display WebP in new Blogger image URL format."
width="640"
/>
You can try it yourself, download the image or check it in PageSpeed Insight.
Putting -rw at the end of the new Blogger image URL will automatically
convert it into WebP.
Furthermore, you may upload the initial image in any format. If you want to
convert it to WebP, all you need to do is add -rw at the end of the
URL.
If you are new to Blogger, you can locate your image URLs using the HTML view
from the text editor. The button is located on the top left side.
After entering the HTML view mode, you can automatically tidy it up using the
Format HTML button. The button looks like three horizontal stripes. This
feature will not affect your non-HTML formatting at all, so you can use it
liberally.
Tidying up the HTML code will help you quickly locate your image URL.
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="837"
data-original-width="1549"
height="346"
src="https://blogger.googleusercontent.com/img/a/AVvXsEg86Iz-s4eijdRw8YIfyJUBlgS2OnnrEVXmMBt3BOq-fMZdMtyw-kAmfZoG7WkdZqmY3sLLPpih-hJenqHrKcwsmPZM0I622OG-1ZBzNF93qG8XZYwovPh5c9_St4jrsAUllK85nVuGa4ROOKWXDg9V-EuQCG5CLGdXbTQqzNJVZ4Mzu7T6Z5PXz1sRoA=w640-h346-rw"
title="Converting image to WebP format in new Blogger/Blogspot."
width="640"
/>
Every time you upload an image in Blogger, it will provide you with two URLs.
The first URL store your picture in 1600px size. The second URL displays the
thumbnail.
Like the example above, you can add -rw to both of those URLs.
I would like to mention that the WebP format and new Blogger image URL may not
be perfectly compatible with some themes. You may notice a little bug. It is
unfortunate, but we hope that theme developers can update their creations to
be more compatible with the new Blogger.
Why do bloggers need to serve their images in WebP format?
If you are new to blogging, you may wonder why image format matters. The
answer is related to speed performance. You want to deliver your content as
fast as possible to your visitors. Your readers prefer websites that load
fast.
Images are assets in a web page that usually loads slower because of their
sizes. So, you need to provide compressed images optimized for the web. That
format is called the WebP. This format features high compression. As a result,
visitors can see the image clearly in its smallest size.
According
>to the official definition >, WebP is a modern image format that provides superior lossless and lossy
compression! Using WebP, you can create smaller, richer images that make your
blog faster.
Before I end this article, I'd like to thank
>John, a Google staff and Blogger.com developer >who helped me to point out this solution. If you guys have an unresolved
issue with Blogger, I suggest you visit the official forum.
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="721"
data-original-width="1153"
height="400"
src="https://blogger.googleusercontent.com/img/a/AVvXsEg_uh_ys6nNiqDr1G72hvTpzjZ9xq4lJUbCeeFQg7oiNxOcZsV1ZlZ_CbXs_XxSQ1Si3Lh8upINEltAv84pmIQDAuvWcWqpHxCE1T0bfAQLLJSuQYOfR2GI4ldWJYPWGqA0HpIQ589ShoiqgCAH8zrDskYF_vVAT0r9xBpz2WqAHD37itoJ9_rMb-N0Gw=w640-h400-rw"
title="Displaying WebP in new Blogger/Blogspot image URL."
width="640"
/>
Leave a comment below if you have any questions regarding WebP image
conversion in Blogger or Blogspot!
Read also:
>
Process > >
>
Feedburner Alternative > >