microCMSでアップロードされた画像は、基本的に原寸で表示されます。

ユーザーによってはデジカメで撮った無加工の5000px超えJPG画像をアップロードされることもあります。Wordpressだとプラグインなどでアップロード時にリサイズできますが、microCMSにその機能はありません。その代わりに、画像URLにパラメータを付与することでリサイズされた画像を呼び出すことができます。ドキュメントはこちら。

サムネイル画像など画像URLを直接呼び出すコンテンツならよいですが、リッチエディタ内の画像URLではできません。なので、データ取得後に置換してしまいます。

axios
  .get(`${$config.microCMSApiUrl}/blog/${params.id}`, {
    headers: {
      'X-API-KEY': $config.microCMSApiKey,
    },
  })
  .then((res) => {
    // 画像をリサイズするためパラメータを付与
    res.data.body = res.data.body.replace(
      /"(https?:\/\/images\.microcms-assets\.io\/.+?\.(jpe?g|gif|png))"/g,
      '"$1?fit=max&w=800&h=800"'
    );

    return res.data;
  });

記事詳細ページのコードを掲載します。リッチエディタのフィールドIDが「body」なので、res.data.bodyにリッチエディタ入力内容が格納されています。その中の画像URLを抽出し、末尾に?fit=max&w=800&h=800を付けてやります。このパラメータは、「800×800pxの中で縦横比を保ったままリサイズ」という意味です。800px四方より小さい場合はリサイズされません。

このほか、画像の品質を下げたりwebp形式に変換したりと、かなり柔軟に画像を呼び出せます。srcset属性付与やLightbox追加など、いろいろなことができそうですね。