diff --git a/api/pin.js b/api/pin.js
index c33848af..8ba9feb8 100644
--- a/api/pin.js
+++ b/api/pin.js
@@ -3,6 +3,7 @@ import { blacklist } from "../src/common/blacklist.js";
 import {
   clampValue,
   CONSTANTS,
+  getBase64URIFromImage,
   parseBoolean,
   renderError,
 } from "../src/common/utils.js";
@@ -69,6 +70,10 @@ export default async (req, res) => {
       }, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
     );
 
+    repoData.openGraphImageUrl = await getBase64URIFromImage(
+      repoData.openGraphImageUrl,
+    );
+
     return res.send(
       renderRepoCard(repoData, {
         hide_border: parseBoolean(hide_border),
diff --git a/src/common/utils.js b/src/common/utils.js
index 6792df88..81edc0a8 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -569,6 +569,27 @@ const dateDiff = (d1, d2) => {
   return Math.round(diff / (1000 * 60));
 };
 
+const getBase64URIFromImage = async (imageURL) => {
+  try {
+    const response = await axios.get(imageURL, {
+      responseType: "arraybuffer",
+    });
+
+    if (response.status === 200) {
+      const base64Image = Buffer.from(response.data, "binary").toString(
+        "base64",
+      );
+      const mimeType = response.headers["content-type"];
+      return `data:${mimeType};base64,${base64Image}`;
+    } else {
+      throw new Error("Failed to fetch the image.");
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    return null;
+  }
+};
+
 export {
   ERROR_CARD_LENGTH,
   renderError,
@@ -595,4 +616,5 @@ export {
   chunkArray,
   parseEmojis,
   dateDiff,
+  getBase64URIFromImage,
 };