How to change all url images in blogger with custom url images

Here are some methods, assuming you MUST process your images on the client

Ugly (loads the initial image, then the other image)

window.addEventListener("load", function() { 
  [...document.querySelectorAll("img[src^='https://bp1.blogspot.com']")].forEach(function(img) { 
    let src = img.src; 
    img.src = "https: //cdn.staticly.io/img/"+ src + "?format=webp"; 
  }) 
})

<img src="https://bp1.blogspot.com/image1.jpg" /><br/> 
<img src="divider.jpg" /> 
<img src="https://bp1.blogspot.com/image2.jpg" /><br/> 
<img src="https://bp1.blogspot.com/image3.jpg" /><br/>

Possibly nicer

Loading the content from an html file with images and replaces them before showing

$(function() {
  $.get("imageSnippet.html", function(html) {
    $("#container").html(html);
    [...document.querySelectorAll("#container img[src^='https://bp1.blogspot.com']")]
    .forEach(function(img) {
      let src = img.src;
      img.src = "https: //cdn.staticly.io/img/" + src + "?format=webp";
    })
    $("#container").show();
  })
})

#container {
  display: none
}

<div id="container"></div>

Using jQuery:

$('img').each(function(){
  var $this = $(this);
  $this.attr('src',$this.attr('src').replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp");
})

Without jQuery:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) { 
  var src = imgs[i].src;
  imgs[i].src = src.replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp";
}

Put the code before the closing body tag </body>.