Same image, different sizes

by @cyballruiz

When we upload an image in Blogger, we can have a lot of versions of that image!!

How? Editing the URL 😉


For example, if we upload a huge, very huge image, with 1200px width and 1000px height, we cannot 'see' any issue because most themes are ready to show it without overflowing the post area.


But for performance, the file size will affect you. A lot.


How Blogger handle the size of images

These are the different sizes options that Blogger have for images:

  • Extra large: 640px
  • Large: 400px
  • Medium: 320px
  • Small: 240px
  • Original size: it will load the image exactly as we upload it.

At the moment of uploading an image, Blogger set for us the size 'Medium', loading an image with 320px for the largest side and adding to the <img tag the corresponding width and height attributes, where the smallest side will be calculated to maintain the aspect ratio of the image.


The same happens for all the other sizes, except for the Original size, where width and height attributes are not added to the <img tag.


Remember, height and width attributes are needed for Lazy Loading


So imagine we have a landscape image, which original size is 1920 - 1080 px. Too big, right?


If we choose 'Small size' Blogger will load the smallest version of the file, with a size of 200 - 113px. This way, the performance is not affected by the huge size of the image.


If Lightbox is enabled, our users could see the original file in the Image visor, if not the file will be open in the same tab.


How does Blogger load a smallest file?

Editing the URL of the image, and we can do the same.


Recently Blogger changed the image URLs, so we will see old and new URL here.


New format (URL) of images

This is an example of the new format

https://blogger.googleusercontent.com/img/a/AVvXsEi5xFtO0v98QNYUj_sG_wOiDlRC_-IA7B3dSExMkGJs7ZnexczOOPXbJLiWrsdKhKTVWqpoVwvFKJvQW8ibxDAhzmrBZoyDK93YjpBoHi5TV0mVRjiu0RWY6Ql_RsnmcxMFXoj9PLTC4XSE-pcUXWzNFZgp1FAPyH1LCM6B1wTroSXqa16fQp0jBxpldQ
Yes, I know, I don't like how loooong it is and without the file name... Remember to send feedback to the Blogger team about this!


We can add, at the end of the URL some of the following:

  • = is required and only needed once.
  • s500 that will create an image where the largest side will be 500px, in this case, will be the width.
  • w500 will create the same size of the image, but here the w is specific for width value, we can use h to indicate the height value: h500
  • s300-c will create a crop squared image of 300px.
  • s425-rw, this is my favorite one. the -rw will 'create' a webP image, at least PageSpeedInsight will remove the warning for webP images if we use it. Sadly it can not be added to the theme.


Old format (URL) of images

https://1.bp.blogspot.com/-X23i7s28fhM/YPKTfR8zjWI/AAAAAAAAT7o/cqEJDIjR93YJ8LcSHhfVzmc2yYTYTaeVwCLcBGAsYHQ/s1600/myimage.jpg

I highlighted in red the /s1600/ area of that URL, where we can change and get different versions of the same image. The = is not needed with the old URL format.


/s1600/ here means 'Original size', but I prefer to use /s0/


So with the old URL, we can do the same as I mentioned, but instead of =s500-c, it will be /s500-c/



Creating downloadable images

Just upload your image as always, and choose the size that fit your post (small, large...). Then change to HTML View and find the code for that image (As Blogger is not adding the name file to the URL, create a hint to find easily the code).


Usually is like this:

<p class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/a/AVvXsEhOuQtr9hiDiscRg3PJp4B5pWt6KrN2wpghOiDhM-k6ZIkTrQbH6BLe7zaiz9IUw1BU3OpDSRLvqM3qFiSNqa0s7HAY-H1c3lYMiGbUnVEkUe5HU603q6_MlWZY9ZooeMto_Z_jU_2vkEXrqx6JvzeBhdB7k0dPzY9mI8wz0ubGyN6whR5qY26syER9ag=s1920" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="1920" data-original-width="1080" height="320" src="https://blogger.googleusercontent.com/img/a/AVvXsEhOuQtr9hiDiscRg3PJp4B5pWt6KrN2wpghOiDhM-k6ZIkTrQbH6BLe7zaiz9IUw1BU3OpDSRLvqM3qFiSNqa0s7HAY-H1c3lYMiGbUnVEkUe5HU603q6_MlWZY9ZooeMto_Z_jU_2vkEXrqx6JvzeBhdB7k0dPzY9mI8wz0ubGyN6whR5qY26syER9ag=s320" width="180" />
</a>
</p>


Inside the <a tag edit the href attribute (the link) to remove whatever value is after the = (in my code is s1920) and just add d. That's all! A simple d will create a quick 'download' link. If the URL is an old one, edit the /XXXX/ fragment to be /d/.


Note: If Lightbox is enabled, the downloadable link will not work around the image, but that URL could be used as a regular link.


I hope this article has been useful for us to understand the possibilities we have with images on Blogger.




Check out more content