microCMSでリッチエディタ内の画像をリサイズする

microCMSでリッチエディタ内の画像をリサイズする方法について解説します。

microCMSの画像API

microCMSで表示される画像は画像URLに対してパラメータを付与することでリサイズされた画像を呼び出すことができます。

これはmicroCMSの画像にimgixのRendering APIを利用しているためパラメータで制御することを可能にしています。

利用可能なフォーマット

• JPEG
• PNG
• GIF
• WebP

通常imgixのAPIは対応ブラウザーに合わせて画像フォーマットを自動的に最適化する
?auto=formatの機能がありますがmicroCMSでは利用することができませんのでご注意ください。

microCMSのリッチエディターで画像APIの適用する方法

コードはTypeScriptで記述しています。

正規表現で画像タグを検出

正規表現で画像タグを検出するためにimgRegexを定義

パラメータを設定

幅（w=800）と品質（q=85）のパラメータが適切に設定されています。
fmt=webpでWebPの画像が表示されるように画像フォーマットを変更
loading="lazyを指定して遅延読み込みを実装

function optimizeImages(content: string) {
  const imgRegex = /<img.*?src=["'](@?https:\/\/images\.microcms-assets\.io\/.*?)["'].*?>/g;
  
  return content.replace(imgRegex, (match: string, src: string) => {
    // '@'で始まる場合は削除
    const cleanSrc = src.startsWith('@') ? src.slice(1) : src;
    
    const baseParams = 'w=800&q=85';
    const webpSrc = `${cleanSrc}?fmt=webp&${baseParams}`;
    const originalSrc = `${cleanSrc}?${baseParams}`;
    
    const newImg = `
      <picture>
        <source srcset="${webpSrc}" type="image/webp">
        <img src="${originalSrc}" ${match.match(/class="[^"]*"/)?.[0] || ''} loading="lazy" decoding="async" alt="">
      </picture>
    `;
    
    return newImg;
  });
}

まとめ

microCMSのリッチテキスト上に配置した画像は画像APIを利用することが困難ですが、本記事で解説したようにJavaScriptを利用して後からパラメータを付与することで画像APIを利用することができるようになります。