I have a long page where I want images loaded only when they first come into view. I saw this:

https://stackoverflow.com/questions/2321907/how-do-you-make-images-load-only-when-they-are-in-the-viewport

So the technique shown there is

<img src="" realsrc="/myimage.png" />

$(document).ready(function(){

  $(window).scroll(function(){
    $('img[realsrc]').each(function(i){
      var t = $(this);
      if(t.position().top > ($(window).scrollTop()+$(window).height()){
        t.attr('src', t.attr('realsrc')); // trigger the image load
        t.removeAttr('realsrc'); // so we only process this image once
      }
    });
  })

});

My question is, where in gutenberg or the media uploader would I alter image insertion so my images are inserted in this format:

<img src="" realsrc="/myimage.png" />

I am trying to rely less on plugins and more so on custom edits that I will just keep track of. So trying to figure out where in WordPress core I would alter the insertion of image tags. I suppose there is some apply_filters(), but again, I don’t want to get in the habit of relying on wordpress hooks and filters since I want to have default behaviors that don’t rely on hooks and filters.

thanks,

Brian