diff --git a/package.json b/package.json
index cd4b50e..713ef21 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@tailwindcss/vite": "^4.0.7",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
+    "@resvg/resvg-js": "^2.6.2",
     "astro": "^5.7.13",
     "astro-expressive-code": "^0.40.2",
     "astro-icon": "^1.1.5",
diff --git a/src/components/PostHead.astro b/src/components/PostHead.astro
index 356a98e..45c87dc 100644
--- a/src/components/PostHead.astro
+++ b/src/components/PostHead.astro
@@ -20,7 +20,7 @@ const ogImage = {
   url: new URL(`/api/og/${encodeURIComponent(post.id)}`, siteUrl).toString(),
   width: 1200,
   height: 630,
-  type: 'image/svg+xml',
+  type: 'image/png',
 }
 const canonicalUrl = Astro.url
 ---
diff --git a/src/pages/api/og/[slug].ts b/src/pages/api/og/[slug].ts
index cb3b369..bba6980 100644
--- a/src/pages/api/og/[slug].ts
+++ b/src/pages/api/og/[slug].ts
@@ -1,4 +1,5 @@
 import type { APIRoute } from 'astro'
+import { Resvg } from '@resvg/resvg-js'
 import { SITE } from '@/consts'
 import { fetchRemotePost, normalizePost } from '@/lib/data-utils'
 import { formatDate } from '@/lib/utils'
@@ -158,10 +159,19 @@ export const GET: APIRoute = async ({ params }) => {
     siteHost,
   })
 
-  return new Response(svg, {
+  const png = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: WIDTH,
+    },
+  })
+    .render()
+    .asPng()
+
+  return new Response(png, {
     status: 200,
     headers: {
-      'Content-Type': 'image/svg+xml; charset=utf-8',
+      'Content-Type': 'image/png',
       'Cache-Control':
         'public, max-age=0, s-maxage=86400, stale-while-revalidate=604800',
     },