Use `<noscript>` tag with default `<img>` element for browsers with disabled JS

[tobimori]

Untested, but just came into my mind that you could do something like this to get rid of blurry placeholders if JS is disabled (roughly 1-2% of all browsers, so basically as irrelevant as IE)

<figure>
      <img
        src="<?= $image->placeholderUri() ?>"
        data-src="<?= $image->url() ?>"
        data-lazyload
        alt="<?= $image->alt() ?>"
      />
      <noscript>
            <img
              src="<?= $image->url() ?>"
              alt="<?= $image->alt() ?>"
            />
      </noscript>
</figure>

Probably needs absolute positioning on the parent or some kind of styling to remove the placeholder when the page is loaded without JS, as otherwise both images are shown, so something like this in the head should work:

<noscript>
      <style>
            img[data-lazyload] {
                display: none; 
            }
      </style>
</noscript>

With regard to this plugin, it should be at least mentioned in the README and optionally added to the bluryrimage KirbyTag and/or the image block snippet.

[cgundermann]

@tobimori: The native loading="lazy" in Your <noscript> example would have no effect as stated on MDN:

Note: Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.