Astro + microCMSの画像を最適化して高速で表示する。

画像をたくさん載せたら、表示スピードが落ちた。

microCMSの画像編集機能ページ（https://blog.microcms.io/microcms-with-image-editing/）では、画像のリサイズ、フォーマット変更などを行うAPIパラメータについて説明している。

このページをもとに、画像を最適化して表示する。

まず src > lib フォルダの中に新しいjsファイルを作成して新しい関数を作成する。

export function replaceImageTagsWithWebP(content) {
  return content.replace(/<img(.*?)src="(.*?)"(.*?)>/g, (match, p1, src, p3) => {
    const srcset = `
      ${src}?w=400 400w,
      ${src}?w=800 800w,
      ${src}?w=1200 1200w,
      ${src}?w=1600 1600w
    `;

    const webpSource = `
      <source srcset="${src}?fm=webp&w=400 400w,
                      ${src}?fm=webp&w=800 800w,
                      ${src}?fm=webp&w=1200 1200w,
                      ${src}?fm=webp&w=1600 1600w" 
              type="image/webp">
    `;

    const imgTag = `<img${p1}src="${src}?w=800"${p3} 
                    srcset="${srcset.trim()}" 
                    sizes="(max-width: 600px) 400px, 
                           (max-width: 900px) 800px, 
                           (max-width: 1200px) 1200px, 
                           1600px">`;
                           
    return `<picture>${webpSource}${imgTag}</picture>`;
  });
}

このコードは、HTML コンテンツ内の <img> タグを <picture> タグに変換し、WebP 形式の画像を優先して使用するための関数である。WebP 画像形式は、通常のJPEGやPNGよりもファイルサイズが小さいため、画像の読み込みを高速化し、Webサイトのパフォーマンスを向上させる目的で使用される。

[blogId].astroでは、記述したjsファイルを読み込む。

取得したpostのcontentを事前にサーバーサイドで画像を最適化した状態に変換してから、HTMLに表示する。

---
import Layout from '../layouts/Layout.astro';
import { replaceImageTagsWithWebP } from '../lib/replaceImage.js';

const { blogId } = Astro.params;
let post = await fetchContent(`blogs/${blogId}`);

post.content = replaceImageTagsWithWebP(post.content);
---
<Layout>
  <div set:html={post.content} />
</Layout>