How to display photos with different sizes on blogspot?

Question

Google Blogger

I need to display links to photos of different sizes... How to do it?
I know that you can simply change the size by specifying s625, s1024, s1600. But how to do it through scripts? I only use blogspot and only need on it. I searched a lot on the Internet, but I did not find it (((
s625
s1024
s1600

Answer 1

1) If this photo was uploaded via Blogger (has a *blogspot.com or *.googleusercontent.com domain), then in the template code, in the place where you want to display the image, try the standard resizing function. For example:
The first number is the width of the image, the second is the aspect ratio .
2) If the function above does not work, you can change the size through the script.
Example for photo from *.googleusercontent.com

var userAvatar = document.querySelectorAll('.avatar-image-container img');
for (i = 0; i < userAvatar.length; i++) {
  var avatarUrl = userAvatar[i].getAttribute('src');
  if (avatarUrl.includes("googleusercontent.com")) {
    var userSize = avatarUrl.replace("s35-c", "s64-c");
    var userUrl = userAvatar[i].setAttribute('src', userSize);
  }
}

Where s35-cis the initial size, s64-cis the required size.
For photos from *.blogspot.com, replace the lines:

if (avatarUrl.includes("blogspot.com")) {
  var userSize = avatarUrl.replace("/s625/", "/s1024/");
  ...
}

Where /s625/is the initial size, /s1024/is the required size.

Answer 2

What is your purpose? If it's just to make it look normal on different screens, then use the . I myself make pictures on the blogger like this:<picture>

<picture>
 <source srcset="s1600" media="(min-width: 1024px)">
 <source srcset="s800" media="(min-width: 768px)">
 <img alt="Картинка" src="s600">
</picture>