diff --git a/src/lib/opengraph.tsx b/src/lib/opengraph.tsx
index 306fe85..21fc59a 100644
--- a/src/lib/opengraph.tsx
+++ b/src/lib/opengraph.tsx
@@ -1,9 +1,10 @@
 import satori from "satori";
 import React from 'react';
 import { readFile } from "node:fs/promises";
+import { Resvg } from "@resvg/resvg-js";
 
-export const generateOpenGraph = async (title: string, description: string) =>
-  await satori(
+export const generateOpenGraph = async (title: string, description: string) => {
+  const svg = await satori(
     <div
       style={{
         height: '100%',
@@ -35,3 +36,10 @@ export const generateOpenGraph = async (title: string, description: string) =>
     }
   );
 
+  const resvg = new Resvg(svg, null)
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  return pngBuffer;
+}
+
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 6e157d5..4fcb14d 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -20,7 +20,7 @@ const { Content } = await render(post);
 const shareurl = `https://isabelroses.com/blog/${ post.id }`;
 ---
 
-<Default title={post.data.title} description={post.data.description} image=`/blog/${post.id}.svg`>
+<Default title={post.data.title} description={post.data.description} image=`/blog/${post.id}.png`>
   <section class="flex flex-col gap-2 w-full mb-4">
     <h1 class="text-4xl">{post.data.title}</h1>
     <h2 class="text-lg">{post.data.description}</h2>
diff --git a/src/pages/blog/[...slug].svg.ts b/src/pages/blog/[...slug].png.ts
similarity index 76%
rename from src/pages/blog/[...slug].svg.ts
rename to src/pages/blog/[...slug].png.ts
index a95e4eb..9baca57 100644
--- a/src/pages/blog/[...slug].svg.ts
+++ b/src/pages/blog/[...slug].png.ts
@@ -13,10 +13,11 @@ export async function getStaticPaths() {
 export const GET: APIRoute = async ({ params }) => {
   const postData = posts.find((post) => post.id === params.slug);
 
-  const svg = await generateOpenGraph(postData.data.title, postData.data.description);
-  return new Response(svg, {
+  const png = await generateOpenGraph(postData.data.title, postData.data.description);
+
+  return new Response(png, {
     status: 200,
-    headers: { "Content-Type": "image/svg+xml" },
+    headers: { "Content-Type": "image/png" },
   });
 };
 
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
index 33c1231..9f703b1 100644
--- a/src/pages/friends.astro
+++ b/src/pages/friends.astro
@@ -9,7 +9,7 @@ const title = "Friends";
 const description = "Awesome people I know from the interwebs";
 ---
 
-<Default title={title} description={description} image="/friends.svg">
+<Default title={title} description={description} image="/friends.png">
   <section class="flex flex-col gap-4 mb-16 w-full">
     <Title title={title} description={description} size="lg" />
 
diff --git a/src/pages/friends.svg.ts b/src/pages/friends.png.ts
similarity index 65%
rename from src/pages/friends.svg.ts
rename to src/pages/friends.png.ts
index 389331f..f111de2 100644
--- a/src/pages/friends.svg.ts
+++ b/src/pages/friends.png.ts
@@ -5,9 +5,9 @@ const title = "My Friends";
 const description = "Awesome people I know from the interwebs";
 
 export const GET: APIRoute = async ({ params }) => {
-  const svg = await generateOpenGraph(title, description);
-  return new Response(svg, {
+  const png = await generateOpenGraph(title, description);
+  return new Response(png, {
     status: 200,
-    headers: { "Content-Type": "image/svg+xml" },
+    headers: { "Content-Type": "image/png" },
   });
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f2fb9c0..c3b6677 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,7 @@ const posts = await getCollection('blog');
 import { PROJECTS } from '../consts';
 ---
 
-<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION} image="/index.svg">
+<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION} image="/index.png">
 
 <section class="mb-8 w-full">
   <div class="flex flex-col gap-4">
diff --git a/src/pages/index.svg.ts b/src/pages/index.png.ts
similarity index 62%
rename from src/pages/index.svg.ts
rename to src/pages/index.png.ts
index 165d1b3..b97b0f9 100644
--- a/src/pages/index.svg.ts
+++ b/src/pages/index.png.ts
@@ -3,9 +3,9 @@ import type { APIRoute } from "astro";
 import { generateOpenGraph } from "../lib/opengraph";
 
 export const GET: APIRoute = async ({ params }) => {
-  const svg = await generateOpenGraph(SITE_TITLE, SITE_DESCRIPTION);
-  return new Response(svg, {
+  const png = await generateOpenGraph(SITE_TITLE, SITE_DESCRIPTION);
+  return new Response(png, {
     status: 200,
-    headers: { "Content-Type": "image/svg+xml" },
+    headers: { "Content-Type": "image/png" },
   });
 };
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 5d5f9b9..9219eb7 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -8,7 +8,7 @@ const title = "Projects";
 const description = "A collection of projects that I maintain";
 ---
 
-<Default title={title} description={description} image="/projects.svg">
+<Default title={title} description={description} image="/projects.png">
   <section class="flex flex-col gap-4 mb-16">
     <Title title={title} description={description} size="lg" />
 
diff --git a/src/pages/projects.svg.ts b/src/pages/projects.png.ts
similarity index 65%
rename from src/pages/projects.svg.ts
rename to src/pages/projects.png.ts
index f7be67a..85d7750 100644
--- a/src/pages/projects.svg.ts
+++ b/src/pages/projects.png.ts
@@ -5,9 +5,9 @@ const title = "My Projects";
 const description = "A collection of projects that I maintain";
 
 export const GET: APIRoute = async ({ params }) => {
-  const svg = await generateOpenGraph(title, description);
-  return new Response(svg, {
+  const png = await generateOpenGraph(title, description);
+  return new Response(png, {
     status: 200,
-    headers: { "Content-Type": "image/svg+xml" },
+    headers: { "Content-Type": "image/png" },
   });
 };