Choromeなどではloading属性を使って画像の遅延ロードができます。やり方は簡単なで、<img>タグにloading="lazy"と記述するだけです。

<img src="path" loading="lazy">

markdown-itをカスタマイズ

マークダウンファイルをHTMLに書き起こしてくれる便利なmarkdown-itはデフォルトではそのような書き出しは行われないので、少しカスタマイズする必要があります。

const md = new MarkdownIt();
const defaultRender =
  md.renderer.rules.image ||
  function(tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };
md.renderer.rules.image = function(tokens, idx, options, env, self) {
  tokens[idx].attrPush(["loading", "lazy"]);
  return defaultRender(tokens, idx, options, env, self);
};

これでデフォルトのimgタグのレンダリングを変更してloading属性つきで出力されます。

Nuxtで使う場合

使っているライブラリや設定にもよりますが、このサイトのNuxtで使っている方法です。自分の場合markdown-itの設定はプラグイン化しているので、そのプラグインファイルに上記の設定を組み込めばOKです。

import MarkdownIt from "markdown-it";

export default ({ app }, inject) => {
  const md = new MarkdownIt({
    // Your Basic Settings
  });

  const defaultRender =
    md.renderer.rules.image ||
    function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };
  md.renderer.rules.image = function(tokens, idx, options, env, self) {
    tokens[idx].attrPush(["loading", "lazy"]);
    return defaultRender(tokens, idx, options, env, self);
  };

  inject("md", md);
};

これをmarkdown-it.jsなどの名前でpluginフォルダに保存し、nuxt.config,jsに

plugins: ["~/plugins/markdown-it"]

で読み込めばOKです。TypeScriptを導入している方は適宜型を導入してください。（自分はanyでつぶしていますが）

おわりに

loading属性自体は2020年2月現在、Google ChromeとChromium化したEdge 79以降（とOpera）のみの対応です。しかし、これまでChromeの独自実装だったのが、Web標準として採用されたので他のブラウザの対応も期待できます。