The lazy loading of images via the loading attribute has landed in Chrome, and other browser-vendors are sure to follow suit. Deferring to the browser when support is available and otherwise loading a polyfill such as Lazysizes is a solid approach to performant, responsive images.

Checking the HTMLImageElement for the loading property is a reliable way to test for native lazy loading support:-

const supportsLoadingAttribute = "loading" in HTMLImageElement.prototype;

If the browser supports native image loading we do nothing, or else we dynamically import() the Lazysizes module. Authoring this code within a client-side only Nuxt plugin means the polyfill loads and initialises only once and within the context of the entire application:-

// ~/plugins/lazysizes.client.js

export default () => {
  if ("loading" in HTMLImageElement.prototype) {
    return;
  }

  import("lazysizes");
};

Below is a loosely outlined ResponsiveImage component which follows the pattern that I want to demonstrate.

The server-side rendered HTML contains an image with the src and srcset values assigned to data-* attributes – the actual attributes contain placeholders. On mount() (a client-side only Vue lifecycle hook) if the browser supports the loading attribute the placeholders are replaced by the true src and srcset values. If support is absent then the class 'lazyload' is added to the <img> and Lazysizes takes over from there:-

<!-- ~/components/ResponsiveImage.vue -->
<template>
  <img
    :class="{ lazyload: loading === 'lazy' && !supportsLoadingAttribute }"
    :loading="loading"
    v-bind="{ ...sources }"
  />
</template>

<script>
  // base64-encoded transparent GIF
  const placeholder =
    "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";

  export default {
    props: {
      // the props required to compute `srcset` should go here

      loading: {
        type: String,

        default: "lazy"
      }
    },

    data() {
      return {
        supportsLoadingAttribute: false
      };
    },

    computed: {
      src() {
        // `return` a fallback image for browsers
        // that don't support `srcset` and `sizes`
      },

      srcset() {
        // responsive images can be handled in all sorts of
        // ways and I won't go into any further detail here
      },

      sources() {
        if (this.loading === "lazy" && !this.supportsLoadingAttribute) {
          return {
            "data-src": this.src,
            "data-srcset": this.srcset,

            src: placeholder,
            srcset: `${placeholder} 1w`
          };
        }

        return {
          srcset: this.srcset
        };
      }
    },

    mounted() {
      this.supportsLoadingAttribute = "loading" in HTMLImageElement.prototype;
    }
  };
</script>

There's are many different approaches to lazy-loading images on the web. Each has its advantages and disadvantages and the one you choose will ultimately depend on your priorities. Are you more concerned about SEO, page speed, data footprint, or browser compatibility?

The pattern outlined above, for example, would need to provide a <noscript> fallback in the case of JavaScript being disabled.

Either way, hopefully this has started you off in the right direction. Check out the links below for some more in-depth explanations of the loading attribute and lazy-loading markup patterns.

Further Reading

• Lazysizes Recommended Markup Patterns
• Native Image Lazy-Loading for the Web!