Extend kirby img tag and keep two different img sizes (one for low-res placeholder)

Kirby 2 Questions 🤔
1

Starting from this excellent example → Overridding Image Tags More Elegantly?

I’m having problems figuring out how to set $_imageLazy (the custom $_image tag) to output a cropped down image of say width => 32, but when setting the initial image width for the img tag, keep the original image size.

This is due to prevent to have images scaling up and causing page reflow when a user scrolls down or up the page and the javascript plugin I am using swaps the low-res image with the high-res one.

This is the relevant bits of code I have added, following the example shared in gist above. I have a custom figure.php tag inside /site/tags.

// use the file url if available and otherwise the given url
$url = $file ? $file->url() : url($url);
$url_low = thumb($file, array('width' => 32, 'quality' => 80), false);

// image builder
$_image = function($class) use($tag, $url, $alt, $title) {
  return html::img($url, array(
    'width'  => $tag->attr('width'),
    'height' => $tag->attr('height'),
    'class'  => $class,
    'title'  => $title,
    'alt'    => $alt
  ));
};

// add imagelazy
$_imageLazy = function($class) use($tag, $url, $url_low, $alt, $title) {
  return html::img($url_low, array(
    'width'  => $tag->attr('width'),
    'height' => $tag->attr('height'),
    'class'  => $class.'imgr d-n blur-up',
    'title'  => $title,
    'alt'    => $alt,
    'data-src' => $url
  ));
};

My understanding is that I’d need to tell

    'width'  => $tag->attr('width'),
    'height' => $tag->attr('height'),

to not use $tag coming from $_imageLazy, but rather from $_image?

In the template code I was using this, before having to implement the same function to kirby img tag rather than to a template page

<img src="<?= $img->resize(32, null, 80)->url() ?>" data-src="<?= $img->url() ?>" width="<?= $img->width() ?>" height="<?= $img->height() ?>">

Thanks, af