og/[slug].jpg.ts: OGP画像をPNGからJPEGに変更

4 files changed, 14 insertions, 11 deletions

diff --git a/astro.config.mjs b/astro.config.mjs
index 9d181c0..afac81c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -216,7 +216,7 @@ export default defineConfig({
           tag: "meta",
           attrs: {
             property: "og:image",
-            content: "https://yasutakeyohei.com/og/index.png?v=2",
+            content: "https://yasutakeyohei.com/og/index.jpg?v=2",
           },
         },
         {
@@ -230,7 +230,7 @@ export default defineConfig({
           tag: "meta",
           attrs: {
             name: "twitter:image",
-            content: "https://yasutakeyohei.com/og/index.png?v=2",
+            content: "https://yasutakeyohei.com/og/index.jpg?v=2",
           },
         },
         {
diff --git a/src/pages/og/[slug].png.ts b/src/pages/og/[slug].jpg.ts
index d40dead..f2015c4 100644
--- a/src/pages/og/[slug].png.ts
+++ b/src/pages/og/[slug].jpg.ts
@@ -1,5 +1,6 @@
 import satori from "satori";
 import { Resvg } from "@resvg/resvg-js";
+import sharp from "sharp";
 import {
   readFileSync,
   existsSync,
@@ -146,9 +147,9 @@ export async function GET({ params }: { params: { slug: string } }) {
     title = `${reiwa}${month}定例会`;
   }
 
-  // Check cache: if title hash matches, return cached PNG from node_modules/.og-cache
+  // Check cache: if title hash matches, return cached JPEG from node_modules/.og-cache
   const cacheDir = path.join(process.cwd(), "node_modules", ".og-cache");
-  const cacheFile = path.join(cacheDir, `${slug}.png`);
+  const cacheFile = path.join(cacheDir, `${slug}.jpg`);
   const cacheJsonPath = path.join(cacheDir, ".og-cache.json");
 
   let cache: Record<string, string> = {};
@@ -163,7 +164,7 @@ export async function GET({ params }: { params: { slug: string } }) {
     const cachedBuffer = readFileSync(cacheFile);
     return new Response(cachedBuffer, {
       headers: {
-        "Content-Type": "image/png",
+        "Content-Type": "image/jpeg",
         "Cache-Control": "public, max-age=31536000, immutable",
       },
     });
@@ -296,16 +297,18 @@ export async function GET({ params }: { params: { slug: string } }) {
 
   const resvg = new Resvg(svg, { fitTo: { mode: "width", value: 1200 } });
   const pngBuffer = resvg.render().asPng();
+  // OGP は JPEG で出力する（PNGだと1枚300KBを超えるため、JPEGで約1/5にする）
+  const jpgBuffer = await sharp(pngBuffer).jpeg({ quality: 88 }).toBuffer();
 
   // Save to cache in node_modules/.og-cache (persists across builds)
   if (!existsSync(cacheDir)) mkdirSync(cacheDir, { recursive: true });
-  writeFileSync(cacheFile, pngBuffer);
+  writeFileSync(cacheFile, jpgBuffer);
   cache[slug] = titleHash;
   writeFileSync(cacheJsonPath, JSON.stringify(cache, null, 2));
 
-  return new Response(pngBuffer, {
+  return new Response(jpgBuffer, {
     headers: {
-      "Content-Type": "image/png",
+      "Content-Type": "image/jpeg",
       "Cache-Control": "public, max-age=31536000, immutable",
     },
   });
diff --git a/src/pages/og/index.astro b/src/pages/og/index.astro
index 8916dcd..bbde23d 100644
--- a/src/pages/og/index.astro
+++ b/src/pages/og/index.astro
@@ -84,8 +84,8 @@ const slugs = [
     <h1>OGP 画像一覧（{slugs.length} 枚）</h1>
     <div class="grid">
       {slugs.map((slug) => (
-        <a href={`/og/${slug}.png`} class="card">
-          <img src={`/og/${slug}.png`} alt={slug} loading="lazy" />
+        <a href={`/og/${slug}.jpg`} class="card">
+          <img src={`/og/${slug}.jpg`} alt={slug} loading="lazy" />
           <span>{slug}.png</span>
         </a>
       ))}
diff --git a/src/plugins/og-image.ts b/src/plugins/og-image.ts
index e9efbcb..e16a393 100644
--- a/src/plugins/og-image.ts
+++ b/src/plugins/og-image.ts
@@ -20,7 +20,7 @@ export default function ogImageIntegration(): AstroIntegration {
           let slug = page.pathname.replace(/^\/|\/$/g, "") || "index";
           // URL-safe: replace / with - for nested paths
           const imageSlug = slug.replace(/\//g, "--");
-          const ogImageUrl = `https://yasutakeyohei.com/og/${imageSlug}.png?v=2`;
+          const ogImageUrl = `https://yasutakeyohei.com/og/${imageSlug}.jpg?v=2`;
 
           html = html.replace(
             /<meta property="og:image" content="[^"]*"/g,